[ HTML ] <img> 태그

환경 : Spring Tools Suite4

 

[ <img> 태그 ] 

• 특정 이미지를 문서에 삽입할 수 있다. 

[ <img> 태그 속성 ]

- src 속성

• 보여주고자 하는 이미지의 주소값(경로)을 넣는 속성

- alt 속성

• 이미지가 표시되지 못할 경우 나타날 문자열 값
• 접근성 향상을 위한 도움말
• 페이지에서 이미지에 마우스를 올려놓았을 때 이미지에 대한 설명을 볼 수 있도록 표현할 수 있음
• 검색엔진에서는 그림 정보를 읽는 방법으로 alt 속성값을 사용
• 특히!! 시각 장애인들이 이용할 수 있는 스크린 리더 소프트웨어는 alt 값을 음성으로 변환해준다. 
• 시각장애인에 대한 이해는 NULI( https://nax.naver.com/blind/intro ) 에서 할 수 있다.

- width / height 속성

• 이미지의 가로 / 세로 길이를 지정할 수 있다.
• width : 이미지 폭(px)
• height : 이미지 높이(px)
• 대부분의 이미지는 폭만 지정해주어도 된다. (이미지 비율에 의해 자동 설정됨)

---

[ 사용 예 ]

 - HtmlController.java

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HtmlController {
	@RequestMapping("/image")
	public String image() {
		return "/WEB-INF/views/image.jsp";
	}
}

 

 - image.jsp 전체코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<h1>이미지 실습</h1>

<%-- 외부 이미지를 가져오는 예 --%>
<img width="550" src="https://t1.daumcdn.net/cfile/tistory/13307A3850630DB130">

<hr>

<img alt="리락쿠마 이미지" width="30%" src="https://i.pinimg.com/736x/9a/75/11/9a75111a46637626774a35834b5e2265.jpg">

<hr>

<%-- 이미지를 프로젝트에 보관하고, 그 이미지 파일을 가져오는 예 --%>
<img width="400" src="/bg.jpg">

   

   (이미지를 프로젝트에 삽입 시켜야 하는 이유)

   (+) 프로젝트 외부 위치에 있는 이미지는 보안상의 이유로 src에 설정할 수 없다.

           → 따라서 이미지를 프로젝트에 포함시키는 것이 좋다 (이미지 포함시킬 주소 : src/main/resources/static )

           → 이미지를 해당 위치에 포함하면 주소가 파일명으로 자동 생성된다. ( http://localhost:8080/파일명 )

                                                                                                                                   └ 이 주소로도 접속 가능

    (+) 이런 이미지를 src 속성에 사용하는 방법은 아래와 같다.

<%-- 이미지를 프로젝트에 보관하고, 그 이미지 파일을 가져오는 예 --%>

<%-- 전체 주소로 이미지 부르기 --%>
<img width="400" src = "http://localhost:8080/bg.jpg">

<%-- 프로토콜 생략 --%>
<img width="400" src = "//localhost:8080/bg.jpg">

<%-- host/port 생략 --%>
<%-- 절대경로(absolute path) --%>
<img width="400" src = "/bg.jpg">

<%-- 상대경로(relative path) --%>
<img width="400" src="bg.jpg">

   (+) 같은 서버, 같은 프로젝트에 있기 때문에 주소를 생략할 수 있다.

   (+) 절대 경로(absolute path) : 한결같은 위치

         상대 경로(relative path) : 현재 페이지에 따라 다른 위치를 가리킴

 

 

   - 출력결과

 

 

 

 

 

 

 

 

개인 공부 기록용입니다:)