HTML에 그림을 추가하는 방법

HTML은 웹 페이지에서 텍스트, 이미지, 비디오 및 기타 콘텐츠를 만드는 데 사용되는 마크업 언어입니다. 그림은 웹 페이지 제작에 있어 필수적인 요소 중 하나입니다. 그림을 올바르게 추가하는 방법은 모든 웹 페이지 제작자가 숙달해야 하는 기술입니다.

1. 기본 구문

img 태그를 사용하여 HTML에 이미지를 삽입할 수 있습니다. img의 전체 이름은 "image"이며, 이는 이미지를 의미합니다. 다음은 img 태그의 기본 구문입니다.

<img  src="/static/imghwm/default1.png" data-src="图片文件路径" class="lazy" alt="HTML에 그림을 추가하는 방법" >

img 태그에는 src와 alt라는 두 가지 주요 속성이 있습니다. src는 이미지 파일의 경로를 의미하고, alt는 해당 페이지에서 이미지를 정상적으로 표시할 수 없을 때 표시될 텍스트 설명을 의미합니다.

그 중 src 속성은 필수로 채워주셔야 하며, alt 속성은 선택사항입니다. 이미지 경로가 올바르지 않으면 이미지가 표시되지 않습니다. alt 속성을 설정하지 않으면 이미지가 정상적으로 표시되지 않는 페이지에 의미 없는 문자열이 표시될 수 있습니다.

이미지 경로는 로컬 경로일 수도 있고 네트워크 경로일 수도 있습니다. 로컬 경로는 로컬 컴퓨터에 저장된 이미지 파일의 경로를 의미하고, 네트워크 경로는 인터넷에서 다운로드한 이미지 등 네트워크를 통해 접근하는 이미지 파일의 경로를 의미합니다.

2. 로컬 이미지의 경로

로컬 이미지의 경로는 절대 경로와 상대 경로로 구분됩니다. 절대 경로는 전체 파일 시스템에서 이미지의 위치를 ​​지정하며 전체 경로를 작성해야 하며, 상대 경로는 HTML 파일에서 시작하는 경로 설명이며 상대 경로만 작성하면 됩니다. HTML 파일.

다음은 로컬 이미지 경로를 작성하는 두 가지 방법입니다.

1. 절대 경로

절대 경로는 전체 파일 시스템에서 이미지의 위치를 ​​의미합니다. 운영체제에 따라 절대 경로가 조금씩 다를 수 있습니다. Windows 시스템에서 절대 경로는 드라이브 문자에서 시작합니다. 예:

C:\Users\Administrator\Pictures\test.jpg

Mac OS X 시스템에서는 절대 경로가 루트 디렉터리에서 시작합니다. 예:

/Users/username/Documents/test.jpg

이 접근 방식의 단점은 각 웹 페이지에서 파일 경로, 파일 저장 위치가 변경되면 코드를 수정해야 합니다.

2. 상대 경로

상대 경로는 HTML 파일을 기준으로 이미지의 위치를 ​​나타냅니다. 디렉터리 구조가 단순할수록 상대 경로를 사용하기가 더 쉽습니다. HTML 파일에서 "."는 현재 파일이 있는 디렉터리를 나타내고, ".."는 현재 파일이 있는 디렉터리보다 상위 디렉터리를 나타냅니다. 예를 들어 다음과 같은 경로를 사용할 수 있습니다.

<img  src="/static/imghwm/default1.png" data-src="./images/test.jpg" class="lazy" alt="HTML에 그림을 추가하는 방법" >

이미지가 HTML 파일이 있는 디렉터리의 이미지 폴더에 저장되어 있는 경우 경로는 "./images/test.jpg"입니다.

3. 인터넷 사진

인터넷 사진은 인터넷에서 얻은 사진을 말합니다. HTML에서는 img 태그를 사용하여 로컬 이미지처럼 네트워크 이미지를 삽입할 수 있습니다.

네트워크 이미지는 일반적으로 프로토콜 이름, 호스트 이름, 파일 경로 및 파일 이름으로 구성된 문자열인 URL(Uniform Resource Locator)로 표시됩니다. 예를 들어 Baidu 사진에 액세스하는 URL은 다음과 같습니다.

https://www.baidu.com/img/bd_logo1.png

그중 "https://"는 프로토콜 이름으로, 데이터 전송에 HTTPS 프로토콜이 사용됨을 나타냅니다. "www.baidu.com"은 호스트 이름입니다. ; "img/bd_logo1.png" 파일 경로와 파일 이름입니다.

네트워크 이미지를 추가할 때 네트워크 이미지의 URL을 img 태그의 src 속성에 복사하면 됩니다. 예:

<img  src="/static/imghwm/default1.png" data-src="https://www.baidu.com/img/bd_logo1.png" class="lazy" alt="HTML에 그림을 추가하는 방법" >

인터넷 이미지가 더 편리합니다. URL만 있으면 경로 문제는 걱정하지 마세요. 이미지가 괜찮다면 사용해도 됩니다. img 태그는 이미지를 HTML에 직접 삽입합니다.

4. 이미지 적응

웹 페이지 제작 과정에서 공통적으로 필요한 것은 다양한 장치와 화면에서 더 나은 디스플레이 효과를 가질 수 있도록 이미지 크기를 적응시키는 것입니다. 일반적으로 사용되는 방법에는 CSS를 사용하여 너비, 높이 및 최대 너비와 같은 속성을 설정하는 것이 포함됩니다.

1. CSS를 사용하여 너비와 높이를 설정하세요

CSS의 너비와 높이 속성은 각각 이미지의 너비와 높이를 설정할 수 있습니다. 예:

<style>
    img {
        width: 100%;
        height: auto;
    }
</style>

그중 너비를 100%로 설정하면 너비가 사용 가능한 공간에 따라 이미지가 증가합니다. 높이를 자동으로 설정하면 높이가 원래 비율을 유지하면서 너비 비율에 따라 자동으로 조정됩니다.

2. CSS를 사용하여 최대 너비 설정

최대 너비 속성을 사용하면 이미지가 특정 너비를 초과할 때 비례적으로 이미지가 자동으로 줄어들지만 원래 크기보다 작아지지는 않습니다. 예:

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>

그중 max-width는 100%로 설정됩니다. 이는 이미지의 최대 너비가 사용 가능한 공간을 초과하지 않으며 높이가 자동으로 설정된다는 의미입니다. 높이는 원래 비율을 유지하면서 너비 비율에 따라 자동으로 조정됩니다.

간단히 말하면, 웹 페이지에 이미지를 추가할 때 이미지 경로, 이미지 설명, 이미지 크기 및 조정 등을 고려해야 합니다. 기본 구문과 일반적인 방법을 익히면 HTML의 img 태그를 유연하게 사용하여 웹 페이지를 더욱 다채롭게 만들 수 있습니다.

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