[HTML/CSS] 이미지 삽입 / 절대 경로와 상대 경로

이미지 삽입하기

 

웹에서 주로 사용하는 이미지 파일 형식

파일 형식	설명
JPG / JPEG	사진을 위해 개발된 형식으로 gif보다 다양한 색과 명암표현 저장 시 압축되며 반복저장하면 화질이 떨어질 수 있음
GIF	최대 256색 표현, 투명한 배경, 움직이는 이미지 제작가능
PNG	투명 배경, 다양한 색 표현 (최근 많이 사용)

 

img 태그

기본 구성 예시

<img src=“이미지의 경로 지정” alt=“대체 텍스트” >

 

img 연결 방식

1. CDN (Contents Delivery Network) 방식 불러오기

사이트에서 이미지를 선택 후 이미지 소스를 복사해 넣는 방식

<img src="이미지 주소" alt="대체 텍스트">

 

2. 로컬 컴퓨터 이미지 불러오기

프로젝트 폴더안에 image 폴더를 생성해 다운받은 이미지를 넣고 경로를 작성해 연결하는 방식

<img src="./이미지 경로" alt="대체 텍스트">
<!-- ./ 이 중요! --!>

TIP!
폴더 하나를 프로젝트 단위로 생각
.의 갯수만큼 위의 폴더로 이동

 

CDN 방식과 로컬 방식의 장단점

	CDN 방식	로컬 방식
장점	웹 사이트 데이터 용량을 줄임 이미지를 가져오기 편함	이미지의 로드가 빠름
단점	인터넷의 연결이 안되면 안 보이며, 속도에 따라 느릴 수 있음	이미지의 크기만큼 용량을 차지함

 

3. 가상 이미지 사용 방식

시안 이미지 작성 시 중로 사용

<img src="http://placehold.it/100x100 (사진사이즈)" alt="대체 텍스트">

 

4. 투명 이미지 사용 방식

.png 이미지 사용

TIP!
이미지 검색 : 이미지.png

<img src="./이미지 경로 .png" alt="대체 텍스트">

 

5. 벡터 이미지 방식

.svg (scalable vector graphics) 이미지 사용

일러스트레이터와 같은 벡터 방식으로 이미지를 확대, 축소 해도 해상도가 깨지지 않음

<img src="./이미지 경로 .svg" alt="대체 텍스트">

 

img 관련 속성 / 태그

속성	효과	기타
src (source)	이미지 경로 지정 웹문서의 파일 위치 기준	웹의 중요 원리 데이터를 가져오는 것이 아니라 참조할 뿐  src 속성에 경로를 잘못 지정하는 경우 웹 문서에 표시되지 않음
alt (alternative)	대체 텍스트, 낭독기에서 읽어주는 텍스트 상대 서버에 연결되지 않을 경우 이미지 대신 보여줌	웹 접근성
width, height	크기 조절	(기본 단위 :px) width만 작성 시, height는 원본비율로 자동 설정 됨.
figure, figcaption 태그	이미지에 설명 글 붙이기	Img 밖에 사용
usemap	이미지와 맵 사이의 관계를 설정	하나의 이미지에서 클릭 위치에 따라 이동하는 경로가 달라짐
map 태그	map 태그는 하나 이상의 area 태그를 가짐
area  태그	버튼 역할을 함

 

 

---

 

절대 경로 와 상대 경로

파일을 불러오기 위해서는 경로를 알아야 함

	절대 경로	상대 경로
정의	변치 않는 주소 흔히 아는 http:// 로 시작하는 주소	작업 파일을 기준으로 연결하는 파일 경로
예시	네이버, 구글	./common.css

 

 

위와 같이 불러오기, 연결 관련 태그들은 경로가 중요!!
경로가 잘못 되거나 오타가 있을 시 오류가 나므로 복붙이나 자동완성을 사용하는 것이 좋음

 

---

 

관련 포스트

폰트어썸 (Font Awesome) 사용하기

[HTML/CSS] 폰트어썸 (Font Awesome) 사용하기

 

---

 

참조 자료

https://www.w3schools.com/html/html_images.asp