Salangdung_i의 기록

HTML5 ::이미지, 하이퍼링크 본문

WEB FRONT END/HTML5+CSS

HTML5 ::이미지, 하이퍼링크

Salangdung_i 2019. 9. 29. 21:39
728x90

img - 이미지를 삽입하는 태그
figcaption - 이미지에 설명 글을 삽입하는 태그
a - 링크를 만드는 태그
target - 링크를 새창에서 열기 위한 <a>태그의 속성
map - 이미지 맵을 만드는 태그

<img>태그
기본형 : <img src="경로" [속성="값"]>
alt속성 - 이미지를 설명해 주는 대체 택스트
<img src="home.jpg" alt="홈으로 가기">
figure, figcaption 태그 - 이미지에 설명 글 붙이기
figure 태그 - 설명 글을 붙일 대상 지정
기본형 <figure>태그</figure>
figcaption 태그 - 설명 글 붙이기
기본형 <figacaption>설명글</figcaption>

<a>태그, href속성 - 링크만들기
<a href="링크할 주소"[속성="속성 값"]>텍스트</a>
<a href="링크할 주소"[속성="속성 값"]><img src="이미지파일경로"></a>

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


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

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


앵커(anchor) : 다른 페이지 말고 한 페이지 내에서 링크를 만드는 것
페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그위치가 한번에 이동하도록 도와준다.
앵커를 사용하려면 우선 이동하고싶은 위치마다 id속성을 이용해 id속성을 이용해 앵커를 만들고 각각 다른 이름을 지정해야 한다. 이렇게 붙여 놓은 앵커 이름들은 마치 링크를 만들 떄 처럼 <a>태그의 href 속성을 사용해 링크 한다. 다만 앵커 이름 앞에 #을 붙여 앵커를 표시한다.
기본형 : <태그 id="앵커이름">텍스트 또는 이미지</태그>
< a href="#앵커 이름"> 텍스트 또는 이미지 </a>

<map>태그,<area>태그 , usemap 속성 -이미지 맵 저장하기

속성 설명
alt 대체 텍스트를 지정합니다
coords 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정합니다
download 링크를 클릭했을때 때 링크 문서를 다운로드 합니다.
href 링크 문서(사이트)경로를 지정합니다.
media 링크 문서(사이트)를 어떤 미디어에 최정화 시킬지 지정합니다.
rel  
   
   
   






"Icon made by Pixel perfect from www.flaticon.com"





















728x90

'WEB FRONT END > HTML5+CSS' 카테고리의 다른 글

HTML 텍스트 관련 태그  (0) 2021.10.28
HTML기초  (0) 2021.10.28
HTML5 :: 목록 태그  (0) 2019.09.28
HTML5 :: HTML 5 텍스트 태그  (0) 2019.09.28
HTML5 :: HTML 설정  (0) 2019.09.28