[css_반응형] box-sizing

반응형 웹

모든 종류의 기기마다 최적화된 레이아웃을 제공한다

HTML & CSS 만으로 구현된다

 

제작 단계

1. viewport 설정

2. grid 설정

3. box-sizing 설정

 

 

box-sizing

박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성이다

 

content-box: 콘텐츠 영역을 기준으로 크기를 정한다

border-box: 테두리를 기준으로 크기를 정한다

initial: 기본값으로 설정

inherit: 부모 요소의 속성값을 상속 받는다

 

 

* 반응형 웹으로 만들 때 꼭 사용해야 한다

box-sizing: border-box; 를 지정하지 않으면 컨테이너의 크기를 초과하여 box2가 box1 아래로 간다