[CSS] 박스 모델(Box Model)

         박스 모델, Box Model

         - 모든 태그(HTML 요소)는 사각형(box)으로 랜더링(출력) 된다.
         - 태그가 화면에 출력될 때 공통된 성질에 관련된 정책(모델)

         - 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분

 

박스 모델

         - 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용

         - 패딩(padding) : 내용과 테두리 사이의 간격입니다. (눈에 보이지 않는다)

         - 테두리(border) : 내용와 패딩 주변을 감싸는 테두리

         - 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. (눈에 보이지 않는다)

 

<style>
    div {
        background-color: salmon;
        padding: 50px;
        border: 20px solid maroon;
        margin: 50px;
    }
</style>

 

 

         박스모델의 요소

         - border
         - width, height
         - padding, margin (여백)

 

 

•           border(테두리)
              - 모든 태그는 자신의 영역을 가지며, 영역을 기준으로 테두리를 가진다.
              - 영역은 반드시 사각형
              - 일부 요소는 추가 작업없이 테두리를 시각적으로 표현 (폼 컨트롤)

 

•          padding
           - 테두리 안쪽 여백
           - 태그의 테두리와 콘텐츠 영역 사이의 거리

 

•          margin
           - 테두리 바깥쪽 여백
           - 태그의 테두리와 외부 태그 사이의 거리
           - 객체와 객체 사이의 거리
           - 요소 배치용으로 사용

•         height와 width
           - 내용 부분만을 대상으로 함
           - 패딩, 테두리, 마진은 포함되지 않음