[HTML/CSS] 링크걸기 <a>태그!!
[HTML/CSS] 링크걸기 <a>태그!!
|
흔히 하이퍼링크(Hyper link)라고 표현하며 직접 주소를 적지 않아도 클릭 만으로 이동 가능하도록 하는것으로 HTML에서는 <a>태그를 사용해요. <a>태그는 Anchor의 약자로 배가 정박하기 위해 사용하는 닻이라는 뜻으로, HTML에서는 특정 위치로(닻을 내린 위치로) 쉽게 이동하기 위해 사용해요. <a>태그는 다른 페이지로 연결, 다른 페이지의 특정 위치, 현재 페이지의 특정 위치로 이동 할 수 있어요. |
다른 페이지로 이동
|
태그 |
속성 |
속성값 |
비고 |
|
a |
href |
파일명이나 URL |
이동할 대상의 파일명이나 URL주소. |
|
href |
mailto:메일주소 |
메일을 받을 주소. | |
|
target |
_self (기본값) _blank _top _parent 사용자지정 |
_self는 기본값이므로 생략해도 됩니다. 자세한 설명은 예제를 봐주세요. |
|
예) <a href="본문.htm">이동할 대상의 파일명이나</a> 예) <a href="http://secretgd.tistory.com"><img src"그림으로도 링크를 걸 수 있어요.jpg"></a> 예) <a href="mailto:abc@naver.com">메일을 받을 주소</a> 예) <a href="http://secretgd.tistory.com" target="_blank">새 창에서 링크 열기</a> 예) <a href="http://secretgd.tistory.com" target="_top">프레임을 지우고 현재페이지에서 이동</a> 예) <a href="http://secretgd.tistory.com" target="_parent">창을 부른 부모 페이지를 이동</a> 예) <a href="http://secretgd.tistory.com" target="menu">menu라는 이름의 창에서 이동</a> 링크를 걸기위해 여러가지 방법이 있지만 간단히 현재창에서 이동할 것인가?(_self) 새 창에서 이동할것인가?(_blank) 이 두가지 경우가 가장 많이 사용되니 이것만 알고 있어도 링크거는데는 문제 없어요. |
다른 페이지의 특정 위치로 이동
|
태그 |
속성 |
속성값 |
비고 |
|
a |
href |
URL#위치 |
이동할 페이지와 그 페이지에서 보여줄 위치. |
|
name |
이름 |
위치를 나타내는 이름. |
|
예) <a href="http://secretgd.tistory.com/83#here" target="_black">새 창에서 이 부분을 볼까요?</a> 예) <a name="here">위 소제목의 이름을 here로 지정 해볼게요.</a> 홈쇼핑의 상세페이지 처럼 특정부분을 보여줘야 할 때 자주 사용되요. |
|
|
|
|
현재 페이지의 특정 위치로 이동
|
태그 |
속성 |
속성값 |
비고 |
|
a |
href |
#위치 |
현재 페이지니까 그냥 #위치를 써줌. |
|
name |
이름 |
위치를 나타내는 이름. id로 대체 가능. |
|
예) <a href="#here">위 소제목으로 가지겠죠?</a> 예) <h2 id=here>이렇게 id를 써서 할 수도 있어요</h2> 본문의 스크롤이 길어질 경우 방문자가 일일히 스크롤 하다보면 귀찮겠죠? 저는 방문자가 포스팅의 원하는 부분을 쉽게 볼 수 있게 하기 위해서 이 기능을 많이 사용해요. 위 포스팅을 참고하면 바로가기키를 쉽게 만들 수 있겠죠? |
< 연습하기 >
