* 그리드(Grid) 시스템이란?
; 콘텐츠를 쉽게 배치할 수 있도록 한 줄을 12개의 동일한 열로 나누어, 반응형 웹을 쉽게 구현할 수 있게 해준다.
즉, 레이아웃을 쉽게 구성할 수 있음.
<반응형 클래스명>
lg 크기 1200px 이상 ; PC, 태블릿
md 992~ 1200px ; 태블릿
sm 768~992px ; 태블릿
xs 768 미만 ; 스마트 폰
* 예시
해석
; width가 1200px 이상의 환경(PC나 태블릿)에서는 한줄에 6칸씩 차지하고(한 행에 2열)
, 모바일 환경에서는 12칸씩 차지해라(한 행에 1열)
적용 후
1. PC환경
2. 모바일 환경
* 기타 그리드 관련 클래스 명
offset
; 지정된 블록만 간격을 두고 배치하기 위한 것 (col-종류-offset-숫자 형태로 사용)
ex) col-md-offset-1 col-md-3
해석; md사이즈의 1블록 사이를 비우고 3블록 영역의 콘텐츠를 배치
visible
; 지정된 디바이스의 크기인 경우만 콘텐츠를 표시 (visible-종류-block) 과 같은 형태로 사용
ex) visible-md-block
해석; md로 설정된 폭(992 ~ 1200px) 경우에만 해당 컨텐츠를 표시 (그 이외의 경우에는 표시 x)
'Front-end > HTML, CSS,javascript,jquery' 카테고리의 다른 글
| 호이스팅이란? (var와 let의 차이) (0) | 2022.12.26 |
|---|