9. CSS 박스 모델

 

CSS 박스 모델은 네 부분으로 나뉘며, 개발자 도구(F12)에서 확인 가능하다.

• content: 요소의 내용 부분
• padding: 내용과 테두리 사이의 간격
• border: 요소의 테두리 부분
• margin: 요소의 외부 여백

 

 

박스 모델 크기 (box-sizing)

• content-box: 기본값. 콘텐츠 영역만 너비 값으로 지정
• border-box: 테두리 영역까지 너비 값으로 지정

- 활용 코드

.element {
    box-sizing: border-box; /* 요소의 전체 크기를 콘텐츠, 안쪽 여백, 테두리까지 포함하여 계산 */
    width: 200px; /* 요소의 전체 너비를 고려하여 설정 */
    padding: 10px; /* 안쪽 여백 설정 */
    border: 1px solid black; /* 테두리 설정 */
}

 

 

content 크기

• 너비는 width, 높이는 height 속성 사용
• 속성값: 크기(px, em), 백분율(%), auto(기본값)

 

padding 크기

    <!-- padding-top: 10px -->
    <!-- padding-right: 10px -->
    <!-- padding-bottom: 10px -->
    <!-- padding-left: 10px -->
    <!-- padding: 10px; 한가지 값만 기록하면 4면 모두 동일한 값을 의미 -->
    <!-- padding: 10px 5px 8px 7px; 순서는 top, right, bottom, left -->
    <!-- padding: 10px 5px; 두개의 값만 기록하면 첫번째 값인 10px는 top, bottom, 두번째 값인 5px는 right, left -->
    <!-- padding: 10px 5px 8px; 세가지 값을 기록하면 첫번째 값인 10px는 top, 두번째 값인 5px는 right, left, 세번째 값인 8px는 bottom -->
    <!-- border, margin도 동일한 원리 -->

 

 

border (border-style)

      div {
        border-width: 3px;
        border-color: red;
        width: 70px;
        height: 70px;
        margin: 10px;
      }

      .dashed {
        border-style: dashed;
      }

      .dotted {
        border-style: dotted;
      }

      .solid {
        border-style: solid;
      }

      .double {
        border-style: double;
      }

      .groove {
        border-style: groove;
      }

      .ridge {
        border-style: ridge;
      }

      .inset {
        border-style: inset;
      }

      .outset {
        border-style: outset;
      }

      /* 두께 */
      .thin {
        border-width: thin;
      }

      .medium {
        border-width: medium;
      }

      .thick {
        border-width: thick;
      }

      /* 둥근 테두리 */
      .radius {
        border-radius: 30px;
      }
      
      .radius2 {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
      }

 

 

margin

• margin을 사용하여 요소 주변의 여백을 조절할 수 있다.
• 값이 여러 개일 경우, top -> right -> bottom -> left 순서로 적용된다.
• 웹 문서 가운데 정렬: 너빗값은 정해져 있어야 하며, left와 right 값을 auto 로 지정  ex) margin: 20px auto;