11. 하이퍼링크(4-2)

1. 지정된 위치로 링크 설정 

현재 HTML 문서의 지정된 위치로 링크설정 

– HTML 문서가 길어질 때 원하는 위치로 이동하고자 하는 곳 이동 가능 

– <a name="name"></a>, <a href="#name"></a> 

• <a name=name> 태그를 사용 책갈피로 표시 

• <a href=#name> 링크로 이동 하고자 하는 위치의 이름 지정 

– 다른 HTML 문서의 특정 위치로도 링크 가능 

• <a href=“링크될 문서의 경로 및 파일명#이름”>…<a> 

– 절대 경로와 상대 경로 

• 절대경로 

– 파일명을 기술할 때 루트 디렉토리부터 일일이 경로를 지정 

• 상대경로 

– 현재 HTML 문서가 저장된 위치를 기준으로 경로를 지정 

– 음악, 동영상 파일 링크하기 

• 음악, 동영상 파일을 하이퍼링크로 지정 

2. 음악, 동영상 파일 링크하기 

압축파일, 실행파일 링크하기 

• 압축파일, 실행 파일 링크 

– 웹 브라우저에서 나타낼 수 없는 파일을 링크로 설정하여 다운로드 

– <a href=“game.zip>파일다운<a> 

• 링크 결과를 다른 창에 열기 

– 링크된 페이지를 새로운 웹 브라우저 창이 열리면서 나타남 

– 새로운 페이지를 열기 위해서 target 속성 사용 

• “target=_blank” 값을 지정 새로운 페이지 열고 거기에 링크 표시 

• 내 홈페이지 홍보하기 

– 게시판에 글을 올릴 때 자신의 홈페이지 홍보하기 위해서 링크 

설정 

• <a href=http://cafe.naver.com/studylist target=_blank”> 

Homepage </a> 

3. 이미지 맵 만들기 

이미지 맵을 만드는 태그 

<img src="이미지 파일명" usemap="#이름">  

        <map name="이름">  

                <area>  

                </area>  

        </map>  

속 성                                      설 명 

shape      영역의 모양을 지정. rect은 사각형, circle은 원, polygon은 다각형을 의미한다.  

coords     영역의 좌표값을 지정. 모양에 따라 나타나는 좌표값이 다르다. 

href         링크시킬 HTML 문서의 경로명과 파일명을 지정 

noref       링크시킬 문서가 없을 경우에 사용한다. 

alt           링크에 대한 간단한 설명을 입력한다. 

사각형/원형으로 이미지 맵 만들기 

• 사각형으로 이미지 맵 만들기 

– 두 곳(시작, 종료)의 좌표값(X,Y)을 알아내기 위해 포토샵을 이용 

– 기타 그림판도 가능 

• 상태 표시 줄에 x, y 좌표값 확인 

 

• 원형으로 이미지 맵 만들기 

– 원형은 사각형과 달리 중심점에 대한 좌표값과 반지름의 길이 필요 

– 원형은 그림판으로 중심점의 위치 파악이 어려움 

– Info 창에서 X, Y 좌표는 원의 중심, width가 원의 지름