CSS의 width 속성은 박스(box)의 너비를 지정할 때 사용합니다. 이 속성은 다음과 같은 세 가지 형태의 값을 가질 수 있습니다.
- 길이 값(length) : px, em, rem 등 고정 단위로 너비를 지정합니다.
- 백분율(percentage) : 부모 요소 너비를 기준으로 상대적인 크기를 지정합니다.
- auto 키워드 : 콘텐츠나 레이아웃에 따라 브라우저가 너비를 자동으로 계산합니다.
다음 코드를 실행하면 width 속성을 적용한 결과를 직접 확인할 수 있습니다.
예제
<html> <head> </head> <body> <p style = "width:200px; height:50px; border:2px solid green; padding:15px; margin:20px;"> 이 문단은 너비 200픽셀, 높이 50픽셀입니다. </p> </body> </html>
참고 사항
위 예제에서는 width와 height뿐만 아니라 border, padding, margin도 함께 지정했습니다. 기본적으로 CSS 박스 모델에서는 padding과 border가 width 값에 더해져 실제 화면상의 너비가 커지므로 주의해야 합니다. 정확한 크기 제어가 필요하다면 box-sizing: border-box;를 함께 사용하는 것이 좋습니다.