◆ 이미지 태그(img tag)
1) 이미지를 화면에 표시하는 역할이다.
2) 종료 태그를 사용하지 않는다.
3) 태그만으로는 이미지를 표시할 수 없다.
4) 태그에 속성(attribute)을 추가하여 정보를 제공해야 한다.
- 노란점이 있는 속성은 사용을 권장하는 것이다.
- src는 이미지의 위치이다. (이미지 주소 복사를 붙여넣기.)
- 이미지의 크기를 폭(width)과 높이(height)로 설정할 수 있다.
- 기본 단위는 픽셀(px)로 설정이 된다.
- 비율(%)로 설정도 가능 - 내가 가진 이미지를 src에 경로로 작성할 수 있다.
- 이미지의 위치는 src/main/resources/static 에 넣어 두어야 한다.
◆ 더미 이미지(dummy image)
- 이미지가 완성되기 전까지 임시로 사용할 이미지
- 제공하는 사이트가 있다.
- https://placeimg.com //이미지 더미 사이트 : 6월 30일날 사이트 폐쇄된다.
- https://placeholder.com //이미지 크기 더미 사이트
- img src에 https://via.placeholder.com/폭x높이?text=글자
◆ alt=""
-
이미지로 된 콘텐츠를 텍스트로 읽을 수 있게 개발적으로 처리해 주는 것이다.
-
시각장애, 운동장애 분들을 위한 대체 텍스트이다.
-
https://nuli.navercorp.com/ 사이트를 통해 체험으로 이해 해볼 수 있다.
<%-- 더미 이미지에서 텍스트가 나온다.(단, 한글은 사용 불가) --%> <img src="https://via.placeholder.com/100x100&text=kakao">
◆ a 태그(anchor 태그)
- 클릭 시 다른 대상으로 이동하도록 하는 태그
- 글자나 이미지 등 어떤 내용에 적용이 가능하다.
- href 속성으로 연결 대상을 지정한다.
- ex)
<a href="update">개인정보 변경</a>
◆ JSP 이미지 출력
- 저장된 이미지를 페이지의 출력하는 방법 - img01
1) 구글에서 filetype:gif 카카오라이언 검색
ex) filetype:jpg / filetype:png / filetype:gif 등
-
filetype은 확장자를 의미한다.
2) 이미지 우클릭 -> 이미지를 다른 이름으로 저장 클릭
3) 저장된 이미지를
프로젝트 src/main/resources 폴더
-> static 폴더 에서
-> 이미지 파일 붙여넣기(Copy files)<img width="200" src="http://localhost:8080/lion.gif"> //기본 주소 <img width="200" src="//localhost:8080/lion.gif"> <%--http/https가 자동으로 생성된다.--%> <img width="200" src="/lion.gif"> <%--서버와 포트는 이미지가 DB에 저장되어 있을 경우 생략 가능하다.--%>
- 이미지 주소를 복사하여 페이지에 출력하는 방법
- 구글에서 이미지를 검색
-> 이미지 우클릭 후 이미지 주소 복사하기.
-> 복사한 주소를 붙여넣어 주기.
◆ jpg 와 png
1) jpg
- 파일 압축이 뛰어나 용량이 작다.
- 화질의 선명도가 낮다.
- 투명배경이 안되는 단점이 있다.
- 손실압축으로 원본 자체가 훼손된다.
- 사람의 눈에 거슬리지 않을 정도로 원본을 훼손해 압축 효과를 극대화 시키는 알고리즘입니다.
- 실사 이미지 같이 자연스럽고 복잡한 이미지에 사용하기 적합하다.
2) png
- 파일 압축이 뛰어나지 않아 용량이 크다.
- 화질의 선명도가 높다.
- 투명배경을 사용할 수 있어 누끼가 가능하다.
- 글자가 많은 이미지일 경우 폰트에 약간의 블러효과가 생기는 현상을 위해 사용한다.
- 비손실압축 방식이라 원본이 훼손이 되지 않는다.
- 깨끗한 이미지를 얻기 위해 인공적으로 만든 디자인일 경우 사용하기 적합하다.
◆ 랜더링
- 서버에서 보낸 코드를 클라이언트에서 이미지로 보여주는 것
Backend Developer