CSS 너비(width)와 높이(height) 속성 완벽 가이드

CSS에서 height(높이)와 width(너비) 속성은 요소의 콘텐츠 영역에만 적용됩니다. 즉, 이 속성들로 지정한 크기에는 마진(margin), 패딩(padding), 테두리(border)가 포함되지 않습니다.

참고로, 패딩과 테두리까지 포함한 전체 크기를 기준으로 계산하고 싶다면 box-sizing: border-box; 속성을 함께 사용하면 됩니다.

기본 문법

CSS height 속성의 기본 문법은 다음과 같습니다.

Selector {
    height: /*값*/
}

CSS width 속성의 기본 문법은 다음과 같습니다.

Selector {
    width: /*값*/
}

속성 값으로는 auto, px, %, em 등 다양한 단위를 사용할 수 있습니다. 그럼 width와 height 속성을 실제로 활용한 예제를 살펴보겠습니다.

예제 1

<!DOCTYPE html>
<html>
<head>
<title>CSS height and width</title>
</head>
<style>
* {
    padding: 2px;
    margin:5px;
}
button {
    border-radius: 10px;
}
#containerDiv {
    width:70%;
    margin: 0 auto;
    padding:20px;
    background-image: linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%);
    text-align: center;
    border-radius: 10px;
}
#contentDiv2{
    width:200px;
    height: 200px;
    opacity: .5;
    border:1px solid black;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv1">
This is paragraph 1 with some dummy text.
</div>
<div id="contentDiv2">
This is paragraph 2 with some dummy text.
</div>
</div>
<script>
</script>
</body>
</html>

실행 결과

CSS 너비(width)와 높이(height) 속성 완벽 가이드

위 예제에서는 컨테이너 div에 가변 단위인 백분율(%)을 적용하고, 내부 요소에는 고정 픽셀(px) 값으로 너비와 높이를 지정해 두 방식의 차이를 확인할 수 있습니다.

이어서 폼(form) 요소 안에서 width와 height 속성을 활용하는 또 다른 예제를 살펴보겠습니다.

예제 2

<!DOCTYPE html>
<html>
<head>
<title>CSS height and width</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}
#containerDiv {
    margin: 0 auto;
    height: 150px;
    width:250px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS height and width</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg">
</div>
</fieldset>
</form>
</body>
</html>

실행 결과

CSS 너비(width)와 높이(height) 속성 완벽 가이드

이처럼 CSS의 width와 height 속성을 활용하면 이미지, div 등 다양한 요소의 크기를 자유롭게 제어할 수 있으며, 반응형 레이아웃 설계의 기초가 되는 핵심 개념입니다.