본문 바로가기

리디 접속이 원활하지 않습니다.
강제 새로 고침(Ctrl + F5)이나 브라우저 캐시 삭제를 진행해주세요.
계속해서 문제가 발생한다면 리디 접속 테스트를 통해 원인을 파악하고 대응 방법을 안내드리겠습니다.
테스트 페이지로 이동하기

알아서 잘 딱 깔끔하고 센스있게 정리하는 flex & grid - flex가 grid 어렵드나 상세페이지

컴퓨터/IT 개발/프로그래밍

알아서 잘 딱 깔끔하고 센스있게 정리하는 flex & grid - flex가 grid 어렵드나

판매가 무료
  • 선물하기
알아서 잘 딱 깔끔하고 센스있게 정리하는 flex & grid - flex가 grid 어렵드나

작품 소개

<알아서 잘 딱 깔끔하고 센스있게 정리하는 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

점수비율

  • 5
  • 4
  • 3
  • 2
  • 1

0명이 평가함

리뷰 작성 영역

이 책을 평가해주세요!

내가 남긴 별점 0.0

별로예요

그저 그래요

보통이에요

좋아요

최고예요

별점 취소

구매자 표시 기준은 무엇인가요?

'구매자' 표시는 리디에서 유료도서 결제 후 다운로드 하시거나 리디셀렉트 도서를 다운로드하신 경우에만 표시됩니다.

무료 도서 (프로모션 등으로 무료로 전환된 도서 포함)
'구매자'로 표시되지 않습니다.
시리즈 도서 내 무료 도서
'구매자’로 표시되지 않습니다. 하지만 같은 시리즈의 유료 도서를 결제한 뒤 리뷰를 수정하거나 재등록하면 '구매자'로 표시됩니다.
영구 삭제
도서를 영구 삭제해도 ‘구매자’ 표시는 남아있습니다.
결제 취소
‘구매자’ 표시가 자동으로 사라집니다.

이 책과 함께 구매한 책


이 책과 함께 둘러본 책



본문 끝 최상단으로 돌아가기

spinner
모바일 버전