css3 박스 모델의 통찰(css3 box model insight)

 이전까지 태그는 box element 이거나 inline element임을 공부하였다. 

 

 두 종류의 css 속성 값에 대한 정리를 하면 다음과 같다.

block element: width, height, padding, margin, border를 가질 수 있다.

inline element: width, height을 적어도 적용되지 않음. padding, margin은 적어도 좌우만 적용됨. border는 가질 수 있음.

 

 실제로 inline element에다가 5가지 속성 값을 변경해가면서 적용해보고 인접 박스와 어떻게 배치가 되는지 보면 쉽게 이해할 수 있다.

 

 a태그와 같은 경우 클릭을 할 수 있는 공간을 크게 하기 위해 상하 패딩이나, 마진을 주고 싶은 경우가 생긴다. 이 때는 inline-block으로 변경하여 사용하면 해결된다. inline-block으로 변경하면 block의 속성을 그대로 가지면서 배치되는 순서만 가로로 된다.  

 

 상황에 따라서 (width, height)를 조정하고 싶거나 (상하 padding/margin)을 변경하고 싶으면 각 element의 특징에 따라 결정하면 된다. 박스 모델을 이해하는 순간 프론트엔드가 구조적으로 보이기 시작한다.