HTML 페이지에 이미지를 추가하려면 <img> 태그를 사용합니다. 이때 height와 width 속성을 함께 지정하면 이미지의 세로 및 가로 크기를 픽셀 단위로 정확하게 설정할 수 있습니다.
이미지가 로드되기 전에도 레이아웃이 밀리는 현상(레이아웃 시프트)을 방지하려면 두 속성을 반드시 모두 명시하는 것이 좋습니다.
height와 width 속성이란?
두 속성 모두 픽셀(px) 값을 기준으로 동작합니다.
- width: 이미지의 가로 크기를 지정합니다.
- height: 이미지의 세로 크기를 지정합니다.
원본 이미지의 비율(aspect ratio)이 왜곡되지 않도록, 원본 크기에 맞춰 비율을 유지하는 값을 입력하는 것이 좋습니다.
예제
다음 코드를 실행하면 HTML 페이지의 이미지에 width와 height 속성을 적용한 결과를 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Document</title> </head> <body> <img src="/green/images/logo.png" alt="We Learners" width="170" height="70"> </body> </html>
코드 설명
src: 표시할 이미지 파일의 경로를 지정합니다.alt: 이미지가 로드되지 않을 때 대신 표시되는 대체 텍스트입니다.width="170": 이미지의 가로 크기를 170픽셀로 설정합니다.height="70": 이미지의 세로 크기를 70픽셀로 설정합니다.
참고 사항
CSS를 활용하면 더 유연한 이미지 크기 조절이 가능합니다. 예를 들어 반응형 웹에서는 다음과 같이 스타일을 적용하는 방법도 널리 사용됩니다.
img {
max-width: 100%;
height: auto;
}이처럼 HTML 속성으로 기본 크기를 지정하고, 필요에 따라 CSS로 반응형 처리를 추가하면 다양한 화면 환경에서 안정적인 이미지 표시가 가능합니다.