CSS의 height 속성은 이미지의 높이를 지정할 때 사용합니다. 이 속성에는 픽셀(px), em 등과 같은 길이 단위 값 또는 백분율(%) 값을 지정할 수 있습니다.
백분율(%)로 값을 설정하면 이미지가 들어 있는 부모 요소(박스)를 기준으로 높이가 계산되어 적용됩니다. 예를 들어 부모 요소의 높이가 200px일 때 height를 50%로 지정하면 이미지는 100px의 높이를 갖게 됩니다.
예제
다음 코드를 실행하여 이미지의 높이를 설정하는 방법을 직접 확인해 보세요:
<html> <head> </head> <body> <img style = "border:2px solid green; height:100px;" src = "/css/images/logo.png" /> <br /> <img style = "border:2px solid green; height:50%;" src = "/css/images/logo.png" /> </body> </html>
위 예제에서 첫 번째 이미지는 고정값인 100px로 높이가 지정되고, 두 번째 이미지는 부모 요소를 기준으로 50%만큼의 높이가 적용됩니다.
참고로 height 속성만 조절하면 원본 이미지의 가로세로 비율이 깨질 수 있으므로, 비율을 유지하고 싶다면 width 속성과 함께 사용하거나 auto 값을 지정하는 것이 좋습니다.