HTML5 CSS3 홈페이지 스타일링 1 - 박스모델 Box-model

홈페이지를 디자인하다보면 사진과 버튼, 박스 등에 둥근 모서리를 많이 사용하게 됩니다. border-radius 속성으로 어떻게 스타일링 하는지 간단한 코드로 알아봅시다.

또 패딩과 마진을 사용하다보면 내가 원한 가로 세로값과 달라지는 경우가 있는데요. box-sizing 속성으로 어떻게 해결해야할지 간단한 코드로 알아봅시다.

radius 둥근 모서리

border-radius 속성은 사각형 모서리를 둥글게 만들어주는 속성입니다.

border-radius :10px; // 모든 모서리

border-radius :10px 20px; // 왼쪽상단+오른쪽하단 오른쪽상단+왼쪽하단

border-radius: 10px 20px 30px 40px; // 왼쪽상단 오른쪽상단 오른쪽하단 왼쪽하단

 

box-sizing

box-sizing 속성은 box의 너비값과 높이값에 여백과 선굵기를 포함할지 안포함시킬 것인지를 설정해주는 속성입니다.

- content-box

- border-box

box-sizing:content-box; // 기본값으로 박스 사이즈값에 패딩값과 보더값이 더해져 보여집니다. 

 

content-box가 적용되면 width:100px 면서 padding:20px; border:5px가 설정된 박스에서는

실제 보여지는 width가 5+20+100+20+5=150픽셀로 보입니다.

box-sizing:border-box; // 박스 사이즈값은 패딩값과 보더값에 영향을 받지 않고 설정한 사이즈로 보여집니다.

 

border-box가 적용되면 width:100px 면서 padding:20px; border:5px가 설정된 박스에서는 위와 다르게 그대로 width가 100픽셀로 보이게 됩니다.

 

실제로 홈페이지를 제작하다보면 box-sizing:border-box; 를 많이 사용하게 됩니다. 기본값인 content-box를 그대로 사용하다보면 계산을 해야하거나 레이아웃이 틀어지거나 스크롤바가 생기는 등 원하지 않는 모습으로 보일 수 있는 경우가 발생하기 때문입니다.