CSS의 width 속성은 이미지의 가로 크기를 지정할 때 사용합니다. 이 속성은 픽셀(px)과 같은 길이 단위 또는 백분율(%) 값을 가질 수 있습니다.
백분율(%)로 값을 지정하면 이미지가 포함된 부모 요소(박스)를 기준으로 너비가 적용됩니다. 예를 들어 width: 50%로 설정하면, 해당 이미지는 감싸고 있는 컨테이너 전체 너비의 절반만큼 표시됩니다.
예제
아래 코드를 실행하면 이미지의 너비를 설정할 수 있습니다. 첫 번째 이미지는 고정 픽셀 값(100px)을, 두 번째 이미지는 백분율(50%)을 사용한 예시입니다.
<html> <head> </head> <body> <img style = "border:2px solid green; width:100px;" src = "/css/images/logo.png" /> <br /> <img style = "border:2px solid green; width:50%;" src = "/css/images/logo.png" /> </body> </html>
이처럼 width 속성을 활용하면 반응형 웹 디자인에서도 유연하게 이미지 크기를 조절할 수 있으며, 필요에 따라 height 속성과 함께 사용해 이미지 비율을 유지하는 것도 가능합니다.