FrontEnd (437) 썸네일형 리스트형 [CSS][Layout][Flow Layout : 블록 요소와 인라인 요소] CSS에는 총 7 종류의 레이아웃이 있음. ex) Flexbox, Grid, ect. 그중 Default는 Flow Layout임. 모든 엘리먼트는 inline 엘리먼트, box 엘리먼트, inline-block 엘리먼트 중 하나임. 인라인 요소는 레이아웃에 영향을 주지 않는다. 참고: 인라인 요소는 새 줄에서 시작하지 않고 필요한 만큼만 너비를 차지합니다. 즉, 블록 관점에서 크기는 변하지 않는다. margin-left, margin-right로 좌우 조절은 가능함. height같은 속성으로 블록 height에 영향을 주지는 않음. 인라인 요소의 높이는 컨텐츠의 높이 인라인 요소의 너비는 컨텐츠 너비 CSS로 높이와 너비 조절 불가능. 과 같은 명백한 줄바꿈이 없으면 왼쪽에서 오른쪽으로 계속 흐른다. .. [CSS][box-sizing 알아보기] TLDR : content-box면 content 영역 크기는 변하지 않는다. boreder-box면 content 영역 크기가 변한다. box-sizing : content-box는 모든 요소에 대해 디폴트 선언이다. 이 설정의 문제점은 content 영역 크기의 계산은 쉽지만 박스모델 전체 크기(dimension)가 예상이 어렵다는 것이다. border box : .box 클래스 요소의 크기(dimension)는? 드래그 : 220px * 320px 드래그 : 502px * 2px 크기가 없는 컨텐츠에 마진과 보더만 붙어서 보이는 현상은 보통 원하지 않을 것이다. 새로운 디폴트 : border-box *, *::before, *::after { box-sizing: border-box; } borde.. [CSS][Layout][Flow layout :마진 및 마진 겹침] 마진 마진은 보더, 패딩과 다르게 음수가 가능하다. 이는 엘리먼트를 부모 안으로 혹은 밖으로 끌어당기고 내보내는 것이 가능하다는 것이다. 즉 부모가 자식에게, 또는 반대로, 형제가 형제에게 영향을 미치는 것이 가능하다. 좀 더 알아보기. Negative margins in CSS - QuirksBlog (quirksmode.org) Negative margins in CSS - QuirksBlog Negative margins in CSS I’m writing the Box Model chapter of the new book and came to the point where I had to treat negative margins. To my surprise, I found that there is n.. CSS 면접 대비 정리 1. 기본사항 CSS 박스 모델 CSS Box model - GeeksforGeeks CSS Box model - GeeksforGeeks A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions. www.geeksforgeeks.org 브라우저의 렌더링 엔진은 화면을 렌더링할 때, CSS 박스 모델에 따라 요소를 표현함. 웹 페이지의 디자인 및 레이아웃을 표현하는 방식. content : 이 속성은 너.. [React][Remix][Jokes App Tutorial][Part1] Remix | Jokes App Remix | Jokes App remix.run 해당 페이지를 의역 밎 정리한 내용이다. 해당 프로젝트는 youtubue를 보면서 따라할 수 도 있다. 내용이 생각보다 꽤 길어서 코드는 제외하려다 3편 정도로 나누어서 전부 다루는게 낫다는 생각이 들어 추후 재작업 예정. Work through this tutorial with Kent in this live stream 들어가며 해당 프로젝트는 Remix의 핵심 아이디어에만 집중할 예정임. 불필요한 기본 지식들은 스킵 및 복붙. remix는 웹 표준을 강조함. MDN 문서를 많이 보게 될 것임. 개요 튜토리얼에서 다루는 내용들 프로젝트 생성 컨벤션 라우팅 스타일링 데이터 접근 뮤테이션(커맨드) 검증 인증 에러처리 개발.. [Epic React][Build an Epic React App][Testing Hooks and Components][훅과 컴포넌트 테스트] bookshelf/INSTRUCTIONS.md at exercises/12-testing-hooks-and-components · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com Background React 애플리케이션의 두 가지 빌딩 블록은 Hooks와 Components입니다. 훅을 조합해서 커스텀 훅을 만들 수도 있고, 컴포넌트를 다른 조각으로 분할할 수도 있습니다.. [Epic React][Build an Epic React App][Unit Test][단위 테스트] bookshelf/INSTRUCTIONS.md at exercises/11-unit-testing · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com Background 코드를 변경할 때 앱이(다른 기능 포함)정상 동작하는지 확인하고 싶다. 복잡한 로직을 함수로 추출하고 테스트하면 큰 도움이 된다. 실습 단위 테스트를 수행할 두 개의 유틸리티가 있다. 첫 번째는 매우 간단.. [Epic React][Build an Epic React App][Render as you fetch][렌더링 하면서 필요한 데이터 가져오기] bookshelf/INSTRUCTIONS.md at exercises/10-render-as-you-fetch · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com 렌더링 하면서 필요한 데이터 가져오기 배경 우리 애플리케이션의 성능에 부정적인 영향을 미치는 것은 "폭포 효과"라고 불리는 것입니다. (동시에 다운 못받고 순차적으로 다운로드) 앱이 초기 페이지를 렌더링하기 .. 이전 1 ··· 46 47 48 49 50 51 52 ··· 55 다음
