Keyword overview
null
The Code Card
Grid layout property
https://lshjju.tistory.com/816
Grid layout property
웹 페이지의 레이아웃을 2차원(행과 열) 격자 형태로 완벽하게 제어할 수 있는 CSS 그리드(Grid) 레이아웃에 대해 알아보겠습니다.Flexbox가 1차원(한 방향) 레이아웃에 강하다면, Grid는 가로와 세로
lshjju.tistory.com
Grid lines and template areas
https://lshjju.tistory.com/817
Grid lines and template areas
그리드 레이아웃의 핵심은 **"격자판을 어떻게 나누고, 그 안의 영역을 어떻게 이름 붙여 관리하느냐"**에 있습니다.단순히 칸을 나누는 수준을 넘어, **그리드 라인(Grid Line)**과 **템플릿 영역(Grid
lshjju.tistory.com
Code training
12-1 CSS 그리드 레이아웃 사용하기
CSS 그리드 레이아웃에서 사용하는 용어
CSS 그리드 레이아웃에서 항목을 배치하는 속성
그리드 컨테이너를 지정하는 display 속성
열과 행을 지정하는 grid-timplate-columns, grid-templates-row 속성
열/행의 크기와 개수 지정하기 1
https://github.com/lshjju/doit-hcj-new/blob/main/12/results/grid-1.html
동적으로 만들어진 행의 높이를 지정하는 grid-auto-rows 속성
상대적인 크기를 지정하는 fr 단위
값이 반복될 때 줄여서 표현할 수 있는 repeat() 함수
최솟값과 최댓값을 지정하는 minmax() 함수
행의 높이를 자동으로 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/12/results/grid-3.html
그리드 항목의 간격을 조절하는 gap 속성
12-2 그리드 라인과 템플릿 영역으로 배치하기
그리드 라인을 사용해 배치하기
CSS 그리드 레이아웃 지정하기
그리드 라인을 사용해 배치하기
https://github.com/lshjju/doit-hcj-new/blob/main/12/results/grid-6.html
실습 - 반응형 레이아웃 만들기
1단계 준비 파일 살펴보기
2단계 미디어 쿼리 중단점 지정하기
3단계 개발자 도구 창에서 확인하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/12/responsive.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/12/results/responsive.html
템플릿 영역을 사용해 배치하기
실습 - CSS 그리드 레이아웃을 사용해 갤러리 만들기
1단계 준비 파일 살펴보기
2단계 템플릿 영역 만들기
3단계 템플릿 영역을 사용해 배치하기
4단계 웹 브라우저에서 확인하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/12/gallery.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/12/results/gallery.html
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! CSS 웹 표준의 정석' 카테고리의 다른 글
| Transition and Animation (0) | 2025.11.06 |
|---|---|
| CSS Advanced Selectors (0) | 2025.11.06 |
| Flexbox layout (0) | 2025.11.06 |
| RWD and Media query (0) | 2025.11.06 |
| Image and Gradient (0) | 2025.11.06 |