- 출간 정보
- 2022.06.03. 전자책 출간
- 파일 정보
- 31.2MB
- 170쪽
- ISBN
- 9791188786596
리디 접속이 원활하지 않습니다.
강제 새로 고침(Ctrl + F5)이나 브라우저 캐시 삭제를 진행해주세요.
계속해서 문제가 발생한다면 리디 접속 테스트를 통해 원인을 파악하고 대응 방법을 안내드리겠습니다.
테스트 페이지로 이동하기
<알아서 잘 딱 깔끔하고 센스있게 정리하는 flex & grid - flex가 grid 어렵드나> ※ 해당 책은 22년 진행한 flex & grid 오픈소스 프로젝트 그룹의 결과물입니다.
사용자에게 컨텐츠를 잘 전달하는 일은 좋은 컨텐츠를 만드는 것만큼이나 중요한 일입니다. 이를 위해 CSS 레이아웃의 형태는 지속적으로 발전해 왔고, 현재는 모던 레이아웃이라고 불리는 flex와 grid가 나옴으로써 복잡한 웹페이지의 레이아웃을 만드는 것도 매우 간단해졌습니다.
하지만 CSS를 처음 배우는 초심자에게 flex와 grid의 문턱이 높아 보이는 것은 사실입니다. 아직은 최신 기술에 속하다 보니 막상 배우려고 하면 기초부터 잘 정리된 문서나 사이트를 찾기란 쉽지 않죠.
이 책에서는 flex와 grid를 처음 배우는 사람의 입장에서 잘 이해할 수 있도록 핵심 개념들을 정의하고 최대한 많은 예제를 통해 이해를 도왔습니다. 또 속성마다 달라지는 변화를 직접 눈으로 확인하고 실무에서 Cheat-Sheet처럼 사용할 수 있도록 **오픈소스 홈페이지도 제작**하였으니, 꼭 홈페이지와 함께 책을 보시기를 권해드립니다.
책이 나오기까지 힘써주신 위니브 임직원과 멋쟁이사자처럼 프론트엔드스쿨 운영진에게, 프로젝트를 끝까지 함께해 주신 구성원에게 감사 인사를 드립니다.
- 들어가며
머리말
저자목록
홈페이지, Notion, PDF 파일 및 QR 코드
- Flex 핵심개념
1. Flex
1.1. 들어가기에 앞서
1.2. Flex란?
1.3. 당신이 Flex를 알면 만들 수 있는 것들 : Flex 속성을 통해 만들 수 있는 레이아웃 소개
1.4. Flex의 특징
1.5. axis와 cross-axis
1.5.1. axis란?
1.5.2. 주축과 교차축
1.5.3. dir 특성
1.5.4. writing mode에 따라 바뀌는 축
1.6. 기본 속성 정보
1.6.1. Flex 알아보기
1.6.2. Flex 사용법
1.6.3. Flex 기본 속성
2. Flex-direction
2.1. flex-direction : row
2.2. flex-direction : row-reverse
2.3. flex-direction : column
2.4. flex-direction : column-reverse
2.5. 접근성 고려사항
3. Justify-content
3.1. flex-start
3.2. flex-end
3.3. center
3.4. space-between, space-around, space-evenly
3.4.1. space-between
3.4.2. space-around
3.4.3. space-evenly
3.5. 자주 사용하지 않는 속성들
3.5.1. justify-content : normal
3.5.2. justify-content : initial
3.5.3. justify-content : inherit
3.5.4. justify-content : revert
3.5.5. justify-content : unset
3.5.6. firefox에서만 지원하는 속성
4. Align-items, Align-content
4.1. align-items
4.2. align-content
5. Flex-wrap
5.1. flex-wrap : nowrap
5.2. flex-wrap : wrap
5.3. flex-wrap : wrap-reverse
6. Flex-basis
6.1. flex-basis란?
6.2. flex-basis에 들어가는 값
6.3. flex-basis의 유연성
6.4. flex-basis와 width/height의 관계
6.5. flex-basis : auto; 와 flex-basis : 0;
6.6. flex-basis : content;
6.7. flex-basis보다는 flex 축약 속성을! (W3C)
6.8. flex-basis 호환성
7. Flex-grow
7.1. flex-grow란?
7.2. flex-grow 기능 : 확장 또는 고정
7.3. flex-grow 사용 시 주의할 점
7.4. flex 축약 속성
7.5. flex-shrink보다는 flex 축약 속성을! (W3C)
7.6. flex-grow 호환성
8. Flex-shrink
8.1. Flex-shrink 란?
8.2. Flex-shrink 기능: 축소 또는 고정
8.3. Flex-shrink 사용 시 주의할 점
8.4. Flex 축약 속성
8.5. Flex-shrink보다는 Flex 축약 속성을! (W3C)
8.6. Flex-shrink 호환성 (caniuse)
9. 그 밖의 Flex-item에 사용하는 속성들
9.1. align-self
9.2. order
9.3. z-index
10. IE 지원을 위한 Flex
10.1. -ms- prefix 사용 예시
10.2. IE에서의 Flex 이슈
11. 성배 레이아웃 그리기
11.1. Flex 속성을 이용하여 기본 성배 레이아웃 구현하기
11.2. Flex 속성을 이용하여 변형된 성배 레이아웃 구현하기
- Grid 핵심개념
1. Grid
1.1 grid로 할 수 있는 것들
1.2. 그리드 용어정리
1.3. 개발자 도구로 그리드 체크하는법
1.4. grid 사용법
2. Grid row , Grid column
2.1. grid-template-rows, grid-template-columns
2.2. repeat / 1fr이란
2.3. min-max 함수
2.4. grid-auto-rows , grid-auto-columns
3. Gap
3.1. gap이란?
3.2. margin과 gap의 차이점
3.3. gap의 종류
4. 각 셀의 영역 지정
4.1. grid-column-start & grid-column-end
4.2. grid-row-start & grid-row-end
4.3. 셀의 영역 지정
4.4. grid-column & grid-row
4.5. span 을 이용한 레이아웃 지정
4.6. grid-area
4.7. grid-template-areas
4.8. grid line 외의 추가적인 방법
5. IE지원을 위한 Grid
0.0 점
0명이 평가함
내가 남긴 별점 0.0
별로예요
그저 그래요
보통이에요
좋아요
최고예요
'구매자' 표시는 리디에서 유료도서 결제 후 다운로드 하시거나 리디셀렉트 도서를 다운로드하신 경우에만 표시됩니다.
성인 인증 안내
성인 재인증 안내
청소년보호법에 따라 성인 인증은 1년간
유효하며, 기간이 만료되어 재인증이 필요합니다.
성인 인증 후에 이용해 주세요.
해당 작품은 성인 인증 후 보실 수 있습니다.
성인 인증 후에 이용해 주세요.
청소년보호법에 따라 성인 인증은 1년간
유효하며, 기간이 만료되어 재인증이 필요합니다.
성인 인증 후에 이용해 주세요.
해당 작품은 성인 인증 후 선물하실 수 있습니다.
성인 인증 후에 이용해 주세요.
본문 끝 최상단으로 돌아가기
무료이용권을 사용하시겠습니까?
사용 가능 : 장
<>부터 총 화
무료이용권으로 대여합니다.
무료이용권으로
총 화 대여 완료했습니다.
남은 작품 : 총 화 (원)
알아서 잘 딱 깔끔하고 센스있게 정리하는 flex & grid - flex가 grid 어렵드나
작품 제목
대여 기간 : 일
작품 제목
결제 금액 : 원
결제 가능한 리디캐시, 포인트가 없습니다.
리디캐시를 충전하시면 자동으로 결제됩니다.
최대 5% 리디포인트 적립 혜택도 놓치지 마세요!
이미 구매한 작품입니다.
작품 제목
원하는 결제 방법을 선택해주세요.
작품 제목
대여 기간이 만료되었습니다.
다음화를 보시겠습니까?