[CSS] The Box Model

안녕하세요 동기 여러분! 오늘은 CSS의 박스 모델이 어떻게 구성이 되어 있는지 알아보도록 합시다.

 

The Box Model

박스 모델은 margin, border, padding, content height, content width의 프로퍼티로 이루어져 있는데 이들 값으로 요소가 웹 페이지에서 공간을 어떻게 차지할지 조절할 수 있습니다.

 

---

 

생김새

• width 와 height : content의 높이와 폭을 나타냅니다.
• padding : border와 content 공간 사이의 공간을 나타냅니다. ( 영어 사전에서의 padding : 충전재 ) 
• border : content의 공간과 padding의 공간을 감싸는 (두께가 있는)경계 또는 스타일. ( 영어 사전에서의 border : 경계, 가두리 )
• margin : 경계(border)와 요소의 바깥 쪽 모서리(가장 자리)의 공간을 나타냅니다.

 

---

 

오늘의 느낌

오늘 안쓰는 보드게임을 아는 커뮤니티에 나눔을 했는데 받으러 오신 분이 맥주와 초콜릿을 가져다주었다. 초콜릿이 상당히 맛이 좋았다. 감사합니닿ㅎㅎ