[CSS] CSS Box Model(1) | Width(가로) & Height(세로)

CSS Box Model

Box Model이란 뭘까? Box Model은 요소가 웹 페이지에 표시된 방식 그리고 크기를 조정하는 방법이다. box model에서는 웹 페이지의 모든 요소로 된 직사각형 상자를 볼 수 있다. 각 상자에는 콘텐츠가 있다. 경계, 그 안팎의 공간 그래서 모든 조각을 정의하면 상자 하나에 한개의 box model이 있는거다. 

사진의 중앙에 핵심 콘텐츠가 있다. 박스 중앙에는 단락의 첵스트와 같은 실질적인 정보가 위치한다.

그 주변에는 패딩이 있다. 테두리가 둘러져 있고 박스 사이에는 여백이 있다.

콘텐츠 레이아웃에 매우 중요한 특성이고 콘텐츠의 크기나 모양, 테두리 간격을 바꿀때 필요하다.

 

Width(가로) & Height(세로)

콘텐츠 박스에 관여하는 가로와 세로부터 설명 시작!

가로와 세로는 간단하다. 요소의 가로와 세로 값을 정하는 특성이 있다. 

➡️ Width(가로)는 콘텐츠의 가로 값을 정하는 특성이다.

(박스 사이징?은 나중에 더 자세히

Box-sizing(박스 사이징)은 border-box로 설정된다. 그 설정은 테두리를 크기 기준으로 삼는다.)

박스 모델에서는 가로와 세로로 콘텐츠가 들어가는 영역의 크기를 조정한다.

사진에 보이는 파란 영역이  콘텐츠 박스이다. 가로 값은 965.5px이다. 페이지를 차지하는 가로를 말한다. 

CSS의 <div> 태그에 가로 값을 200px로 하면 가로의 폭이 좁아진다.

div {
    width: 200px;
}

width값을 200px입력함으로 콘텐츠가 200px 만큼의 공간을 차지하게 되었다. 

height(세로)의 원리 또한 width(가로)와 같다. 

height의 값을 100px로 입력했더니 공간이 좁아 글자가 겹쳐졌다. 그러면 height의 값을 300px로 입력해보겠다.

div {
    width: 200px;
    height: 300px;
}

height를 300px로 입력했더니 겹치지 않았다. 텍스트가 없는 공간은 빈공간이 생겼다.

 

이번에는 배경색을 추가해보겠다.

div {
    width: 200px;
    height: 300px;
    background-color: #ede0d4;
}

background-color은 보이는 영역에만 추가되었다.

 

hello란 문구를 추가해 배경색을 설정하겠다. 

div {
    width: 200px;
    height: 300px;
    background-color: #ede0d4;
}
h1 {
    background-color: #9c6644;
}

<h1> 태그에 Hello!를 입력해 색상을 추가했더니 가로 영역 전체가 갈색 컬러로 바뀌었다.

<h1> 태그에 들어간 텍스트 자체는 큰 공간을 차지하지 않지만 요소의 가로 영역은 넓다. 

+ 

가로 값은 200px으로 바꿨다.