03. 이미지 태그, 하이퍼링크

 

1. 이미지 종류

 

 

 

• 비트맵 이미지

- 픽셀들이 모여 만들어진 정보의 집합 - 레스터 이미지라고 부름 - 픽셀 단위로 화면에 랜더링 - 그림판, 포토샵 등 툴로 편집 - bmp, jpg(jpeg), gif, png, webp....

 

• 벡터 이미지

- 수학적 정보의 형태들이 만들어내는 결과물 - 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음 - 확대, 축소를 해도 이미지가 깨지지 않음 - 일러스트 같은 툴로 편집

 

 

 

• jpg(jpeg)

- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용 - 가장 널리 쓰인는 이미지 포멧 - 손실 압축(복사할 수록 알고리즘이 망가짐) - 표현색상(24 비트, 약 16000a만 색상)이 뛰어나 고해상도 표시장치에 적합

 

 

• gif

- 이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일 - 여러 장의 이미지를 한 개의 파일에 저장할 수 있음 - 8 바이트(256 색상) 컬러만 지원 - 비손실 압축

 

 

• png

- gif의 대체 포맷으로 개발 - 8비트, 25비트 컬러 이미지 처리 - 알파 채널 : 지원 -  w2c 권장포멧

 

 

• webp

- 구글에서 만든 가장 완벽한 포맷 - jpg, png, gif를 모두 대체할 수 있는 포맷 - 알파 채널 지원 (손실, 비손실)

 

 

 

2. 이미지  태그

 

• 이미지 태그

<img src = '파일경로' alt = '문자열'>

1. 절대 경로 (물리적 경로)    - 파일경로:  C:\Sarr\KDT\Web\HTML\Day1\rain1.png  ------> 실제로 사용하지 않음   - URL: https://www.tcpschool.com/img/logo.png 2. 상대 경로   - 이미지가 HTML 문서와 같은 디렉토리에 있는 경우      < img src = '파일명' or './파일명' >   - 이미지가 하위 디렉토리 (ex.img)에 있는 경우      < img src = 'img/파일명' or './img/파일명' >   - 이미지가 상위 디렉토리에 있는 경우      <img src ='../파일명' or './../파일명'>   - 이미지가 상위 디렉토리의 하위 디렉토리(images)에 있는 경우      <img src ='../images/파일명' or './../images/파일명'>

 

3. 하이퍼링크

다른 페이지 또는 사이트로 연결되는 링크(문자 또는 이미지)

 

 

• 기본형식

<a href='경로'> 링크의 사용할 문자 또는 이미지 </a>

 

• 절대경로 (문자 링크)

<a href='https://www.koreaisacademy.com/'> 코리아IT아카데미 </a>

 

• 절대경로 (이미지 링크)

<a href='https://www.tcpschool.com/'>     <img scr='https://www.tcpschool.com/img/logo.png' alt = 'TCP스쿨로고'>     </a>

 

 

• 상대경로 (같은 디렉토리)

<a href="./1_mywebsite.html">내 첫 웹페이지</a>

 

• 상대경로 (하위 디렉토리)

<a href="./sub/subpage.html">서브페이지</a>