CSS로 요소의 최소 너비와 최대 너비 설정하기
CSS에서는 min-width(최소 너비)와 max-width(최대 너비) 속성을 사용하여 요소가 가질 수 있는 너비의 범위를 제한할 수 있습니다. 이 두 속성은 반응형 웹 디자인에서 특히 유용합니다. 브라우저 창 크기가 변하더라도 요소가 일정 범위 안에서만 늘어나거나 줄어들도록 제어할 수 있기 때문입니다.
- min-width: 요소가 줄어들 수 있는 최소 너비를 지정합니다. 창이 아무리 좁아져도 이 값보다 작아지지 않습니다.
- max-width: 요소가 늘어날 수 있는 최대 너비를 지정합니다. 창이 아무리 넓어져도 이 값보다 커지지 않습니다.
예제
다음은 div 요소에 최소 너비 100px와 최대 너비 300px를 동시에 적용한 예제입니다. 웹 브라우저 창의 크기를 조절해 보면 두 속성이 실제로 어떻게 작동하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 300px;
min-width: 100px;
background-color: red;
}
</style>
</head>
<body>
<p>아래는 최소 너비와 최대 너비가 적용된 div입니다. 브라우저 창 크기를 조절하여 효과를 확인해 보세요.</p>
<div>This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
</div>
</body>
</html>실행 결과
브라우저 창을 좁히면 div의 너비가 100px보다 작아지지 않고, 창을 넓히면 300px보다 커지지 않습니다. 즉, 요소의 너비가 항상 100px~300px 사이에서만 유동적으로 변하게 됩니다.
활용 팁
실무에서는 콘텐츠 영역의 가독성을 유지하기 위해 컨테이너에 max-width를 지정하는 경우가 많습니다. 또한 이미지에 max-width: 100%를 적용하면 부모 요소를 벗어나지 않고 자연스럽게 축소되므로 반응형 이미지 처리에 널리 활용됩니다.