HTML, 내부링크, a herf와 이미지를 함께 알아보자 .

a 태그(tag)의 속성

href : 연결할 주소를 지정한다.

taget : 링크 클릭할때에 창을 어떻게 열지 설정한다.

title : 해당 링크에 마우스 커서를 올릴 때 도움말 설명을 설정한다.

a 태그의 대상은 텍스트 뿐 아니라 브라우저에 허용되는 범위에서 이미지나 문서, 동영상 등 가능.

 

href 의 속성

페이지를 자동 스크롤 할 대상에 id 식별자를 부여하고

링크를 지정할 a 태그의 href 속성 값에 id 선택자 형식으로 지정함으로써

문서의 원하는 위치에 대한 자동 스크롤 가능.

 

( 자동 스크롤할 위치의 대상 태그에 대하여 id 식별자를 부여하고

링크를 할당할 href 속성의 값에 해당 id 식별자를 id 선택자 형식으로 할당함으로써

링크를 설정한 a 태그의 컨텐트를 클릭했을 때 id 식별자가 부여된 문서의 위치로 자동 스크롤.

href 속성에 식별자 지정 시 id 선택자 형식의 접두사 # 을 지정해야함에 주의.

단, href 속성에 접두사 # 만 지정하는 경우 현재 페이지를 의미함으로써 문서 페이지 최상단으로 이동)

 

-링크를 지정할 URL 주소 , 열거나 저장할 문서의 경로를 지정한다.

<a href="#koreanFood">한식</a>

<h2 id="koreanFood">한식 소개</h2>

<a href="#">Home</a><!-- href 속성에 # 만 지정함으로써 문서 최상단으로 이동. -->

 

 

target 속성

 

링크가 열릴 프레임(웹페이지)를 지정한다.

target = "_self" : 현재 프레임(웹페이지)에 로드. 미설정 시 '디폴트'.

target = "_blank" : 새로운 프레임(웹페이지)에 로드.

---

img 태그(tag) 속성

html 문서의 이미지를 정의할때 사용.

html 문서에 직접 삽입되는 것이 아니라 html문서에 이미지가 링크되는 형태.

img 요소는 참조된 이미지를 위한 일종의 수용 공간을 만들어주는 것.

 

src : 이미지 파일의 경로나 URL 지정

alt : 잘못된 경로 설정이나 서버등의 문제로 이미지를 정상적으로 로드하지 못할 경우 이를 대체하기 위한 문자열 지정.

 

 

<a href=”열릴주소” taget =”프레임 위치”><img src=”이미지 위치” alt=”대체될 문자”></a>

->이미지 도는 문자 클릭 후 , 프레임 위치에 열리겔 될 주소가 열림.

 

이미지 구역 설정하기
https://www.image-map.net

주소 웹페이지에서 이미지를 펼쳐 ,구역을 설정하고 , 복사 붙여넣기.

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="paldal-gu_map_img.jpg" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="uman1" title="uman1" href="" coords="352,113,373,90,401,84,414,75,442,80,461,93,470,106,478,123,452,148,442,135,432,138,410,147,400,157,395,177,387,186,380,169,374,146,363,130" shape="poly">
    <area target="_self" alt="ingye" title="ingye" href="" coords="386,192,447,205,439,209,423,208,415,220,428,228,424,232,418,239,430,248,405,261,401,269,410,273,422,277,444,286,441,297,432,314,418,346,386,329,391,314,387,300,319,284,311,264,310,255,318,241,311,231,313,209" shape="poly">
</map>

href="" 사이에 주소 삽입하기.

 

(이미지를 원하는 형태로 분할하여 좌표가 생성된 링크 코드를 자동 완성하여 제공해주는 유틸 사이트. Rect(Rectangle), Poly(Polygon), Circle 형태로 이미지를 분할 가능. 단, 상대 경로를 지정하는 경우 분할 이미지에 대한 링크 설정 시 사이트에서 지정하는 것보다는 링크 코드를 로드할 파일에서 직접 링크를 설정하는 것이 안전)