Box Model

📍 Box Model

모든 HTML 요소는 웹 페이지에서 일정 공간을 차지하게 된다.
이러한 공간을 CSS 에서 Box Model 로 정의하고 있다.

• Content : 텍스트나 이미지가 들어있는 HTML 요소의 실질적인 내용
• Padding : Content 와 Border 사이의 영역으로 쉽게 말해 안쪽 여백이다.
• Border : Content 를 감싸는 테두리이다.
• Margin : 테두리와 이웃하는 요소 사의 간격으로 쉽게 말해 바깥쪽 여백이다.

📍 Box Model CSS 속성

📌 Content

• width : 가로 너비를 지정할 수 있다.
• height : 세로 너비를 지정할 수 있다.

👾 Inline Level Element 에서는 width,height 가 적용되지 않는다.
- 콘텐츠 만큼의 영역을 갖기 때문. (display: inline)
- 변경하고 싶을 땐 display: inline-block
- display: inline-block : block 와 inline 의 중간형태로 요소는 inline인데 내부는 block 처럼 표시함

📌 안쪽 여백 Padding

• HTML 요소의 안쪽여백을 지정한다.
• padding-top,padding-bottom,padding-left,padding-right 속성을 각각 지정할 수도 있고, padding : (시계방향) 으로 지정할 수도 있다.

📌 바깥 여백 Margin

• HTML 요소의 바깥여백을 지정한다.
• margin-top,margin-bottom,margin-left,margin-right속성을 각각 지정할 수 도 있고, margin : (시계방향) 으로 지정할 수 도 있다.
  🧷 마진중첩
  HTML 요소를 세로로 배치할 경우 margin 과 margin 이 만날 때 margin 값이 큰 쪽으로 겹쳐지는 것. 요소를 가로로 배치할 경우는 상관없다.

📍 테두리 border

• border-style
  - 어떤 형태의 테두리 스타일을 지정할지 나타냄.
  • 4개 방향의 값을 한꺼번에 지정할 때의 방향순서 : 시계방향

🧷 코드 예시

	border-style: dotted;
    border-style: dotted dashed solid dashed;
    border-left-style: solid;

• border-width
  - 테두리 두께를 지정한다.
  • 값으로 크기 또는 키워드 this medium thick 가 올 수 있다.
• border
  - 단축 속성으로서 다음의 하위 속성을 포함한다.
  • border-width , border-style , border-color
    -> 즉, 테두리 두께, 스타일, 색상을 한꺼번에 표기할 수 있다.
  • border-top , border-right , border-left , border-bottom 을 사용하여 스타일을 각각 지정할 수 있다.

🧷 코드 예시

border: 1px solid yellow;

• border-radius
  테두리 꼭짓점을 둥글게 만든다.

코드 예시

border-radius: 30px;
border-radius: 50%; /* 원으로 표현가능 */

📍 Box Sizing

HTML 요소의 너비와 높이를 계산하는 방법을 지정한다.
원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야할 때, box-sizing 속성을 사용해 이 방식을 변경할 수 있다.

• content-box : 기본 CSS 박스 크기 결정법이다.
  - 요소의 너비를 100px로 설정하면 콘텐츠 영역이 100px 너비를 가지고, 테두리와 안쪽 여백은 이에 더해진다.
  

🧷 코드 예시

.content-box {
        width: 100px;
        height: 100px;
        border: 10px solid blue;
        padding: 20px;
        margin: 10px;
        box-sizing: content-box;
      }

🧷 출력 결과

-> 이 박스는 width,height 값 100px 에 padding, border 이 더해진 130px 크기를 가진다.

• border-box : 테두리와 안쪽 여백도 요소의 크기(width,height)로 고려한다.
  - 너비를 100px로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100px을 유지한다. 대부분의 경우 이 편이 크기를 조절할 때 쉽다.
  

🧷 코드 예시

.border-box {
        width: 100px;
        height: 100px;
        border: 10px solid red;
        padding: 20px;
        margin: 10px;
        box-sizing: border-box;
      }

🧷 출력 결과

-> 이 박스는 width,height 값이 padding,border을 합친 100px 을 갖게 된다.