CSS 속성 - 박스 모델

코딩하는 기린·2022년 8월 8일

HTML&CSS

목록 보기

6/9

박스 모델(Box Model)

HTML 문서는 브라우저의 렌더링 엔진에의해 표준 CSS에 따라 요소를 사각형 상자 형태의 '박스 모델'로 나타냅니다.

<div></div>

div{
    margin: 100px;
    border: 5px solid black;
    padding: 50px;
    width: 100px;
    height: 100px;
}

선언된 CSS에 따라 위와 같은 결과물이있을 때, 박스 모델은 아래와 같이 나타납니다.

content 영역 : 가장 안쪽 박스에 해당하며, 요소의 내용에 해당하는 영역의 크기를 나타냅니다.
padding 영역 : content 영역과 border 영역 사이의 여백에 해당하는 영역으로, content 영역에 배경, 색 등이 있다면 padding 영역에 걸쳐 표시됩니다.
border 영역 : content 영역과 padding 영역을 감싸는 테두리입니다.
margin 영역 : border 영역의 바깥 부분으로, 다른 요소와 구분할때 쓰이는 여백 영역입니다.

border

테두리로써, 스타일을 지정하는 속성은 세가지가 있습니다.

border-width: 두께;
border-style: 종류;
border-color: 색상;

border-width : 테두리의 두께를 지정합니다. 길이 단위를 사용하여 지정하거나, 'thin, medium, thick' 같은 키워드를 사용하여 지정할 수 있습니다.
border-style : 테두리의 종류를 지정합니다. 종류는 'none, hidden, dotted, dashed, solid, double 등'이 있습니다.
border-color : 테두리의 색상을 지정합니다. 여러 색상 표기 형식 중 하나를 선택하여 지정하면됩니다.

축약형

border: 두께 종류 색상;

상하좌우 테두리의 두께, 종류, 색상을 일괄적으로 지정합니다.

border-top|bottom|left|right: 두께, 종류, 색상;

테두리의 상|하|좌|우 하나를 선택하여 두께, 종류, 색상을 한번에 선언합니다.

border-width: 상하좌우_두께;
border-width: 상하_두께 좌우_두께;
border-width: 상_두께 좌우_두께 하_두께;
border-width: 상_두께 우_두께 하_두께 좌_두께;

border-width 속성에 입력하는 속성값의 갯수에 따라 테두리 위치별로 두께를 다르게 지정합니다.

이러한 축약형은 border-color 속성에서도 동일하게 축약하여 사용할 수 있습니다.

padding

padding: 상하좌우_두께;
padding-top: 상_두께;
padding-right: 우_두께;
padding-bottom: 하_두께;
padding-left: 좌_두께;

padding 영역의 상하좌우 또는 특정 부분을 선택하여 지정할 수 있습니다.
px같은 길이 단위를 사용하여 지정할 수 있으며, '%'로 두께를 지정할 때는 부모 요소의 content 영역 가로 너비(width)가 기준이됩니다.

축약형

padding: 상하_두께 좌우_두께;
padding: 상_두께 좌우_두께 하_두께;
padding: 상_두께 우_두께 하_두께 좌_두께;

부분마다 다르게 두께를 적용하고자할 때, 위처럼 간단하게 작성할 수 있습니다.

margin

margin은 속성값에 padding처럼 길이 단위로 구체적 값을 줄 수도있지만, '%'도 사용이 가능한데, %로 두께를 지정할 때는 마찬가지로 기준이 부모 요소의 content 영역 가로 너비(width)가 됩니다. 또한 'auto'라는 브라우저가 자동으로 계산해주는 특수한 속성값도 가집니다.

margin: 상하좌우_두께;
margin-top: 상_두께;
margin-right: 우_두께;
margin-bottom: 하_두께;
margin-left: 좌_두께;

padding과 동일하게 선언하여 사용할 수 있습니다.

margin: auto;

'auto' 속성값은 주로 가로축 가운데 정렬에 사용됩니다. 이 속성값을 사용하면 좌우 여백을 직접 입력하지않아도 브라우저가 자동으로 계산해주며, 보통 margin: 0 auto;의 형태로 쓰입니다.

<div class="parent">
    <div class="child"></div>
</div>

.parent{
    width: 500px;
    height: 500px;
    background-color: skyblue;
}

.child{
    width: 300px;
    height: 300px;
    background-color: lightgreen;
    margin: 0 auto;
}

child class로 선언된 <div>에 좌우 margin 값을 구체적으로 입력하지않았음에도 브라우저가 자동으로 계산하여 좌우 각각 100px의 margin을 적용한 것을 확인할 수 있습니다.

margin collapse

서로 다른 요소에서 margin이 선언되어 서로 맞닿을 때, 맞닿는 margin 영역 각각이 별도로 존재하지않고, 두 요소 중 큰 margin 값을 갖는 요소의 margin을 기준으로 중첩되어 적용됩니다.

<div class="top"></div>
<div class="bottom"></div>

.top{
    background-color: skyblue;
    width: 500px;
    height: 100px;
    margin: 100px;
}

.bottom{
    background-color: lightgreen;
    width: 500px;
    height: 100px;
    margin: 50px;
}

개발자 도구로 확인해보면 위의 요소에 적용된 margin 값인 100px에 더해서 아래 요소에 적용된 margin 값인 50px만큼 더 띄워진 형태가 아닌, 맞닿는 margin 영역은 두 값 중 더 큰 값을 기준으로 중첩되어 적용되는 것을 알 수 있습니다.

또한 margin 값은 '음수(-) 값'도 적용가능합니다.

축약형

margin: 상하_두께 좌우_두께;
margin: 상_두께 좌우_두께 하_두께;
margin: 상_두께 우_두께 하_두께 좌_두께;

부분마다 다르게 두께를 적용하고자할 때, 위처럼 간단하게 작성할 수 있습니다.

width

width: 너비값;

content 영역의 '너비'를 지정하는 속성으로, 따로 작성하지않으면 기본값은 'auto'입니다. 여기서 auto는 부모 요소와 같은 값을 갖습니다.
길이 단위를 속성값으로 사용할 수 있으며, '%'를 속성값으로 사용시, 부모 요소의 content 영역 너비를 기준으로 적용됩니다.

height

height: 높이값;

content 영역의 '높이'를 지정하는 속성으로, 따로 작성하지않으면 기본값은 'auto'입니다. 여기서 auto는 부모 요소와 같은 값을 갖습니다.
길이 단위를 속성값으로 사용할 수 있으며, '%'를 속성값으로 사용시, 부모 요소의 content 영역 높이를 기준으로 적용됩니다.

width & height

<div class="parent">
    <div class="child"></div>
</div>

.parent{
    background-color: skyblue;
    width: 500px;
    height: 100px;
}

.child{
    background-color: lightgreen;
    width: 50%;
    height: 200%;
}