CSS의 width 속성과 너비 결정 매커니즘

웹 페이지의 레이아웃을 디자인할 때 CSS에서 요소의 너비를 정의하는 width 속성이 매우 중요한 역할을 하게 되는데요. 이번 포스팅에서는 CSS의 width 속성의 기본적인 사용법과 각 속성값에 따라 어떻게 너비가 결정되는지에 대해서 알아보겠습니다.

width 속성

CSS의 width 속성은 HTML 요소의 너비를 제어하기 위해서 사용되는데요. 크게 절대값, 상대값, 키워드로 설정이 가능한데 이에 따른 너비가 어떻게 결정되는지 이해하는 것이 중요합니다.

절대값

px와 같은 절대 단위를 사용하여 width 속성값을 지정해주면 해당 요소는 항상 고정된 너비를 갖게 됩니다. 즉, 절대값으로 width 속성을 설정하면 부모 요소가 제공하는 가용 공간이나 컨텐츠의 크기와 무방하게 특정한 값으로 요소의 너비를 강제시킬 수 있습니다.

예를 들어, <p> 요소의 너비를 300px로 고정하려면 다음과 같이 스타일합니다.

p {
  width: 300px;  margin: 20px;
  background: tomato;
}

위 예제 화면에서 브라우저 너비를 아주 좁게 줄이더라도 텍스트 영역의 너비는 부모 요소를 삐져나올지언정 절대 변하지 않는 것을 확인할 수 있습니다.

적응형(adaptive) 웹디자인에서는 width 속성을 지정할 때 절대 단위를 피하는 것이 좋습니다. 요소의 너비를 고정해놓으면 브라우저의 화면 크기에 따라 너무 좁아 보이거나 너무 넓어 보일 수 있기 때문입니다.

퍼센트

HTML 요소의 너비가 부모 요소가 제공하는 가용 공간에 비례해서 커지거나 작아지게 하고 싶다면 어떻게 해야할까요? 이 때는 %와 같은 상대 단위를 사용하여 width 속성값을 지정해주면 됩니다.

참고로, 여기서 가용 너비란 박스 모델 상에서 부모 요소의 켄텐트 박스 크기를 의미합니다. 박스 모델에 대한 자세한 설명은 관련 포스팅를 참고 바랍니다.

예를 들어, 가용 너비가 400px인 상황에서, width: 50%를 설정하면 해당 요소의 너비는 200px이 됩니다.

상대값으로 너비를 설정해줄 때 CSS 초보자들이 범하기 쉬운 실수가 margin이 설정된 요소를 대상으로 width: 100%를 설정하는 것인데요. 이럴 경우, 의도치 않게 자식 요소가 부모 요소 밖으로 삐져나오게 됩니다.

예를 들어, 아래와 같이 <p> 요소를 스타일하면 좌우 여백을 포함하여 요소의 전체 너비가 400px(100%) + 20px * 2 = 440px가 되므로 부모 요소의 가용 너비 400px을 초과하게 됩니다.

p {
  width: 100%;  margin: 20px;
  background: tomato;
}

위와 같은 실수를 범하기 쉬운 이유는 많은 분들이 width 속성의 기본값을 100%로 오해하고 있기 때문입니다. 사실 width 속성의 기본값은 다음 섹션에서 설명드릴 auto 키워드입니다.

auto

width 속성의 기본값을 100%로 알고 계신 분들이 많은데요. 사실 width 속성을 명시하지 않으면 auto라는 키워드가 기본값으로 사용이 됩니다.

말그대로 auto 키워드를 사용하면 브라우저가 해당 요소의 width 속성값을 자동으로 계산해주는데요. 계산 알고리즘은 부모 요소로 부터 주어진 가용 너비에서 좌우 margin 크기를 제외한 너비를 width 속성값으로 사용하는 것입니다.

예를 들어, 다음과 같이 가용 너비가 400px인 상황에서 <p> 요소에 margin: 20px가 적용되어 되어 있다면 브라우저는 width 속성값을 400px - 20px * 2 = 360px로 계산해줍니다. CSS의 calc 함수를 알고 있으시다면, width: auto는 width: calc(100% - 20px * 2)의 효과를 낸다고 생각하면 됩니다.

p {
  /* width: auto; // 기본값 */  margin: 20px;
  background: tomato;
}

