동영상 강좌보기

CSS상자모델

모든 html요소는 상자로 간주할 수 있습니다. CSS에서는 디자인과 레이아웃에 대해 '상자모델'이라는 용어를 사용합니다.

CSS상자모델은 본질적으로 모든 HTML요소를 감싸는 상자입니다. 

바깥쪽여백(margin), 테두리(border), 안쪽여백(padding) 및 실제 내용(content)으로 구성됩니다.

아래는 상자모델을 보여줍니다.

다른 부분에 대한 설명:

• 내용(content) - 텍스트 및 이미지가 나타나는 상자 내용
  
• 안쪽여백(padding) - 내용 주위에 여백을 만듭니다. padding은 투명합니다.
  
• 테두리(border) - padding 및 내용 주위를 둘러 싼 테두리(경계)
  
• 바깥여백(margin) - 테두리 바깥 여백을 만듭니다. margin은 투명합니다.
  

상자모델을 사용하면 요소 주위에 테두리를 추가하고 요소사이에 공백을 정의할 수 있습니다.

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

요소의 너비와 높이

모든 브라우저에서 요소의 너비와 높이를 올바르게 설정하려면 상자모델의 작동방식을 정확하게 알아야 합니다.

** CSS를 사용하여 요소의 너비 및 높이 속성을 설정하면 내용 영역의 너비와 높이를 설정하기기만 하면 됩니다.

요소의 전체 크기를 계산하려면 padding, border, margin을 추가해야 합니다.

총너비가 350px이 되도록 <div>요소 스타일을 지정한다고 가정하겠습니다.

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

계산은 다음과 같습니다.

320px(너비) 
+ 20px(왼쪽 + 오른쪽 여백)
+ 10px(왼쪽 + 오른쪽 테두리)
+ 0px (왼쪽 + 오른쪽 여백)
= 350px

요소의 전체 너비는 다음과 같이 계산되어야 합니다.

총 요소 너비 = width + 왼쪽padding + 오른쪽padding + 왼쪽border + 오른쪽border + 왼쪽margin + 오른쪽margin

요소의 전체 높이는 다음과 같이 계산되어야 합니다.

총 요소 높이 = height + 위padding + 아래padding + 위border + 아래border + 위margin + 아래margin