<figure>, <figcaption> 태그 - 이미지 설명 글 붙이기
- <figure> 태그는 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서안에서 한 단위가 된는 요소를 묶을 때 사용한다.
- 한 단위가 되는 요소를 나타내기 위해서는 <figure> 태그만 사용하고 설명 글을 사용하기 위해서는 <figure> 태그 안에 <figcaption>태그를 사용해 설명 글을 표시한다.
- ex)
링크 만들기
- <a> 태그 속성
- href : 링크한 문서나 사이트의 주소를 입력한다.
- target : 링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정한다.
- download : 링크한 내용을 보여 주는 것이 아니라 다운로드한다.
- rel : 현재 문서와 링크한 문서의 관계를 알려준다.
- hreflang : 링크한 문서의 언어를 지정
- type : 링크한 문서의 파일 유형을 알려준다.
target 속성 - 새 탭에서 링크 열기
- _blank : 링크 내용이 새 창이나 새 탭에서 열린다.
- _self : target 속성의 기본 값으로 링크가 있는 화면에서 열린다. (중요)
- _parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다.
- _top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다.
<map> 태그, <area> 태그, usemap 속성 - 이미지 맵 지정하기
- 이미지 맵이란 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열리는 것을 말한다.
- 이미지 맵은 이미지 영역을 만든 후 링크를 추가해야 하기 때문에 <map> 태그를 이용해 이미지 맵을 만들고 <img> 태그에서 usemap 속성으로 이미지 맵을 지정한다.
- 이미지 맵으로 사용할 이미지에 영역을 표시할 때는 <area> 태그를 사용한다.
- 예시
<map name = "맵이름">
<area>
<area>
......
</map>
<img src = "이미지 파일" usemap = "#맵이름">
- 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 : 링크 문서의 미디어 유형을 지정한다.