웹 페이지의 레이아웃을 디자인할 때 대부분 경우 이것이 우리가 원하는 너비 설정 방식이기 때문에, CSS에서는 width 속성의 기본값을 auto로 채택하고 있습니다. 그래서 우리는 굳이 width: auto;를 일일이 명시하지 않아도 되는 것이지요.

min-content

min-content 키워드와 max-content 키워드는 상대값과 반대로 가용 공간이 아닌 담고 있는 컨텐츠에 의해 width 속성값이 결정되는데요.

먼저 min-content 키워드는 요소의 너비를 줄일 수 있는 만큼 최소로 줄이고 싶을 때 사용합니다. 최소 너비는 해당 요소가 담고 있는 컨텐츠에 의해 좌우가 되는데요.

예를 들어, 텍스트 컨텐츠의 경우 최대한 줄바꿈을 하여 가장 긴 단어의 길이가 최소 너비를 결정합니다.

p {
  width: min-content;  margin: 20px;
  background: tomato;
}

위 예제의 경우, width라는 단어가 가장 길기 때문에 컨테이너의 최소 너비로 사용되었습니다.

max-content

max-content 키워드는 min-content 키워드와 정반대로 요소의 너비를 최대한 늘이고 싶을 때 사용합니다. 최대 너비 역시 해당 요소가 담고 있는 컨텐츠에 의해 좌우가 되는데요.

예를 들어, 텍스트 컨텐츠의 경우 줄바꾸기를 하지 않은 상태의 문장의 길이가 최대 너비로 사용됩니다.

p {
  width: max-content;  margin: 20px;
  background: tomato;
}

max-content 키워드는 텍스트의 배경색을 적용할 때 유용하게 사용될 수 있습니다. 왜냐하면 auto 키워드와 달리 텍스트의 길이에 딱 맞게 배경색을 적용할 수 있기 때문입니다.

fit-content

CSS에서 가장 나중에 추가된 fit-content 키워드는 max-content 키워드와 auto 키워드의 하이브리드 모드처럼 작동합니다.

가용 너비가 부족하지 않는 경우에는 max-content 키워드처럼 담고 있는 컨텐츠의 최대 너비를 요소의 width 속성값으로 사용합니다. 그러나 가용 너비가 부족하다면 auto 키워드처럼 가용 너비에서 여백(margin)을 제외한 너비를 요소의 width 속성값으로 사용합니다.

p {
  width: fit-content;  margin: 20px;
  background: tomato;
}

브라우저 너비를 텍스트가 줄바꿈이 될 때까지 줄여보면서 위 예제 화면의 <p> 요소의 width 속성값이 어떻게 변하는지 관찰해보세요.

뷰포트 너비 단위

CSS에 비교적 최근에 추가된 뷰포트(viewport) 너비(width) 단위, 즉 vw를 사용하면 부모 요소의 너비에 구애 받지 않고 브라우저의 화면 너비에 상대적인 너비를 설정해줄 수 있는데요. 1vw가 뷰포트의 너비의 1%를 의미하며 너비를 100vh로 설정하여 브라우저의 화면 너비만큼 넓은 요소를 만들 수 있습니다.

하지만 너비를 100vh로 설정해줄 때는 조심해야할 부분이 있는데요.

우선 해당 요소에 좌우로 margin이 설정되어 있다면 감안해주어야 합니다. 다음과 같이 calc() 함수를 사용하여 그 만큼을 빼줄 수 있겠죠?

p {
  width: calc(100vh - 40px);  margin: 20px;
  background: tomato;
}

두 번째로 조심할 부분은 데스크탑에서 컨텐츠가 많아서 세로 스크롤바가 생겼을 경우 의도치 않게 가로 스크롤바까지 생길 수 있습니다. 왜냐하면 100vh는 스크롤바까지 포함한 너비와 동일하며 대부분의 데스크탑 브라우저는 모바일 브라우저처럼 스크롤바가 화면에 떠있지 않기 때문입니다.

마치면서

이상으로 CSS의 width 속성을 사용하여 요소의 너비를 제어하는 다양한 매커니즘에 대해서 알아보았습니다. width 속성은 CSS에서 워낙 자주 쓰이다보니 과소 평가하기 쉬운데요. 매커니즘을 제대로 이해하지 않으면 실전에서 여러 가지 어려움을 겪을 수 있습니다. 이번 기회에 제대로 짚고 넘어가시면 좋을 것 같습니다.