CSS에서 width 속성은 요소의 너비를 지정하는 데 사용됩니다. 이 속성은 블록 요소와 인라인 블록 요소에 적용될 수 있으며, 길이 값이나 백분율 값으로 지정할 수 있습니다.

길이 값을 사용한 너비 지정

가장 간단한 방법으로, 픽셀 값을 사용하여 너비를 지정할 수 있습니다. 아래의 예제를 살펴보겠습니다.

div {
  width: 300px;
}

위의 예제에서는 div 요소의 너비를 300픽셀로 지정하고 있습니다.

백분율 값을 사용한 너비 지정

또한, 다른 요소의 너비에 상대적으로 지정하기 위해 백분율 값을 사용할 수도 있습니다.

div {
  width: 50%;
}

위의 예제에서는 div 요소의 너비를 부모 요소의 너비의 50%로 지정하고 있습니다.

속성값

width 속성은 다음과 같은 값들을 갖는다.

• auto: 요소의 기본 너비를 유지한다.
• 길이 값: 픽셀(px), 센티미터(cm), 밀리미터(mm) 등의 단위를 사용하여 지정할 수 있다.
• 백분율 값: 부모 요소의 너비에 상대적으로 지정할 수 있다.

width 속성은 박스 모델을 이해하는 데 중요한 속성 중 하나입니다. 적절한 너비 값을 지정하여 요소들을 레이아웃하는 데 활용할 수 있습니다.

더 많은 정보는 MDN Web Docs에서 확인할 수 있습니다.