HTML에 이미지를 삽입하는 방법(두 가지 방법)

HTML(Hypertext Markup Language)은 웹 페이지의 기본 언어 중 하나입니다. 정적 페이지를 구축하든, 동적 페이지를 구축하든 HTML은 없어서는 안 될 부분입니다. 그림은 웹 페이지를 만들 때 매우 중요하고 일반적으로 사용되는 요소 중 하나이므로 HTML에서 그림을 소개하는 방법을 알아야 합니다.

HTML은 .gif, .jpeg, .png 및 기타 형식과 같은 여러 유형의 이미지를 도입할 수 있습니다. 이미지를 도입하기 전에 모든 이미지 파일을 저장할 HTML 문서용 이미지 폴더를 만들어야 합니다. 일반적으로 그림 폴더는 HTML 파일이 쉽게 액세스할 수 있도록 HTML 파일과 동일한 디렉토리에 배치됩니다.

HTML에서는 다음 두 가지 방법을 사용하여 웹 페이지에 이미지를 참조할 수 있습니다.

1. 태그에 이미지 사용

가장 일반적인 방법은 HTML 문서에서 img(이미지) 태그를 사용하는 것이며 매우 간단하고 사용하기 쉽습니다. 태그의 기본 구문은 다음과 같습니다.

<img src="image filename">

그 중 src 속성은 브라우저에게 이미지를 로드할 위치를 알려주는 데 사용되며, image filename은 이미지 파일의 이름입니다(상대 경로는 다음과 같아야 합니다). 여기에는 절대 경로가 아님).

예를 들어, 이미지 폴더와 HTML 파일이 동일한 디렉토리에 있고 "example.gif"라는 이미지를 웹 페이지에 도입하려는 경우 코드는 다음과 같습니다.

<img src="example.gif">

이 위치는 다음과 같습니다. "example.gif"라는 이미지가 페이지에 표시됩니다.

다른 웹 페이지에 대한 링크 허용, 제목 추가, 너비 및 높이 변경 등과 같은 이미지에 더 많은 속성을 추가하려면 다음 태그를 사용할 수 있습니다.

<img src="image filename" alt="Image title" title="Image tooltip" height="number" width="number" border="number" align="left/right/center">

그 중에서 alt 속성 이미지 이름을 추가하는 데 사용됩니다. 제목 속성은 프롬프트 텍스트를 추가하는 데 사용되며, 테두리 속성은 이미지 크기를 변경하는 데 사용됩니다. 테두리 너비; 정렬 속성은 이미지와 다른 텍스트의 정렬을 제어하는 ​​데 사용됩니다.

예를 들어 너비가 200픽셀이고 높이가 100픽셀인 이미지를 추가하고 이를 다른 페이지에 연결하려는 경우 코드는 다음과 같습니다.

<a href="https://www.example.com/"><img src="example.gif" alt="Example Image" title="Click this image to go to example.com" height="100" width="200" border="1" align="center"></a>

2. 다음을 사용하여 백그라운드에서 이미지를 만듭니다. CSS

또 다른 일반적인 방법인 CSS(Cascading Style Sheets)를 사용하여 웹 페이지 배경에 그림을 추가할 수도 있습니다. 태그와 달리 이 방법은 이미지를 별도의 요소가 아닌 전체 웹페이지의 배경으로 사용합니다.

다음은 CSS를 사용하여 배경에 이미지를 추가하는 방법입니다.

body {
    background-image: url('image filename');
}

그 중 background-image 속성은 배경에 표시해야 하는 이미지를 브라우저에 알리는 데 사용되며 다른 옵션도 있을 수 있습니다. , 배경색 및 배경 이미지 설정 등.

예를 들어, 웹페이지 배경에 "example.gif"라는 이미지를 표시하고 이를 가로 및 세로로 반복하게 하려면 코드는 다음과 같습니다.

body {
    background-image: url('example.gif');
    background-repeat: repeat;
}

이렇게 하면 배경이 다음과 같이 됩니다. 전체 페이지가 "example.gif" 이미지로 채워집니다.

이 방법을 사용할 때는 이미지가 다양한 유형의 장치에서 올바르게 표시되도록 이미지 크기에 특별한 주의를 기울여야 합니다.

요약

태그에 이미지를 사용하든, CSS를 사용하여 배경에 이미지를 추가하든, HTML은 이미지를 소개하는 다양한 방법을 제공합니다. 이러한 방법을 사용할 때 이미지가 웹 페이지에 올바르게 표시될 수 있도록 이미지의 크기, 경로 및 형식에 주의를 기울여야 합니다. HTML의 이미지를 사용하면 웹 페이지에 개인화된 요소를 쉽게 추가하여 웹 페이지를 더욱 풍부하고 매력적으로 만들 수 있습니다.

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