CSS에서 width 속성은 이미지의 너비를 지정할 때 사용합니다. 이 속성은 픽셀(px)과 같은 절대 길이 단위 또는 백분율(%) 값을 가질 수 있으며, 백분율로 값을 지정하면 해당 이미지가 속한 부모 요소(박스)의 크기를 기준으로 너비가 계산됩니다.
기본 사용 예제
아래 코드를 실행하면 이미지의 너비가 어떻게 설정되는지 확인할 수 있습니다. 첫 번째 이미지는 고정 너비인 100px로, 두 번째 이미지는 부모 요소 기준 50%로 지정되어 있습니다.
<html> <head> </head> <body> <img style = "border:2px solid green; width:100px;" src = " https://www.tutorialspoint.com/images/logo.png " /> <br /> <img style = "border:2px solid green; width:50%;" src = " https://www.tutorialspoint.com/images/logo.png" /> </body> </html>
반응형 웹을 위한 팁
화면 크기에 따라 이미지가 유연하게 조절되도록 하려면 max-width: 100%를 활용하는 것이 좋습니다. 이렇게 하면 이미지가 부모 요소보다 커지지 않으면서 원본 크기 이하에서 자동으로 축소되므로, 모바일 등 다양한 디바이스에서 레이아웃이 깨지는 것을 방지할 수 있습니다.