티스토리 뷰

링크, 이미지, 이미지맵


a 요소 (관련소스파일 : http://www.daum.net)

• 텍스트에 링크를 설정하는 요소이다.

• 인라인 요소 (인라인 요소와 텍스트를 포함)

• a 요소의 href 속성값에 #name(id) 속성값을 지정하면, name과 id 속성으로

지정된 문서 내 특정 위치를 이동한다. 



 



• a 요소의 주요 속성

① href : 링크 주소 지정

② name, id : 앵커 식별자 지정

③ title : 링크의 보충정보를 표시, 대부분의 브라우저에서 title 속성에 지정한 값

이 툴팁으로 표시

④ target : 링크된 문서를 어떤 창에 열 것인지 지정

(_blank / _parent / _self / _top / framename) 



img 태그

• 이미지를 삽입하는 요소이다.

• 인라인 요소지만, 빈요소이다. (종료태그 필요없음)

• img 요소의 주요 속성

① alt :

- 이미지의 대체 텍스트(alternative text) 지정

- IE에서는 타 브라우저와 달리 alt 속성에 지정된 텍스트가 툴팁으로 표시

② width, height

- 이미지의 가로/세로 크기 지정

- 페이지의 로딩 진행시 이미지의 가로/세로 크기만큼 영역을 확보하고

그 이외 다른 부분을 표시하게 됨. (레이아웃이 어긋나는 현상을 방지) 

③ border

- a 요소로 img 요소에 링크를 설정한 경우 자동으로 테두리선을 표시

- 비추천 속성이며 CSS의 테두리 관련 속성으로 제어

④ longdesc

- 이미지에 대한 자세한 설명이 있는 페이지의 경로를 지정하여 alt 속성을 보완

⑤ align, hspace, vspace

- 수평/수직 위치, 좌우/상하 여백을 지정하기 위한 속성

- 비추천 요소이며 CSS로 제어 가능



 

map


 

이미지맵이란?

이미지의 일부 영역에 링크를 두어 사용자에게 해당 정보를 제공할 수 있는 페이지로

이동하도록 만드는 프로그램 기법



이미지맵 프로그램 "imagemapic"



• 이미지의 부분마다 다른 하이퍼링크를 적용시킬 수 있게 해주는 프로그램

• 사각형, 원형을 비롯한 다각형 모양으로 지정가능

• 하이퍼링크의 타겟을 지정하여 링크된 페이지가 열리는 위치를 지정 





• 이미지맵을 정의하기 위한 요소

• 블록 요소

• 주요 속성

• name, id 속성

• img 요소의 usemap 속성값을 지정하여 해당 이미지에 연관시킴


• 이미지맵의 영역을 지정하기 위한 요소

• 빈 요소 (종료태그 필요없음)

• 주요 속성

• href : URL를 지정

• alt : 대체 텍스트를 지정

• shape : 영역의 형태를 지정 (default / rect / circle / poly )

• coods : 영역의 좌표(이미지 전체의 왼쪽 위가 기준점)를 쉼표로 구분하여 지정

※ shape 속성값에 따라 지정 방법이 다름


• rect : 왼쪽 위 X좌표, 왼쪽 위 Y좌표, 오른쪽 아래 X좌표, 오른쪽 아래 Y좌표

• circle : 중심의 X좌표, 중심의 Y좌표, 반경

• poly : 첫번째 각의 X좌표, 첫번째 각의 Y좌표, 두번째 각의 X좌표, 두번째 각의 Y좌표 ... 


※ download & Next Menu



저작자 표시 비영리 변경 금지
신고
댓글