이미지와 하이퍼링크

글이나 이미지를 클릭하면 다른 문서(page)나 사이트로 넘어가도록 링크를 거는 것을 하이퍼링크라고 한다.

 

 

이미지

웹에서 사용할 수 있는 이미지 파일 형식

파일 형식	설명
GIF(Graphic Interchange Form)	표시할 수 있는 색상 수가 최대 256가지뿐이지만 다른 이미지 파일 형식에 비해 파일 크기가 작기 때문에 아이콘이나 불릿 등 작은 이미지에 주로 사용합니다. 투명한 배경을 만들 수 있고, frame기록이 가능하기 때문에 움직이는 이미지를 만들 수 있다는 장점이 있습니다.
JPG/JPEG(Joint Photographic Experts Group)	사진을 위해 개발된 형식으로 GIF보다 다양한 색상과 명암을 표현할 수 있습니다. 저장을 반복하다보면 화질이 떨어질 수 도 있습니다.(디지털 풍화 발생가능)
PNG(Portable Network Graphics)	투명 배경을 만들어서 다양한 색상도 표현할 수 있으며 네트워크용으로 개발되었기 때문에 최근 많이 사용한다.

 

 

 

웹문서에 이미지나 설명을 넣는 태그

기본형	기능	설명
<img src="경로" [속성="값"]	이미지 삽입	웹 문서에 이미지를 삽입할때 사용하는 태그 웹 상의 링크를 복사해 이미지 경로 지정도 가능하며 alt로 이미지 속성을 설명해주는 대체 텍스트를 적을 수 있고 width, height로 이미지의 폭과 높이를 조절할 수 있다.
<figure> 요소 </figure>	설명붙일 대상 지정	설명해야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오같은 멀티미디어 파일을 비롯해 사진이나 표, 소스코드 등 웹 문서안에서 한 단위가 되는 요소를 묶을 때 사용한다.
<figcaption> 설명 글 </figcaption>	설명 글 붙이기	설명글을 붙일 수 있는 대상은 이미지, 오디오, 비디오, 텍스트 단락, 표가될 수 있으며 여러 개의 이미지나 미디어파일에 하나의 설명글을 붙일 수 있다.

 

 

 

링크 만들기

텍스트를 클릭해 해당 페이지로 넘어가거나 이미지에 링크를 걸 수 있으며 열려있는 브라우저내에서 새창을 띄울 수도 있다.

기본형	설명
<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a> <a href="링크할 주소" [속성="속성 값"]><img src="이미지 경로"></a>	텍스트나 이미지에 링크를 건다.
<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그> <a href="#앵커 이름"> 텍스트 또는 이미지 </a>	한 페이지 안에서 점프한다.  우선 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만들고 각각 다름을 지정한 뒤 <a>와 herf속성을 사용해 이동한다.
<map name="맵이름">         <area>         <area>         ......     </map> <img src="이미지 파일" usemap="#맵 이름">	하나의 이미지에 여러 링크를 건다. map태그를 이용해서 이미지맵을 만들고 <img> 태그에서 usemap속성으로 이미지 맵을 지정합니다.

 

<a> 태그 안에 사용할 수 있는 주요 속성

속성	설명
href	링크한 문서나 사이트의 주소를 입력한다.
target	링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정한다.
download	링크한 대상을 다운로드한다.
rel	현재 문서와 링크한 문서의 관계를 알려준다.
hreflang	링크한 문서의 언어를 지정한다
type	링크한 문서의 파일 유형을 알려준다.

 

 

target의 속성 - 새탭에서 링크 열기

속성 값	설명
_blank	링크 내용이 새 창이나 새 탭에서 열립니다.
_self	target 속성의 기본 값으로 링크가 있는 화면에서 열립니다.
_parent	프레임을 사용했을 때 링크 내용을 부모 프레임에 표시합니다.
_top	프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시합니다.

 

사용할 수 있는 속성

속성	설명
alt	대체 텍스트를 지정합니다
coords	링크로 사용될 영역을 시작 좌표와 끝 좌표를 이용해 지정한다.
download	링크를 클릭했을 때 링크 문서를 다운로드합니다.
href	링크 문서(사이트) 경로를 지정합니다.
media	링크 문서(사이트)를 어떤 미디어에 최적화시킬지 지정합니다.
rel	현재 문서와 링크 문서 사이의 관계를 지정합니다.	속성 값	lternate, bookmark, help, license, next, notfollow, noreferer, prefetch, prev, search, tag
shape	링크로 사용할 영역의 형태를 지정합니다.	속성 값	default, rect, circle, poly
media	링크를 표시할 대상을 지정합니다.	속성 값	_blank, _parent, _self, _top, 프레임 이름
target	링크 문서의 미디어 유형을 지정합니다.

 

 

SVG 이미지

브라우저에서 svg파일을 지원하게 되면서 아이콘이나 로고 이미지에 SVG 이미지 파일 형식이 많이 사용되고 있습니다.

SVG 파일 형식은 같은 이미지를 작게 표시하거나 크게 표현해야 할 때 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지라고 하는데, 그런 이미지를 SVG라고 합니다.

SVG이미지는 어도비(Adobe)일러스트레이터(Illustrator) 프로그램에서 벡터 이미지를 만든 후 svg파일로 저장해 만듭니다.