CSS 높이/너비 및 상자 모델

소개

요소의 높이와 너비를 설정하려면 height 및 width CSS 속성이 필요합니다. 요소의 패딩, 테두리 및 여백 내부 영역에 초점을 맞춥니다.

상자는 모든 HTML 요소에 대한 일반적인 용어입니다. CSS로 디자인과 레이아웃을 논의할 때 "상자 모델"이라는 문구가 사용됩니다. 모든 HTML 요소는 기본적으로 CSS 상자 모델 덕분에 상자 안에 들어 있습니다. 콘텐츠 자체와 여백, 테두리 및 패딩으로 구성됩니다.

그들의 가치

높이 및 너비 속성에 대해 배울 때 함께 제공되는 값을 이해하는 것이 중요합니다.

📌inherit 값은 높이와 너비가 부모 값에서 상속될 때 사용됩니다.

📌auto 값은 아무것도 선택하지 않았을 때 주어지는 기본값입니다. 브라우저는 높이와 너비를 자동으로 계산합니다.

📌initial 값은 높이와 너비를 기본값으로 설정합니다.

📌% 값은 컨테이닝 블록의 높이와 너비를 백분율로 정의합니다.

📌length 값은 높이와 너비를 px(픽셀), cm(센티미터) 등으로 정의합니다.

한 가지 유의해야 할 점은 높이 및 너비 속성이 패딩 외부 영역의 높이/너비를 설정하지 않는다는 것입니다. 패딩 내부 영역에만 설정합니다. 이것은 아래와 같습니다.



MAX-WIDTH 속성

📌요소의 최대 너비를 설정하는데 사용됩니다. 이 속성은 브라우저 창이 요소의 너비보다 작을 때 유용합니다. 브라우저의 작은 창 처리를 개선하는 데 도움이 됩니다. max-width 및 width 속성이 있는 경우 max-width가 width를 재정의합니다.

박스 모델

상자 모델은 아래 그림에서 볼 수 있습니다.


(출처:W3schools)

📌 여백: 국경 너머의 영토를 클리어합니다. 여백은 투명합니다.

📌The border: 패딩과 콘텐츠를 둘러싸는 테두리.

📌패딩: 콘텐츠 주변 영역을 지웁니다. 또한 투명합니다.

📌내용: 웹페이지에서 이미지와 텍스트가 나타나는 곳.

요소의 너비 계산

요소의 높이와 너비가 CSS로 설정되면 패딩, 테두리 및 여백을 합산하여 요소의 전체 크기를 올바르게 계산해야 합니다. 이것은 아래에 설명되어 있습니다.
<p> 요소는 올바르게 계산된 경우 총 350px가 됩니다.

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

오늘 박스 모델에 대해 배울 때 내 정확한 생각이었던 '아니, 이것의 총 너비는 335픽셀이어야 합니다. 그러나 CSS는 그렇지 않다고 말합니다. 위 코드의 전체 너비를 적절하게 계산하면 다음과 같습니다.

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

요소의 총 너비는 다음과 같이 적절하게 계산됩니다.

총 요소 너비 = 너비 + 왼쪽 패딩 + 오른쪽 패딩 + 왼쪽 테두리 + 오른쪽 테두리 + 왼쪽 여백 + 오른쪽 여백

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

총 요소 높이 = 높이 + 상단 패딩 + 하단 패딩 + 상단 테두리 + 하단 테두리 + 상단 여백 + 하단 여백

NB: 너비는 왼쪽과 오른쪽이고 높이는 위쪽과 아래쪽입니다. 혼란스러워하는 경우.

결론

상자 모델과 그에 수반되는 모든 것에 대해 배우는 것은 CSS를 잘하는 데 있어 매우 중요한 단계입니다. 위에 나열한 것은 케이크의 장식일 뿐입니다. 패딩, 테두리 및 여백에 대해 많이 알아봤습니다(이것은 제가 배운 내용의 요약일 뿐이므로 포함하지 않았습니다). 읽어 주셔서 감사합니다!