HTML에 이미지를 추가하는 방법에 대한 자세한 소개

웹사이트 제작에 있어서 사진은 매우 중요한 요소 중 하나로서 웹사이트에 시각적 효과와 아름다움을 더해줍니다. 따라서 HTML에 그림을 어떻게 추가하는가가 중요한 문제가 되었습니다. 이 기사에서는 독자가 HTML에 이미지를 추가하는 방법을 자세히 소개하여 독자가 웹 사이트 제작 기술을 더 잘 익히는 데 도움을 줄 것입니다.

1. 기본 이미지 참조 구문

HTML에서 이미지를 추가한다는 것은 실제로 HTML 문서에 이미지 참조 구문을 추가하는 것입니다. HTML에서는 태그를 사용하여 이미지를 참조합니다. 기본 구문은 다음과 같습니다.

이 중 src 속성은 참조된 이미지의 주소를 나타내며, 이는 이미지의 경로가 될 수 있습니다. 로컬 이미지 또는 원격 서버의 이미지 주소에 대한 포인터입니다. alt 속성은 이미지의 설명 정보를 나타냅니다. 어떤 이유로 이미지가 정상적으로 표시되지 않는 경우, alt 속성의 정보가 이미지의 원래 표시 정보를 대체합니다.

예를 들어 example.png라는 이름의 그림을 HTML에 추가하려고 하고 해당 그림이 로컬 하드 디스크의 C: 아래의 이미지 폴더에 있는 경우 그림 참조 구문을 사용하는 코드는 다음과 같습니다.

HTML에서는 이미지를 사용할 때 너비를 나타내는 너비와 같은 몇 가지 다른 속성이 있습니다. 이미지의 높이를 나타내는 높이는 그림의 테두리 크기를 나타냅니다. 이러한 속성을 통해 이미지에 대한 더 많은 설정과 제어가 가능합니다.

2. 상대 경로와 절대 경로

위에서는 src 속성에 절대 경로를 사용하여 이미지를 참조하는 방법을 설명했습니다. 실제로 웹 사이트 제작에서는 상대 경로를 사용하여 이미지를 참조할 수도 있습니다. 상대 경로는 HTML 문서의 경로에 상대적입니다. 웹사이트의 이미지 인용을 더욱 쉽고 편리하게 만들 수 있습니다.

상대 경로에는 절대 상대 경로와 상대 상대 경로의 두 가지 유형이 있습니다. 그중 절대 상대 경로란 이미지를 참조할 때 먼저 다른 디렉터리로 점프한 다음 해당 디렉터리를 기준으로 상대 참조를 만드는 것을 의미합니다. 상대 경로는 현재 문서를 기준으로 참조됩니다.

파일 디렉터리를 예로 들어보겠습니다. 다음 파일 디렉터리가 있는 경우:

home/

|____ index.html
|____ images/
        |____ pic1.jpg
        |____ pic2.jpg

index.html의 이미지 폴더 아래에 있는 pic1.jpg 이미지를 참조하려면 상대 경로 방식을 통해 참조할 수 있습니다. , 즉, . 3. 이미지 형식

실제 웹사이트 제작 시 일반적으로 사용되는 이미지 형식으로는 JPEG, PNG, GIF 등이 있습니다. 다른 두 형식에 비해 JPEG 형식은 압축률이 높아 이미지 저장 공간을 절약할 수 있습니다. PNG 형식은 투명한 배경을 지원하며 JPEG 형식 이미지의 흐릿함과 왜곡을 겪지 않습니다. GIF 형식은 애니메이션과 투명한 배경을 지원하지만 색상 심도는 JPEG 및 PNG 형식보다 낮습니다.

페이지 로드 속도를 높이고 방문자 경험을 개선하려면 웹사이트 개발자는 이미지 형식을 선택할 때 이미지 크기와 품질, 로딩 속도, 성능 및 기타 요소를 고려해야 합니다.

4. 요약

이번 글에서는 HTML에 이미지를 추가하는 방법을 자세히 소개했고, 이미지 형식과 상대 경로, 절대 경로를 독자들에게 소개했습니다. 사진은 웹사이트 제작에 있어 매우 중요한 요소 중 하나입니다. 아름다운 이미지를 만드는 것은 웹 사이트에 많은 활력과 매력을 더할 수 있으므로 HTML에 이미지를 추가하는 기술을 익히는 것은 웹 사이트 제작자에게 매우 중요한 부분입니다.

위 내용은 HTML에 이미지를 추가하는 방법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!