[HTML] 이미지와 하이퍼링크

이미지

🌳 웹 문서와 이미지

웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도

화질은 좋게 유지해야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다. (GIF, JPG/JPEG, PNG)

 

🌳 <img> 태그

웹 문서에 이미지를 삽입할 때 사용한다.

기본형 : <img src="경로" [속성="값"]>

 

🍂 <img> 태그의 속성

1. src 속성 : 이미지 파일 경로

  - 웹 문서 파일의 위치를 기준으로 이미지 경로를 지정한다.

  - 웹 사이트에 있는 이미지도 주소를 알아내어 src 속성에 사용할 수 있다.

 

2. alt 속성 : 이미지를 설명하는 대체 텍스트

  - 대체 텍스트를 화면 낭독기가 읽어준다.

  - 이미지를 표시할 수 없는 상황일 때 대체 텍스트를 표시한다.

 

3. width, height 속성 : 이미지 크기 조정하기

  - 이 속성을 사용하지 않으면 원래 이미지 크기대로 표시된다.

  - 이 속성을 이용하여 화면에 표시하는 이미지 크기를 조정한다.

    그러나 이미지 파일의 용량은 변하지 않는다.

 

<h1>홈으로 가기</h1>
<img src="home.jpg" alt="홈 관련 사진" width="250" height="90">

실행 결과

 

만약 이미지 경로가 잘못 되었다면?

실행 결과

 

🌳 <figure>, <figcaption> - 이미지에 설명글 붙이기

<figure> 태그 : 설명글을 붙일 대상 지정

  - 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다.

  - 설명 글을 표시할 때 <figure>로 먼저 묶어야 한다.

 

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

  - 대체 텍스트를 화면 낭독기가 읽어 준다.

  - 이미지를 표시할 수 없는 상황일 때 대체 텍스트가 표시된다.

<figure>
      <img src="picture.jpg" alt="내가 찍은 사진" width="200" height="300">
      <figcaption>이 날 찍은 사진 중 베스트 컷</figcaption>
</figure>

실행 결과

 

링크 만들기

🌳 하이퍼링크

다른 문서, 혹은 다른 사이트로 바로 연결해 주는 기능이다.

외부 사이트나 외부 페이지로도 연결된다.

메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있다.

 

🌳 <a> 태그, href 속성

반드시 href 속성을 함께 사용하여 어떤 대상으로 연결하는지 알려주어야 한다.

 

<a> 태그에서 사용할 수 있는 속성

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

 

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

- 다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크 페이지를 표시할 때 사용한다.

- 현재 페이지는 그대로 유지하면서 새 창이나 새 탭에 표시한다.

 

사용할 수 있는 값

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

<h1>텍스트 링크 만들기</h1>
<p><a href="http://www.easyspub.com">이지스퍼블리싱 홈페이지(현재 화면)</a></p>
<p><a href="http://www.easyspub.com" target="_blank">이지스퍼블리싱 홈페이지(새 창 또는 새 탭)</a></p>

 

🌳 한 페이지 안에서 점프하기 - 앵커

- 앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용하여 앵커를 만든다.

- <a> 태그의 href 속성을 사용하여 링크한다. 단, 앵커 이름 앞에는 #을 붙여 앵커임을 표시한다.

 

기본형

<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>

<a href="#앵커 이름"> 텍스트 또는 이미지</a>

 

<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">내용1</h2>
<p>웹 문서가 너무 길 경우 ~ 앵커(anchor)라고 합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용</h2>
<p>웹 문서가 너무 길 경우  ~ 앵커(anchor)라고 합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용</h2>
<p>웹 문서가 너무 길 경우  ~ 앵커(anchor)라고 합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>

실행 결과

 

 

🌳 <area> 태그, usemap 속성 - 이미지맵

이미지맵 : 한 이미지 상에 여러 다른 링크를 만드는 것

<img src="images/kids.jpg" alt="" usemap="#favorites">
<map name="favorites">
          <area shape="rect" coords="10, 10, 160, 200" href="http://cafe.naver.com" target="_blank" alt="네이버 카페로 가기">
          <area shape="rect" coords="220, 10, 380, 200" href="http://www.google.com" target="_blank" alt="구글로 가기">
</map>

 

<area> 태그의 속성들

속성	설명
alt	대체 텍스트를 지정한다.
coords	링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용하여 지정한다. (그림판에서 좌표 확인 가능)
download	링크를 클릭했을 때 링크 문서를 다운로드한다.
href	링크 문서(사이트) 경로를 지정한다.
media	링크 문서(사이트)를 어떤 미디어에 최적화시킬지 지정한다.
rel	현재 문서와 링크 문서 사이의 관계를 지정한다.
shape	링크로 사용할 영역의 형태를 지정한다. (사각형, 원)
target	링크를 표시할 대상을 지정한다.
type	링크 문서의 미디어 유형을 지정한다.