03 이미지와 하이퍼링크

03-1 이미지

웹에서는 gif, jpg/jpeg, png 이미지 파일을 사용할 수 있다.

<img> : 이미지 삽입하기

<src> : 이미지 파일 경로 지정하기

  • 같은 폴더의 이미지일 경우 image.jpg
  • 하위 폴더의 이미지일 경우 folder/image.jpg
  • 상위 폴더의 이미지일 경우 ../image.jpg
  • 웹 링크를 사용하는 경우 http://주소.jpg

<alt> : 이미지 설명해주는 대체 텍스트

  • 화면 낭독기를 고려한 이미지 설명 추가
  • 필요 없을 경우 alt="" 로 표시

<width> <height> : 이미지 크기 조정

  • 속성 미사용시 이미지 원본 크기대로 표시된다.
<img src="../images/sample1.jpg" width="400" height="300" alt="샘플 이미지 설명">

<figure> <figcaption> : 이미지에 설명글 붙이기

  • 설명글(캡션)에 사용된다.
  • <figure>로 설명글을 붙일 대상을 묶는다.
  • <figcaption> </figcaption> 사이에 설명글을 넣는다.

03-2 링크 만들기

<a> href : 링크 만들기

<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a>
<a href="링크할 주소" [속성="속성 값"]> <img src="folder/image.jpg"> </a>

사용 가능한 속성

  • href : 링크한 문서나 사이트의 주소 입력
  • target : 현재 창 or 새 창 지정
  • download : 링크를 보여주는 것이 아니라 다운로드 하기
  • rel : 현재 문서와 링크한 문서의 관계를 알려줌
  • hreflang : 링크한 문서의 언어를 지정
  • type : 링크한 문서의 파일 유형을 알려줌

* target 의 속성 값 - _blank : 링크가 새 창 or 새 탭에서 열림 - _self : 기본 값. 현재 창에서 열림 - _parent : (프레임 사용 시) 링크를 부모 프레임에 표시. - _top : (프레임 사용 시) 프레임에서 벗어나 전체 화면에 표시

앵커(anchor) : 한 페이지 안에서 점프

<!-- tag에는 <li>, <p>, <h1> 등이 올 수 있다. -->
<tag id="앵커 이름"> 돌아올 곳의 id </tag>
<a href="#앵커 이름"> 이 곳을 클릭 </a>

<map> <area> usemap : 이미지 맵 지정 하나의 이미지의 클릭 위치에 따라 서로 다른 링크가 열리는 것을 이미지 맵 이라 한다. 웹사이트보다는 이메일 등에서 사용된다.

예를 들어 (0,0) 부터 (80,100)위치의 사각형을 클릭했을 때 링크되게 하려면 다음과 같이 작성한다.

<map name="맵이름">
  <area shape="rect" coords="0,0,80,100" href="링크" alt="링크 설명">
  <area>
  <area>
  ...
</map>

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

03-3 SVG 이미지

  • SVG 이미지는 비트맵이 아닌 벡터 이미지.
  • 그래픽 편집 프로그램 뿐 아니라, 웹이나 문서 편집기에서도 수정할 수 있다.
  • IE 8 이하 & 안드로이드 2.3 이하 버전에서는 SVG를 사용할 수 없다.
<img src="imgfolder/image.svg">


References