CSS 박스모델

 

 

 

박스모델

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

The box model - Learn web development | MDN

 

박스 모델

 

   1. content: 콘텐츠가 표시되는 영역

   2. padding : 콘텐츠와 테두리(border)사이의 공백

   3. border : 테두리

   4. margin : 가장 바깥쪽 레이어로, 해당 박스와 다른 요소 사이의 공백 역할을 한다. 

 

 

 

width & height

   - content의 너비와 높이를 설정하는 요소입니다.

   - 초기값은 auto (자동) 입니다.

   width

      > 블록 요소에서는 자신이 차지할 수 있는 값 전부를,

         인라인 요소에서는 내부 요소 크기만큼을 기본값으로 갖고있습니다

   height

      > 블록요소와 인라인 요소 둘 다 내부 요소 크기만큼을 기본값으로 갖고 있습니다.

      > 블록 요소에서만 원하는 값을 지정해 줄 수 있습니다.  

    width: 50px;
    height: 50px;
    
    margin: 10px;

    border: 10px solid red;

지정된 길이

   - width와 height는 content를 설정합니다.

   - border값과 padding값, margin값은 width와 height와는 별개로 작동됩니다.

 

/* 최소 길이 300px, 최대 길이 500px로 제한*/

max-width: 500px;
min-width: 300px;

max-height: 500px;
min-height: 300px;

   - auto로 설정되어있을때, 웹 사이트 창의 길이가 바뀌면 내부 박스 컨테이너의 길이 또한 변경됩니다.

   - max-width와 max-height를 이용하여 최대길이를 제한할 수 있습니다.

   - min-width와 min-height를 이용하여 최소길이를 제한할 수 있습니다.

 

 

box-sizing

   - 요소의 너비와 높이를 계산하는 방법을 지정합니다.

    width: 50px;
    height: 50px;
    
    margin: 10px;

    border: 10px solid red;

content-box와 border-box의 차이

   content-box

      - CSS 표준이 정의한 초기 기본값으로, 속성이 콘텐츠 영역만 포함하고 안팎여백과 테두리는 포함하지 않습니다.

 

   border-box

      - width와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다.

      - width와 height가 border+padding+content 영역의 길이로 바뀝니다.