[개미의 걸음 HTML&CSS 5차시] 이미지와 링크를 가져오는 태그(img,map,a)

<img>태그

    <img src="파일경로" alt="이미지가 출력되지 못할때 출력되는 텍스트">

• 사용 가능한 이미지 파일에는 비트맵 이미지[GIF,JPG,JPEG,PNG]와 벡터이미지[SVG]가 있다.
  # 이미지 파일의 이해

  비트맵 이미지 파일 형식	설    명
  GIF [Graphic Interchange Form]	최대 256색까지 저장 가능하여 주로 작은 이미지에 사용 투명한 배경이나 움직이는 이미지 제작 가능 비손실 압출 방법
  JPG/JPEG [Joint Photographic Experts Group]	웹상에서 이미지 및 사진 등의 정보를 전송할 때 사용하는 가장 보편적으로 파일 형식 GIF보다 다양한 색상과 명암을 표현할 수 있음[24비트의 수백만 가지 색상] 손실 압축 방법[변환 과정에서 GIF/PNG 압축방식보다 품질이 나쁠 수가 있음] 저장을 반복하다 보면 화질이 떨어질 수 있음
  PNG [Portable Network Graphics]	GIF에 비해 압축률이 조금 더 높으며 안티엘리어싱과 투명기능, 다양한 색상표현 가능
  벡터 이미지 파일 형식	설    명
  SVG [Scalable Vactor Graphics]	이미지를 아무리 확대*축소해도 월래의 깨끗한 상태가 그대로 유지되는 이미지 자바스크립트 라이브러리에서 차트나 그래프를 표현할 때, SVG이미지 사용

• src 속성을 이용하여 파일경로를 작성해야지만 원하는 이미지를 넣을 수 있다.
• 파일 경로를 지정하는 방법에는 상대 경로와 절대 경로가 있다.
• alt 속성을 이용하면 이미지가 출력되지 못할 때 출력되는 텍스트를 설정할 수 있다.
• width, height 속성을 사용하면 원하는 이미지 크기를 조정 가능
• <figure>태그와 <figcaption>태그를 함께 사용함으로써 그림의 설명 글을 작성 가능
• 하나의 이미지에 여러 개의 링크를 걸기 위해 이미지맵 기능 사용
  [이미지 영역을 만든 뒤 링크를 추가하는 방식으로 여러 개의 링크를 걸 수 있음] 

<map name="맵이름">
    <area shape="링크가 선택될 모양" coords="픽셀 범위 지정" href="해당 모양 클릭시 접속할 링크">
    <area shape="링크가 선택될 모양" coords="픽셀 범위 지정" href="해당 모양 클릭시 접속할 링크">
       :
       :
</map>
<img src="이미지 파일 경로" usemap="#맵이름">

# 해당 그림의 픽셀 위치 확인 방법

연결 프로그램을 통해 그림판으로 들어가서 해당 그림의 원하는 위치에 커서를 두면 아래에 픽셀 위치가 나타남

 

  상대경로

현재 html 파일을 기준으로 위치를 지정할 수 있는 이미지 파일 등을 불러올 때 사용

• 같은 폴더에 있는 경우, 이미지 이름과 확장자 명만 입력하면됨
• html과 같은 폴더의 내부 폴더에 있는 경우, '폴더명/이미지명.확장자'로 입력
• html과 다른 폴더에 있는 경우 '../'를 사용하여 상위폴더에 올라간 다음 지정가능

 

 

  절대경로

현재 html파일을 기준으로 위치를 지정할 수 없는 다른 웹사이트의 이미지 등을 불러올 때 사용

• 파일 경로를 도메인 이름과 함께 작성한 뒤 URL로 지정

# width, height 속성 적용

# <figure>, <figcaption>태그 적용

 

<a>태그

<a href="링크 경로">경로로 연결해주는 텍스트</a>

주요 속성	설    명
href	링크한 문서나 사이트의 주소를 입력하는 속성
target	링크한 내용이 표시될 위치를 지정하는 속성 속성 값에는 _blank, _self, _parent, _top이 있다.
download	링크한 내용을 다운로드하는 속성
rel	현재 문서와 링킇나 문서의 관계를 알려주는 속성
hreflang	링크한 문서의 언어를 지정하는 속성
type	링크한 문서의 파일 유형을 알려주는 속성

• 넣고 싶은 링크를 href 속성을 이용해서 집어넣음 [href="#ID명"을 사용해도 됨, anchor기능]
• href속성에 mailto:값을 사용하면 이메일 작성 가능

• target 속성을 이용하면 링크한 내용이 표시될 위치를 지정 가능
  다른 창에 링크를 출력하기 위해서는 target="_blank"를 입력

target속성의 값	설명
_self	target속성의 기본값[현재 창에서 링크 이동]
_blank	새창에서 링크 이동
_parent	프레임을 사용했을 때 링크 내용을 부모 프레임에 표시
_top	프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체화면에 표시

• <a>태그 안에 <img>태그를 넣으면 이미지 클릭 시 링크로 이동

 

 

 

 

 

Anchor기능

<태그 id="Anchor Name"> 텍스트 또는 이미지 </태그>
<a href="#Anchor Name"> 텍스트 또는 이미지 </a>

페이지 내에서 특정 위치로 이동할 수 있게 해주는 기능

• 태그에서 id로 지정한 뒤 href태그에 id명을 입력하면 a태그의 텍스트 또는 이미지 클릭시 id를 지정한 태그의 텍스트 또는 이미지로 이동 가능