반응형
- 부트스트랩
웹 페이지를 빠르고 안정적이게 구축할 수 있게 해주는 도구
부트스트랩은 기본적으로 반응형 웹을 지원해줌
> 반응형 웹
UI가 해상도에 따라 변형되는 것
많이 쓰는 UI 패턴들을 전부 컴포넌트화해서 제공함
> 12 그리드 시스템
하나의 행을 12개의 컬럼으로 나누는 개념
아래 코드에서 class 태그 내 'md-4'로 표현된 부분이 총 12개 중 4개의 컬럼이라는 뜻
'md'는 medium의 약자로 중간 사이즈를 의미함
<div>는 원래 속성이 하나의 row를 모두 차지하는 것이고, 화면 해상도를 줄여 'md-4'사이즈 보다 작아지면 각 컬럼은 row로 분리됨.
'md'대신 'sm(small size)', 'lg(large size)'등의 그리드 옵션 등 사용 가능
<div class="row">
<div class="col-md-4" style="background-color: red;">
A
</div>
<div class="col-md-4" style="background-color: yellow;">
B
</div>
<div class="col-md-4" style="background-color: blue;">
c
</div>
</div>
반응형
댓글