[개미의 걸음 HTML&CSS 21차시] 반응형 웹② grid system (with bootstrap)

HTML

IT개미 데이터 2020. 8. 21. 23:23

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들의 너비도 함께 변화

<head>태그 안에 bootstrap을 활용하기 위한 태그들을 집어넣으면 좀 더 쉽게 grid system 사용 가능

bootstrap source

728x90