Logo

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

이번 포스팅에서는 CSS의 width 속성과 너비 결정 매커니즘에 대해서 알아보도록 하겠습니다.

width 속성

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

절대값

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

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

p {
  width: 300px;  margin: 10px;
  background: yellow;
}

위 예제 화면에서 브라우저 너비를 아주 좁게 줄이더라도 노란색 배경의 텍스트 영역의 너비는 붉은 테두리의 부모 엘리먼트를 삐져나올지언정 절대 변하지 않는 것을 확인할 수 있습니다.

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

상대값

엘리먼트의 너비가 가용 너비에 비례해서 커지거나 작아지게 하고 싶다면 어떻게 해야할까요? %와 같은 상대 단위를 사용하여 width 속성값을 지정해주면 됩니다.

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

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

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

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

p {
  width: 100%;  margin: 10px;
  background: yellow;
}

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

auto

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

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

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

p {
  /* width: auto; // 기본값 */  margin: 10px;
  background: yellow;
}

min-content

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

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

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

p {
  width: min-content;  margin: 10px;
  background: yellow;
}

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

max-content

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

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

p {
  width: max-content;  margin: 10px;
  background: yellow;
}

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

fit-content

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

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

p {
  width: fit-content;  margin: 10px;
  background: yellow;
}

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

마치면서

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