HTML 이미지와 하이퍼링크

김경천·2021년 4월 7일
0

img 태그

<img src="경로" [속성=""]>
alt: 이미지를 설명하는 대체 텍스트
	 이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시
width, height: 이미지 크기 조정
figure: 설명글을 붙일 대상 지정
	기본형: <figure>요소</figure>
    설명 글을 표시할 때 먼저 묶어야 함.

a -하이퍼링크

<a> 태그, href 속성
<a href= "링크할 주소" [속성="속성 값"]>텍스트</a>
<a href= "링크할 주소" [속성="속성 값"]><img src="이미지 파일경로"></a>
target: 링크한 내용이 표시될 위치(현재창 또는 새창)을 지정
		_blank: 새창이나 새탭에서 열림

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

앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만듬.
<a> 태그의 href 속성을 사용해 링크함. 단, 앵커 이름 앞에 #을 붙여 앵커 표시.
기본형: <태그 id="앵커이름">텍스트 또는 이미지</태그>
	  <a href="#앵커이름"><텍스트 또는 이미지</a>

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

한 이미지 상에 여러 다른 링크를 만드는것
기본형: <img src="이미지 파일" usemap="#맵이름"> 
<map name="맵이름">
		<area>
        <area>
        ''''''
       </map>
area 태그 속성들
	coords: 링크로 사용할 영역을 시작 좌표와 끝좌표를 이용해 지정
    alt	  : 대체 텍스트를 지정  
<img src="images/kids.jpg"  alt="" usemap="#favorites">
<map name="favorites">
  <area shape="rect" coords="10,10,160,200" href="http://cafe.naver.com/doithtml5" target="_blank" alt="do it html5 네이버 카페로 가기">
  <area shape="rect" coords="220,10,380,200" href="http://www.facebook.com/do.it.html5" target="_blank" alt="do it html5 페이스북 페이지로 가기">
</map>

profile
화이팅

0개의 댓글