고정 헤더 영역
상세 컨텐츠
본문
728x90
grid system[그리드 시스템]
웹 사이트 전체의 디자인을 체계적으로 하기 위해 사용하는 시스템
- column을 나누어 요소들을 배치하여 필요할 때마다 칼럼들을 묶어서 배치
- 그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열 가능
- 960[px] 그리드, 1200[px] 그리드, 12칼럼 그리드, 16칼럼 그리드, 24칼럼 그리드, 백분율 그리드 등의 시스템이 있음
※ 일반적으로 12칼럼을 많이 사용
| 고정 그리드 시스템 | 브라우저 너비 값이 바뀌어도 웹 요소의 너비 값이 변경되지 않는 시스템 |
| 960[px] 그리드, 1200[px] 그리드, 12칼럼 그리드, 16칼럼 그리드, 24칼럼 그리드 | |
| 가변 그리드 시스템 | 브라우저 너비 값이 바뀔 때마다 웹 요소의 너비 값이 함께 변경되는 시스템 가변 그리드에서는 글자 크기를 절대단위인 px이 아니라 상대단위[em, rem]를 사용해야됨 2020/08/01 - [HTML] - [개미의 걸음 HTML&CSS 1차시] HTML와 CSS의 이해 |
| 백분율 그리드 |
| grid 관련 속성 | 설 명 |
| grid-template-columns | grid system을 통해 수평 정렬하여 나눈 item들의 너비를 설정하는 속성 속성값의 단위로 픽셀 , fr 등을 사용 가능 같은 숫자가 반복될 때는 repeat함수를 사용하면 간단하게 표현 가능  |
| grid-template-rows | grid item들의 높이를 설정하는 속성 |
| gap | grid item들 사이에 여백을 설정하는 속성 |
# fr
더보기
fraction(비율)을 줄여서 표현한 것으로 비율에 따라 너비를 설정하는 단위
즉, 화면의 너비에 따라 grid item들의 너비도 함께 변화
bootstrap을 활용한 grid system
<head>태그 안에 bootstrap을 활용하기 위한 태그들을 집어넣으면 좀 더 쉽게 grid system 사용 가능
- bootstrap을 활용하면 창의 크기에 따라 세로로 배치도 가능!
| class 속성 값 | 설 명 |
| col-sm-숫자 | 768px이하에서 세로로 나타나도록 설정 |
| col-md-숫자 | 992px이하에서 세로로 나타나도록 설정 |
| col-lg-숫자 | 1200px이하에서 세로로 나타나도록 설정 |
| col-xs-숫자 | 항상 가로로 나타나도록 설정 |
728x90
'HTML' 카테고리의 다른 글
| [개미의 걸음 HTML&CSS 23차시] 반응형 웹 ④ flex box (0) | 2020.08.23 |
|---|---|
| [개미의 걸음 HTML&CSS 22차시] 반응형 웹 ③ Media Queries (0) | 2020.08.22 |
| [개미의 걸음 HTML&CSS 20차시] 반응형 웹① viewport, fluid image, fluid video (0) | 2020.08.20 |
| [개미의 걸음 HTML&CSS 19차시] CSS를 이용한 애니메이션 (0) | 2020.08.19 |
| [개미의 걸음 HTML&CSS 18차시] CSS 레이아웃(배치 및 다단 설정) (0) | 2020.08.18 |
댓글 영역