CSS 높이(height)와 너비(width) 완벽 가이드 – 요소 크기 지정부터 반응형 설계까지

웹 페이지를 디자인하다 보면 페이지에 표시되는 요소들의 크기를 직접 지정하고 싶어지는 순간이 옵니다. 예를 들어 어떤 박스에는 일정한 높이를 부여하고, 텍스트 문단이 특정 너비만큼 차지하도록 만들어야 할 수도 있습니다.

바로 이럴 때 필요한 것이 CSS의 height(높이)와 width(너비) 속성입니다. 이 두 속성을 사용하면 CSS에서 요소의 세로·가로 크기를 자유롭게 설정할 수 있습니다.

이 글에서는 CSS height와 width 속성의 기본 개념을 예제와 함께 살펴보고, 나아가 min / max 높이·너비 속성을 활용해 화면 크기에 유연하게 대응하는 반응형 요소를 만드는 방법까지 다룹니다. 끝까지 읽고 나면 웹 페이지의 요소 크기를 전문가처럼 제어할 수 있게 될 것입니다.

CSS 높이와 너비의 기본 개념

웹 페이지에서 요소의 높이와 너비를 설정한다는 것은, 그 요소가 페이지 위에서 차지할 공간을 정의하는 작업입니다. 이를 통해 페이지 전체의 레이아웃 구조를 잡고, 각 요소가 의도한 대로 배치되도록 만들 수 있습니다.

요소가 가로·세로로 얼마나 늘어날 수 있는지 정의하려면 각각 width와 height 속성을 사용합니다.

주목할 점은, 이 속성들이 지정하는 크기는 박스의 콘텐츠 영역(content area) 기준이라는 것입니다. 즉, height와 width는 박스 안의 내용물이 차지하는 공간을 제어할 뿐, 별도로 설정된 마진(margin)이나 패딩(padding)에는 영향을 주지 않습니다.

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

height: heightValue;
width: widthValue;

heightValue와 widthValue 자리에는 아래 값 중 하나를 사용할 수 있습니다.

auto: 브라우저가 높이와 너비를 자동으로 계산합니다.
length: px, em, rem 등 단위를 사용해 직접 지정한 너비 또는 높이입니다.
percentage(%): 요소가 속한 부모 블록 크기에 대한 백분율로 너비 또는 높이를 지정합니다.
initial: 해당 박스에 기본으로 지정된 값을 사용합니다.
inherit: 부모 요소의 너비 또는 높이 값을 그대로 상속받습니다.

기본 개념을 이해했으니, 이제 실제 예제를 통해 두 속성이 어떻게 동작하는지 확인해 보겠습니다.

height · width 속성 실전 예제

일리노이주 스프링필드에 있는 'The Pickled Apple'이라는 로컬 카페 웹사이트를 디자인한다고 가정해 보겠습니다. 카페 측에서는 '소개(About)' 페이지에 카페에 대한 간단한 소개 문구를 담는 박스 하나를 만들어 달라고 요청했습니다.

요구 사항은 다음과 같습니다. 박스의 크기는 가로 200px, 세로 200px, 배경색은 연회색(lightgray)이며, 이 크기는 나중에 추가할 다른 요소들과의 배치를 고려해 미리 정해진 것입니다.

다음 코드로 이 박스를 구현할 수 있습니다.

<html>

<p class="aboutBox">The Pickled Apple은 스프링필드에 위치한 카페로, 2004년부터 고급 티, 스페셜티 커피, 맛있는 케이크를 자랑스럽게 선보여 왔습니다.</p>

<style>

.aboutBox {
	height: 200px;
	width: 200px;
	background-color: lightgray;
}

CSS 높이(height)와 너비(width) 완벽 가이드 – 요소 크기 지정부터 반응형 설계까지 위 코드 편집기의 실행 버튼을 누르면 HTML/CSS 코드의 출력 결과를 확인할 수 있습니다.

코드를 하나씩 살펴보겠습니다. HTML 파일에서는 <p> 태그로 소개 문단을 작성했고, 이 태그에는 aboutBox라는 클래스 이름을 부여했습니다. CSS 파일에서는 바로 이 클래스 이름을 선택자로 사용해 문단을 꾸미게 됩니다.

