[html] 이미지 태그와 링크 태그(<img>, <a>)

 

 

 

 

웹페이지에 이미지를 넣기 위해선, 이미지 파일과 <img> 태그가 필요합니다. 웹페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서 화질은 좋아야 하기 때문에 파일 형식이 제한됩니다.

 

 

파일 형식	설명
GIF	표시할 수 있는 색상 수는 최대 256가지, 다른 이미지 파일 형식에 비해 파일 크기가 작아 아이콘이나 불릿 등 작은 이미지에 주로 사용, 투명 배경 사용 가능, 움직이는 이미지 가능
JPG/JPEG	사진을 위해 개발된 형식으로 다양한 색상과 명암 표현 가능, 저장 반복하면 화질 안 좋아짐
PNG	투명 배경 사용 가능, 다양한 색상 표현 가능, 네트워크용으로 개발됨

 

 

 

 

 

(1) 이미지를 삽입하는 <img> 태그

 

: 웹 문서에 이미지를 삽입할 때 사용합니다. 기본형은 <img src="경로">입니다. 닫는 태그 없습니다.

 

- src 속성 : 이미지 파일 경로로, 웹 문서 파일 위치를 기준으로 이미지 경로를 지정합니다. 웹사이트에 있는 이미지도 주소만 알아낸다면 사용 가능합니다. 필수 속성입니다.

- alt 속성 : 이미지를 설명하는 대체텍스트를 넣는 부분입니다. 화면 낭독기가 읽어주며, 이미지를 표시할 수 없는 경우 표시됩니다.

-width, height 속성 : 이미지 크기를 조정합니다. 사용하지 않으면 원래 이미지 크기대로 표시됩니다. 화면에 표시하는 이미지 크기를 조정하는 것이지 이미지 파일의 용량이 바뀌는 건 아닙니다. 보통 css파일에서 설정합니다.

 

앞으로 나올 코드들은 작성하는 html이 들어있는 프로젝트에 images폴더를 만들어 이미지를 넣어준 뒤 작성해야 합니다.

<img src="images/helloImg.jpg" width="250" height="250" alt="이미지 띄우기 연습">

 

 

 

(2) 이미지에 설명글을 붙이는 <figure>, <figcaption> 태그

 

: <figure>태그는 설명글을 붙일 대상을 지정합니다. 웹 문서 안에서 한 단위로 묶을 요소들을 감싸는 태그입니다.

: <figcaption>태그는 이미지를 설명하는 대체 텍스트입니다.

<figure style="border: 1px solid black">
	<img src="images/htmlImg.jpg" alt="html에 이미지 올리기">
	<figcaption>html에 이미지를 올렸다.</figcaption>
</figure>

웹페이지 출력 화면

 

 

 

(3) 링크를 다는 <a> 태그

 

: 다른 문서나 사이트로 연결해주는 하이퍼링크 태그입니다. 외부 사이트나 외부 페이지로도 연결합니다.

기본형은 아래와 같습니다.

<a href="링크할 주소">텍스트</a>
<a href="링크할 주소"><img src="이미지 파일 경로"></a>

반드시 href 속성을 작성해 어디로 연결할지 알려줘야 합니다.

 

<a> 태그 속성은 아래 표에 정리되어 있습니다.

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

 

 

<a> 태그의 속성 중 target에 대해 더 자세히 알아보겠습니다. target 속성은 링크를 현재 창에서 열지, 새 창에서 열지 등을 결정한다고 설명드렸는데요. 사용할 수 있는 값은 다음과 같습니다.

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

<h1>다음 텍스트 링크</h1>

<p><a href="http://www.daum.net">다음으로 가기(현재화면)</a></p>
<p><a href="http://www.daum.net" target="_blank">다음으로 가기(새 창 또는 새 탭)</a></p>

 

 

 

 

(3) 한 페이지 안에서 점프하는 '앵커' 

 

: 현재 화면에서 링크를 클릭해 관련 내용이 있는 부분으로 위치를 옮길 때 사용합니다. 이동하고 싶은 위치마나 id 속성을 이용해 행커를 만들고, <a>태그의 href 속성을 사용해 해당 id를 링크합니다. id속성은 '#'을 붙여 표시합니다.

<태그 id="앵커이름"> 텍스트, 이미지 등 </태그>
<a href="#앵커이름"> 텍스트, 이미지 등 </a>

<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 때, 필요한 곳마다 문서 안에 이름을 붙여놓고 
그 위치로 한번에 이동하는 링크를 만드는 앵커를 활용할 수 있습니다.</p>

<ul id="menu">
	<li><a href="#content1">메뉴1</a></li>
	<li><a href="#content2">메뉴2</a></li>
	<li><a href="#content3">메뉴3</a></li>
</ul>

<h2 id="content1">CONTENT 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Aliquam distinctio quos repellendus? 
Exercitationem alias, dolores illo non laboriosam laborum!</p>

<h2 id="content2">CONTENT 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Aliquam distinctio quos repellendus? 
Exercitationem alias, dolores illo non laboriosam laborum!</p>

<h2 id="content3">CONTENT 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Aliquam distinctio quos repellendus? 
Exercitationem alias, dolores illo non laboriosam laborum!</p>

<p><a href="#menu">[메뉴로]</a></p>

스크롤바가 생기지 않는다면 화면 크기를 줄여보세요

 

 

 

 

(4) 하나의 이미지 안에 여러 링크를 만드는 <area>  태그

 

이미지 하나를 두고 왼쪽을 누르면 다음 페이지로, 오른쪽을 누르면 티스토리 페이지로 이동하는 코드를 <area> 태그를 활용해 작성해보겠습니다. 마찬가지로 작성하는 html이 들어있는 프로젝트에 images폴더를 생성해 이미지를 넣어주어야 합니다.

 

먼저 링크를 걸어줄 이미지에 'usemap' 속성을 설정해야 합니다. 속성 값으로는 어느 구역에 어떤 링크를 걸지 명시하는 <map> 태그의 name 속성 값을 넣습니다. 기본형은 아래와 같습니다.

<map name="맵 이름">
  <area>
  <area>
  ...
</map>

<img src="이미지 파일" usemap="#맵이름">

<area> 태그는 이미지에서 링크를 걸 구역을 지정하는 태그입니다. 해당 구역에 커서를 올리면 커서 모양이 바뀝니다.

태그 속성은 다음과 같습니다.

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

 

속성들을 적절히 활용해 결과물을 만들어보았습니다. 이미지는 적절한 크기를 사용해주시고 area의 coords가 다 담길 수 있도록 해야 합니다.

<img src="images/example.jpg"  alt="예시 이미지" usemap="#link">
<map name="link">
  <area shape="rect" coords="0,0,160,200" href="http://www.daum.net" target="_blank" alt="다음" />
  <area shape="rect" coords="220,0,380,200" href="https://www.tistory.com/" target="_blank" alt="티스토리" />
</map>