CSS 높이(height)와 너비(width) 속성이란?
CSS에서 height 속성과 width 속성은 각각 요소의 세로(높이)와 가로(너비) 크기를 지정할 때 사용합니다. 이 두 속성은 px, %, em 등 다양한 단위를 지원하며, 웹 페이지 레이아웃을 구성하는 데 있어 가장 기본이 되는 속성입니다.
또한 max-height, max-width, min-height, min-width 속성을 함께 사용하면 요소가 늘어나거나 줄어들 수 있는 크기의 상한선과 하한선을 설정할 수 있습니다.
기본 문법
CSS height와 width 속성의 기본 문법은 다음과 같습니다.
Selector {
height: /*값*/
width: /*값*/
}
요소의 실제 크기 계산 방식
화면에 표시되는 요소의 실제 크기는 단순히 width와 height 값만으로 결정되지 않습니다. 패딩(padding), 테두리(border), 마진(margin)까지 모두 더해진 값이 최종 크기가 됩니다.
| 박스 크기 | 계산식 |
|---|---|
| 전체 너비(Total Width) | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
| 전체 높이(Total Height) | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
참고: box-sizing: border-box;를 적용하면 패딩과 테두리가 width·height 값 안에 포함되므로, 위와 같은 복잡한 계산 없이 직관적으로 크기를 관리할 수 있습니다.
예제 1: 기본적인 width와 height 사용
다음 예제는 CSS height와 width 속성의 기본적인 사용 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
margin: auto;
width: 400px;
height: 80px;
border: 2px solid black;
display: flex;
border-radius: 15px;
}
#demo div {
flex: 1;
border: thin dotted;
border-radius: 50%;
line-height: 60px;
text-align: center;
}
#orange {
box-shadow: inset 0 0 8px orange;
}
#green {
box-shadow: inset 0 0 8px green;
}
#blue {
box-shadow: inset 0 0 8px blue;
}
#red {
box-shadow: inset 0 0 8px red;
}
</style>
</head>
<body>
<div id="demo">
<div id="orange">Somebody</div>
<div id="green">that I</div>
<div id="blue">used</div>
<div id="red">to know</div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: max-width와 max-height로 최대 크기 제한하기
max-width와 max-height 속성을 사용하면 콘텐츠 양이 많아지더라도 요소가 일정 크기 이상 커지지 않도록 제한할 수 있습니다. 여기에 overflow: auto;를 함께 지정하면, 내용이 영역을 초과할 때 스크롤바가 자동으로 생성되어 모든 내용을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 10% 35%;
box-shadow: 0 0 6px 1px black;
max-width: 200px;
max-height: 150px;
overflow: auto;
}
</style>
</head>
<body>
<h2>Java 8 Features</h2>
<article>
Lambda expression adds functional processing capability to Java.
Referencing functions by their names instead of invoking them directly.
Interface to have default method implementation.
New compiler tools and utilities are added like ‘jdeps’ to figure out dependencies.
New stream API to facilitate pipeline processing.
Improved date time API.
Emphasis on best practices to handle null values properly.
Nashorn, a Java-based engine to execute JavaScript code.
</article>
</body>
</html>
실행 결과
위 코드를 실행하면 article 요소가 지정된 최대 크기(200×150px)를 벗어나지 않고, 초과된 내용은 스크롤로 표시되는 것을 확인할 수 있습니다.
마무리
CSS의 height와 width 속성은 요소의 크기를 결정하는 핵심 도구입니다. min/max 계열 속성을 함께 활용하면 반응형 레이아웃에서도 요소가 의도치 않게 늘어나거나 찌그러지는 것을 방지할 수 있습니다. 패딩, 테두리, 마진이 실제 크기에 어떻게 영향을 주는지 이해하고 있다면, 더욱 정교하고 안정적인 웹 디자인을 구현할 수 있습니다.