vvvvvv.in

HTML을 사용하여 이미지의 너비와 높이를 설정하는 방법

작가: Clyde Lopez

창조 날짜: 17 칠월 2021

업데이트 날짜: 1 칠월 2024

[웹 ]10주차 3교시/Week10 Class 3:듣고 있으면 저절로 이해되는 img속성 width, height, html5 basic education, don’t worry — 동영상: [웹 ]10주차 3교시/Week10 Class 3:듣고 있으면 저절로 이해되는 img속성 width, height, html5 basic education, don’t worry

콘텐츠

단계
팁

이 기사에서는 HTML에서 이미지의 높이와 너비를 설정하는 방법을 보여줍니다.

"width" 속성은 그림의 너비(픽셀 단위)를 설정합니다.
"height" 속성은 이미지의 높이(픽셀 단위)를 설정합니다.
HTML4.01에서는 높이를 픽셀 또는 백분율로 설정할 수 있지만 HTML5에서는 픽셀로만 설정할 수 있습니다.

단계

1 HTML 파일을 엽니다. 예를 들어 default.html 파일을 엽니다.
2 HTML 코드에 다음 줄을 추가합니다.
- img src = "imagefile.webp" alt = "이미지" 높이 = "42" 너비 = "42">
- src는 그래픽 파일(그림)의 경로를 포함합니다.
- alt에서는 이미지의 크기가 설정됩니다.
3 높이 및 너비 속성 값을 원하는 값으로 바꿉니다. 예: 높이 = "19" 너비 = "20"
4 파일을 저장하고 웹 브라우저에서 엽니다. 이미지 크기가 어떻게 조정되는지 확인하려면 이 작업을 수행하십시오. "width" 속성은 모든 주요 브라우저(Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer)에서 지원됩니다.

팁

항상 그림의 높이와 너비를 설정하십시오. 따라서 페이지가 로드될 때 그림을 위한 공간이 예약됩니다. 그렇지 않으면 브라우저는 이미지의 크기를 알지 못하고 공간을 예약하지 않으므로 페이지가 로드될 때 페이지 레이아웃이 변경됩니다.
"height" 및 "width" 속성을 사용하여 큰 이미지의 크기를 줄이면 사용자는 큰 이미지를 로드합니다(페이지에 작게 나타나더라도). 따라서 먼저 그래픽 편집기에서 이미지 크기를 조정하는 것이 좋습니다.