웹페이지에 이미지를 표시하는 방법은 img 태그에 src 속성에 이미지의 위치와 파일명을 정확히 입력해 주면 된다. 이미지의 위치는 같은 서버 공간에 있을 수도 전혀 다른 폴더 위치에 있을 수도 있다. 또는 전혀 다른 외부 url 에 위치할 수도 있다. 상황별로 이미지 위치를 파악하는 것이 좋겠지만, 자주 사용되는 것은 따로 있다.
html img 태그 이미지 경로 지정 방법
Specifies img src path
웹페이지 제작시 이미지를 지정하는 방법은 통일하는 방법이 좋지만 서버의 공간도 고려해 줘야 한다. 그렇기에 여러가지 방법들도 있다.
필수적인 이미지들은 서버에 저장하여 사용하면 되지만 여의치 않을 경우 다른 공간에 넣고 사용해 줄 필요가 있다.
그렇기에 이미지를 웹페이지에 표시해 주는 방법은 img 태그를 사용하는 방법이고, 이미지를 지정하는 방법은 src 속성을 사용하면 된다.
만약, 다른 위치에 있는 이미지 주소를 사용할 경우 전체 url 을 넣어줘야 하지만 다른 폴더의 이미지를 입력하는 경우는 상대경로를 이용하면 된다.
이미지 지정 방법
웹페이지에 이미지를 표시하기 위해 이미지 태그인 img 의 src 속성을 지정하는 방법은 4가지 정도 소개해 본다.
여기서 필수로 사용하는 부분은 몇 가지 없을 것이지만 상황에 따라 몇가지로 분류했다.
먼저 img 태그에 사용할 src 속성의 이미지 경로를 파악하기 전에 폴더구조를 살펴보도록 한다.
아래는 이미지가 어디에 있느냐에 따른 4가지 경우이다.
- 웹페이지와 같은 위치해 있는 경우
- 전혀 다른 url 에 위치해 있는 경우
- 웹페이지 하단의 폴더에 위치해 있는 경우
- url은 같지만, 전혀 다른 폴더에 있는 경우
아래는 위의 상황에 맞는 ima 태그의 src 속성을 나타낸다.
<img src="파일명" alt="대체텍스트" />
<img src="https://URL_파일명" alt="대체텍스트" />
<img src="/경로명_파일명" alt="대체텍스트" />
<img src="경로명_파일명" alt="대체텍스트" />샘플코드
위의 내용을 사용하여 웹페이지에 표시할 이미지에 대한 html 예제를 만들어 본다.
상황별로 4가지를 언급했으며, 위의 상황을 위한 폴더 구조는 다음과 같다.
웹페이지와 이미지의 위치가 같을 경우는 이미지 파일명만 src 속성에 정확히 입력해 주면 된다.
다른 url 의 위치에 있는 이미지의 경우는 이미지의 전체 url 경로를 src 속성에 입력해 주면 된다.
웹페이지 하단의 위치에 있는 경우 하단의 폴더명과 이미지 파일명을 src 속성에 입력해 주면 된다.
같은 url 을 가지고 있지만 전혀 다른 위치의 경우 / 과 함께 폴더명과 파일명을 src 속성에 입력해 주면 된다.
경로에 / 표시가 있고 없고의 차이는 url 의 상대경로를 인식하는데 있다.
/ 표시가 없다면 웹페이지가 존재하는 위치부터 경로를 인식한다.
/ 표시가 있다면 url 의 root 위치부터 경로를 인식한다.
코드를 보자.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
img { width:300px; }
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<img src="veloster.jpg" alt="현대자동차 벨로스터" />
<img src="https://i.pinimg.com/564x/f8/1a/82/f81a826a2ac443fa7bd357efcba5c031.jpg" alt="현대자동차 코나" />
</div>
<div>
<img src="/images/santafe.jpg" alt="현대자동차 싼타페" />
<img src="images/avante.jpg" alt="현대자동차 아반떼" />
</div>
</body>
<!-- // -->
</html>
<!-- // -->위에서 언급한 4가지 상황에 대해 이미지를 표시하고 있다.
/ 표시가 있다면 url 위치부터 인식하지만, / 표시가 없다면 웹페이지가 위치한 경로부터 인식한다.
그런 점에서 위에서 언급한 상황에서 2번째 경우와 3번째 경우가 가장 많이 사용하게 될 것이다.
결과 화면을 보자.
'programming > web' 카테고리의 다른 글
| html 이미지 맵 사용 using html image map (0) | 2022.06.03 |
|---|---|
| html 이미지에 링크 연결 하기 how to link image to link in html (0) | 2022.06.01 |
| html 이미지 크기 조절 하기 changing image size in html (0) | 2022.05.27 |
| html img 태그 사용 화면에 이미지 표시 using html image tag (0) | 2022.05.23 |
| html 링크 태그 북마크 처럼 사용하기 using a link tag bookmark (0) | 2022.05.19 |
댓글