-
[CSS] 레이아웃: Box Model, Grid생활코딩/WEBn 2020. 8. 25. 17:31
[강의 출처] opentutorials.org/course/3086/18319
박스모델 - 생활코딩
CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항
opentutorials.org
Box Model
- tag를 감싸는 Box형 부분들(padding, border, margin, width 등)에 효과를 줌으로써 디자인함
- width: 텍스트의 너비
- display: 글자의 부피 지정, block(그 줄 전체), inline(텍스트만큼의 부피), none(사라짐), grid, ...
웹페이지에서 마우스 오른쪽 inspect를 통해 확인 가능 Grid
- 가로/세로 2차원 레이아웃을 나누기 위해 사용
- <style>의 해당 태그에서 display: (inline-)grid 로 정의하여 사용 가능
- div(block), span(inline) 태그를 이용해 Grid에 담길 부분 지정
- 나눌 비율 또는 크기는 아래 값으로 조정 가능
- fr(fraction: 비율, 2fr 1fr이라면 전체 3을 2:1로 나누어 가짐)
- auto-fill, auto-fit(행/열 크기에 맞게 자동 조정)
- min-content, max-content(최소, 최대 크기 지정)
caniuse.com에서 'grid'를 검색한 결과 Grid 사용이 가능한지 호환성 확인 Tip
caniuse.com에서 해당 기술명(grid) 검색
(웹언어 css, html, js 등의 사용통계 제공하는 사이트)
초록색인 부분: 지원, 사용가능
옅은초록 부분: 부분적으로 지원
빨간색인 부분: 미지원, 사용불가
브라우저 버전별로 지원 여부를 확인할 수 있음
Grid 레이아웃 작성 예시
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #grid { /* 아래에서 grid id를 준 div 구역의 레이아웃을 */ display:grid; /* 그리드 컨테이너로 지정하고 */ grid-template-columns:1fr 2fr; /* 해당 그리드 내부를 가로로 1:2로 나누고 */ border:gray 1px solid; /* 박스 테두리를 회색 1px 직선 추가 */ } #grid h1 { /* h1태그 중 #grid의 자식 태그인 경우 */ font-size:45px; /* 글꼴 크기를 45px로 변경하고 */ text-align:center; /* 가운데 정렬 */ } #grid .left { /* left클래스 중 #grid 태그의 자식 태그인 경우 */ border-right:2px gray solid; /* 해당 박스 오른쪽 테두리에 2px의 회색 직선 추가 */ } #grid .right p { /* p태그 중 #grid .right 태그의 자식 태그인 경우 */ padding-left:20px; /* 왼쪽 padding을 20px로 지정 */ color:blue; /* 글자 색깔을 파란색으로 지정 */ } </style> </head> <body> <div id="grid"> <!-- 레이아웃 지정이 필요한 부분을 div 태그로 묶고 id 부여 --> <div class="left"> <!-- #grid의 자식 부분. 여기도 div 태그로 묶고 class 부여 --> <h1>Head1</h1> <ol> <li>ol1</li> <li>ol2</li> <li>ol3</li> </ol> </div> <div class="right"> <!-- #grid의 자식 class --> <p> <!-- #grid와 .right의 자식 element --> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p> <!-- 위 <style>에서 #grid .right p 선택자의 적용을 받음 --> </div> </div> <p> <!-- 여기는 부모 없는 일반 element --> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p> <!-- 부모가 없기 때문에 #grid .right p 선택자의 영향을 받지 않음 --> </body> </html>위 코드의 결과는 아래 그림과 같음
Grid를 이용한 레이아웃 작성 예시 '생활코딩 > WEBn' 카테고리의 다른 글
[HTTP] 개요 (0) 2020.08.27 [CSS] 반응형 디자인(Responsive Design), Media Query (0) 2020.08.26 [CSS] Selector: class, id (0) 2020.08.24 [CSS] 정의, Selector, Declaration, Property, Value (0) 2020.08.24 [Internet] Mac 내장 Apache로 웹서버 운영하기 (4) 2020.08.21