HTML 링크 (Link)
다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)를 간단히 링크(link)라고도 부르며, HTML에서는 <a>태그로 표현한다.
1
2
문법
<a href="링크주소">HTML 링크</a>
<a>태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시합니다.
<a>태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다.
1
<a href="/">Go to Home</a>
target 속성
<a>태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시한다.target 속성값 설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) _parent 링크로 연결된 문서를 부모 프레임(frame)에서 오픈. _top 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈. 프레임(frame) 이름 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈. 1 2 3 4 5
<p><a href="/" target="_blank">blank</a></p> <p><a href="/" target="_self">self</a></p> <p><a href="/" target="_parent">parent</a></p> <p><a href="/" target="_top">top</a></p> <p><a href="/" target="myframe">myframe</a></p>
링크의 상태 (state)
HTML 링크의 상태는 다음과 같이 네 가지로 구분할 수 있다.
링크의 상태 설명 link 아직 한 번도 방문한 적이 없는 상태 (기본설정) visited 한 번이라도 방문한 적이 있는 상태 hover 링크 위에 마우스를 올려놓은 상태 (스타일 미지정시 기본 상태와 동일) active 링크를 마우스로 누르고 있는 상태
사용할 수 있는 종류는 위와 같은 4가지이며, css에 선언하게 된다면 위의 순서대로 선언해야 한다.
순서가 틀릴 경우 정상적으로 동작하지 않을 수도 있다.페이지 책갈피
태그의 name 속성을 이용하면 간단한 책갈피를 만들 수 있다.
우선 책갈피를 통해 가고 싶은 위치에 id 속성을 작성한다.
그다음에 작성한 id 속성값을 이용하여 다른 태그에서 링크를 걸면 된다.1 2 3 4
<a href="#bookmark">Go to BookMark</a> <br> <br> <a name="bookmark">BookMark</a>
HTML 이미지 (Image)
이미지 태그는 문서에 이미지를 넣는데 사용하는 태그이다.
주로 사용되는 이미지의 종류는 jpeg, png, gif 등이 있다.
이미지 삽입
HTML 문서 내에 이미지를 삽입할 때에는
<img>태그를 사용한다.>
<img>태그는 종료 태그가 없는 빈 태그이며, 아래와 같은 문법으로 사용한다.1 2
문법 <img src="이미지주소" alt="대체문자열">
src 속성은 이미지가 저장된 주소의 URL 주소를 명시하며,
alt 속성은 이미지가 로딩될 수 없는 경우 이미지 대신 나타낼 문자열을 설정한다.1 2
<img src="/a.png" alt="로딩할 수 없는 이미지"><br> <img src="https://via.placeholder.com/150" alt="더미이미지">
▶ 실행결과![로딩할 수 없는 이미지]()
이미지의 크기 설정
이미지의 크기는 스타일 속성을 사용하여 설정할 수 있다.
width 속성값과 height 속성값을 이용하여 이미지의 너비와 높이를 조정할 수 있다.1 2
<img src="https://via.placeholder.com/150" alt="더미이미지"><br> <img src="https://via.placeholder.com/150" alt="더미이미지" style="width: 200px;">
▶ 실행결과
이미지 테두리 설정
border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있다.
1
<img src="https://via.placeholder.com/150" alt="더미이미지" style="border: 3px solid red">
▶ 실행결과이미지에 링크 설정
이미지에
<a>태그를 이용하여 링크를 설정할 수 있다.1 2 3
<a href="/"> <img src="https://via.placeholder.com/150" alt="더미이미지"> </a>
▶ 실행결과이미지 맵 만들기
HTML에서는
<map>태그를 이용하여 이미지 맵을 만들 수 있다.
이미지 맵(Image Map)이란 이미지의 일부를 버튼처럼 사용하는 기능이다.
<img>태그의 usemap 속성을<map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정된다.
<map>태그는 하나 이상의<area>태그를 가지며, 이 태그가 바로 버튼과 같은 역할을 합니다.이미지맵 태그 사용법
- 이미지의 usemap=”이름”과 map name=”이름”을 통일하게 지정한다.
- shape=”속성값”은 영역의 모양을 의미한다.
- react : 직사각형
- circle : 원형 모양
- poly : 형 영역
- default : 전체 영역
- coords=”정의”는 영역의 좌표를 의미한다.
- 링크가 없을땐 nohref 로 정의한다.
1 2 3 4 5 6
<img src="http://www.tcpschool.com/examples/images/img_imagemap.jpg" alt="진실혹은거짓" usemap="#vending" style="width:320px; height:240px" /> <map name="vending"> <area shape="rect" coords="90,60,180,130" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90"> <area shape="rect" coords="210,200,70,130" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4"> </map> <p>표지판을 눌러보세요!</p>
▶ 실행결과![진실혹은거짓]()
표지판을 눌러보세요!
