19. boxmodel

이번 포스팅에서는 boxmodel에 대하여 알아보겠는데요.

HTML의 모든 요소는 기본적으로 4가지의 박스 형태로 구성되어 있으며, 각 영역마다 다르게 스타일링이 가능합니다.

boxmodel의 각 영역에 대한 특성을 바르게 알고 사용하는 것이 중요하고 기본이 되는 내용 중 하나이니 확실하게 짚고 넘어가는 게 좋을 것 같습니다.

 

1. content

content 영역은 말 그대로 요소의 실제 콘텐츠를 포함하는 영역입니다.

별도로 content 영역의 너비나 높이를 지정하지 않는다면 콘텐츠의 내용에 따라 너비와 높이가 정해집니다.

이러한 content 영역은 boxmodel에서 가장 안쪽에 위치해 있으며, 사람으로 비유하자면 "뼈"에 해당된다고 생각해 주시면 됩니다.

2. padding

padding 영역은 content 영역을 감싸고 있는 여백입니다.

content 영역에 배경이나 색상 등 스타일이 적용되어 있을 때 padding 영역까지 영향을 줄 수 있는데요.

그렇기 때문에 padding 영역은 content 영역의 연장선으로 생각하시면 됩니다.

앞서 말씀드렸다시피 content 영역을 "뼈"라고 생각하면, padding 영역은 뼈 위에 있는 "살"이라고 생각하시면 편리합니다.

3. border

border 영역은 padding 영역을 감싸고 있는 테두리 선입니다.

padding 영역이 없는 경우에는 content 영역을 감싸게 되는데요.

border 영역은 padding 영역의 "살"을 덮고 있는 "피부"라고 생각하시면 편리합니다.

4. margin

margin 영역은 border 영역의 바깥쪽 영역의 여백입니다.

margin 영역을 통하여 다른 요소와의 여백이나 간격을 만들어줄 수 있습니다.

border 영역인 "피부"의 바깥쪽 영역이라면, 사람을 감싸고 있는 "공기" 이라고 생각하시면 될 것 같습니다.

공기 중을 통하여 사람과 사람이 떨어져 있다고 생각하시면 좋을 것 같네요.

 

 

웹 브라우저에서 개발자 도구를 열면 Elements 탭> Style 탭 가장 하단에서 boxmodel을 확인할 수 있으니, 작업 중에 계속해서 확인해 보시는 것을 권해드립니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)