폴더에서 HTML로 이미지 추가

1. <img> 태그를 사용하여 HTML의 폴더에서 이미지 추가
2. CSS background-image 속성을 사용하여 HTML의 폴더에서 이미지 추가

이 문서에서는 HTML의 폴더에서 이미지를 추가하는 다양한 방법을 살펴봅니다.

<img> 태그를 사용하여 HTML의 폴더에서 이미지 추가

시스템에 로컬로 저장된 이미지가 있는 경우 쉽게 HTML에 추가할 수 있습니다. <img> 태그를 사용하고 src 속성에서 이미지의 경로를 지정할 수 있습니다.

단계는 간단하지만 때때로 이미지가 웹 페이지에 표시되지 않습니다. 이미지 경로가 잘못되어 브라우저에서 이미지를 찾을 수 없기 때문에 문제가 주로 발생합니다.

따라서 src 속성에 올바른 이미지 경로를 설정해야 합니다.

다음 구조를 생각해 봅시다.

HTML_project
├── image1.jpg
└── index.html

여기서 HTML 파일과 이미지는 같은 디렉토리에 있습니다.

예를 들어 <img> 태그를 생성하고 image1.jpg 경로를 작성하여 이미지를 삽입합니다. alt 속성을 사용하여 대체 텍스트를 추가할 수 있습니다.

경우에 따라 이미지가 표시되지 않을 수 있습니다. 따라서 사용자에게 이미지의 내용을 알리는 것이 좋습니다.

이미지가 표시될 때 대체 텍스트는 표시되지 않습니다. <img>에는 닫는 태그가 없습니다.

예제 코드:

<img src="image1.jpg" alt="Mango Tree">

위의 예에서 이미지와 HTML 파일은 동일한 경로에 있습니다. 따라서 src 속성에는 파일 이름만 적었습니다.

이미지가 디렉토리 안에 보관되는 또 다른 시나리오를 생각해 봅시다.

HTML_project
├── images
│   └── image1.jpg
└── index.html

이러한 구조에 대해 두 가지 방법으로 이미지의 경로를 설정할 수 있습니다.

예제 코드:

<img src="images/image1.jpg" alt="Mango Tree">

여기에서 주어진 경로는 index.html이 있는 동일한 디렉토리에서 images라는 디렉토리를 찾도록 브라우저에 지시합니다. 다음으로 브라우저는 images 디렉토리를 찾고 그 안에 있는 image1.jpg를 찾습니다.

따라서 이미지가 브라우저에 표시됩니다.

예제 코드:

<img src="./images/image1.jpg" alt="Mango Tree">

여기에서 경로 시작 부분의 ./는 index.html 위치인 HTML_project에서 현재 디렉토리를 나타냅니다. 그런 다음 images 디렉토리를 찾고 image1.jpg가 웹 페이지에 추가됩니다.

CSS background-image 속성을 사용하여 HTML의 폴더에서 이미지 추가

이 방법은 HTML에 이미지를 추가하는 다른 방법을 설명합니다. 그러나 이미지 파일 경로 규칙은 첫 번째 방법과 유사합니다.

유일한 차이점은 <img> 태그 대신 CSS background-image 속성을 사용한다는 것입니다.

다음 구조에 대해 CSS를 사용하여 이미지를 업로드하는 코드를 작성해 보겠습니다.

HTML_project
├── image1.jpg
└── index.html

예제 코드:

<div class = "div1" style="background-image: url('image1.jpg'); height: 200px; width: 200px;">

위의 코드 스니펫은 높이와 너비가 200px인 배경 이미지를 생성합니다.

마찬가지로 다음과 같은 구조를 생각해 봅시다.

HTML_project
├── html
│   └── index.html
└── images
    └── image1.jpg

예제 코드:

<div class = "div1" style="background-image: url('../images/image1.jpg'); height: 200px; width: 200px;">

여기서 ../는 디렉토리 트리에서 한 단계 뒤로 이동하는 것을 의미합니다. 즉, images 디렉토리에서 HTML_project 디렉토리로 이동했으며 여기서 images 디렉토리와 image1.jpg 파일을 찾을 수 있습니다.

마지막으로 이미지가 표시됩니다.

올바른 이미지 경로와 함께 HTML 및 CSS를 사용하여 HTML의 폴더에서 이미지를 추가하는 방법입니다.