CSS 파일에는 aboutBox 클래스를 가진 모든 요소에 적용되는 스타일 규칙이 정의되어 있습니다. 이 규칙은 요소의 높이를 200px, 너비를 200px로 지정하고, 배경색을 연회색으로 설정합니다.

만약 요소의 너비를 100px로 줄이고 싶다면 width 값을 100px로, 높이를 300px로 키우고 싶다면 height 값을 300px로 변경하기만 하면 됩니다.

CSS min / max 길이 속성으로 반응형 만들기

앞서 사용한 width와 height는 고정값(fixed value)입니다. 즉, 한 번 지정한 크기는 창 크기를 조절하거나 다른 기기에서 페이지를 열어도 변하지 않습니다(부모 요소 크기에 대한 퍼센트 같은 상대값을 사용한 경우는 예외).

이 점은 접근성 있고 반응형인 웹 경험을 설계할 때 매우 중요합니다. 예를 들어 이미지 너비를 500px로 고정하면, 화면이 작은 모바일 기기에서는 이미지가 화면을 벗어나거나 깨져 보일 수 있습니다.

바로 이런 상황에서 min / max 길이 속성이 빛을 발합니다.

요소가 다양한 화면·뷰포트 크기에 맞춰 유연하게 조정되도록 하려면 min-width, max-width, min-height, max-height 속성을 사용하면 됩니다. 이 속성들을 지정하면 앞서 설정한 width와 height 값은 무시됩니다.

min-height: 요소가 가질 수 있는 최소 높이를 정의합니다. 지정하면 요소의 높이는 이 값보다 작아질 수 없습니다.
min-width: 요소의 최소 너비를 정의하며, 동작 방식은 min-height와 같습니다.
max-height / max-width: 반대로 요소가 가질 수 있는 최대 높이·너비를 정의합니다.

다시 카페 예제로 돌아가 보겠습니다. 이번에는 박스의 너비가 사용자의 화면 크기에 따라 달라지기를 원합니다. 단, 박스의 최대 너비는 500px을 넘지 않아야 하고, 어떤 경우에도 100px보다 좁아져서는 안 됩니다. 다음 코드로 이 요구 사항을 구현할 수 있습니다.

<html>

<p class="aboutBox">The Pickled Apple은 스프링필드에 위치한 카페로, 2004년부터 고급 티, 스페셜티 커피, 맛있는 케이크를 자랑스럽게 선보여 왔습니다.</p>

<style>

.aboutBox {
	max-width: 500px;
	min-width: 100px;
	background-color: lightgray;
}

코드가 어떻게 동작하는지 살펴보겠습니다. HTML 파일에는 첫 번째 예제와 동일한 문단이 <p> 태그 사이에 작성되어 있으며, 역시 aboutBox라는 클래스 이름이 붙어 있습니다.

CSS 파일에서는 aboutBox 클래스에 세 가지 속성을 지정했습니다.

max-width: 500px — 박스의 최대 너비가 500px임을 의미합니다.
min-width: 100px — 사용자가 어떤 기기로 사이트를 열더라도 박스가 100px보다 좁게 표시되지 않습니다.
background-color: lightgray — 박스의 배경색을 연회색으로 설정합니다.

이제 박스의 크기는 브라우저 창 크기에 따라 유동적으로 변합니다. 창을 줄이면 박스도 그에 맞춰 작아지지만, 창을 아무리 크게 늘려도 <p> 태그의 너비는 절대 500px를 초과하지 않습니다.

마무리

CSS의 height와 width 속성을 사용하면 웹 페이지에서 요소의 높이와 너비를 명확하게 정의할 수 있습니다.

다만 이 속성들은 요소에 고정된 크기를 부여한다는 점을 기억해야 합니다. 박스 크기가 브라우저 창 크기에 따라 유동적으로 변하길 원한다면, min-height, min-width, max-height, max-width 속성을 활용하세요.

이 글에서는 CSS에서 높이와 너비의 기본 개념, height·width 속성의 사용법, 그리고 min / max 속성을 조합해 웹 페이지 요소의 크기를 유연하게 설정하는 방법까지 예제와 함께 살펴보았습니다. 이제 여러분도 전문가처럼 height와 width 속성을 자유롭게 활용할 준비가 되었습니다!