[1주차] 💻🏃‍♂️ - 박스모델

 

⭐️오늘 배우면서 헷갈렸던 margin,padding,border-box 계산법 다시한번 상기시키기 ⭐️

---

 

 

✍️  줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로 붙는 박스로 구분할 수 있습니다. 줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부릅니다. 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있습니다.

 

HTML에서 줄 바꿈이 되는 요소는 무엇인가요? 줄 바꿈이 적용되지 않은 요소는 무엇인가요?

• 줄 바꿈이 되는 요소: <h1>, <p>
• 줄 바꿈이 되지 않는 요소: <span>

<h1>, <p> 등의 요소는 block 박스이며, <span> 요소는 inline 박스임을 알 수 있습니다.

 

 

✍️  박스를 구성하는 요소

 

CSS 박스 모델은 다음 그림만 기억하면 됩니다.

                                [그림] border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있습니다.

 

 

⭐️ margin (바깥 여백)

각각의 값은 top, right, bottom, left로 시계방향입니다.

 

⭐️  padding (안쪽 여백)

padding은 border를 기준으로 박스 내부의 여백을 지정합니다. 값의 순서에 따른 방향은 margin과 동일하게

top, right, bottom, left입니다.

 

⭐️  border-box

 

이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다

* content-box는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는

박스 크기 계산법인 border-box를 권장합니다.