[html5] a - 링크와 앵커 사용하기

티스토리 뷰

[개발]프로그래밍/html5

[html5] a - 링크와 앵커 사용하기

좋은 블로그 2021. 1. 28. 13:36

1. 개념

a - 링크와 앵커 만들기

링크 : 현재 페이지에서 다른 웹 페이지로 넘어가고자 할 경우에 사용

속성	설명
href	링크하고자 하는 문서나 웹 사이트 URL을 입력
target	링크를 표시하고자 하는 위치를 설정
_blank	새 창이나 새 탭에서 링크 문서가 열림
_self	이 속성이 기본 값으로 현재 화면에서 링크 문서가 열림
_parent	프레임 사용시 부모 프레임에 표시
_top	프레임 사용시 프레임을 벗어나 전체 화면에 표시
rel	지금 웹 페이지와 링크한 페이지와의 관계를 명시
hreflang	링크한 문서의 언어를 지정
type	링크한 문서의 파일 유형을 알려줌

앵커 : 현재 페이지 안에서 지정한 곳으로 이동하고자 할 경우에 사용

2. 태그

html5 코드

<! DOCTYPE html>

<head>

</head>

<body>

<div>

키보드와 하루 블로그 </a>

</div>

<div>

이미지 다운로드 </a>

</div>

<ul>

</ul>

</body>

</html>

결과 화면

코드 설명

href에는 이동하고자 하는 페이지 주소나 URL 주소를 입력해 주면 됩니다.
예를 들어서 로컬에서 홈페이지를 만들고 main.html 이라는 페이지가 있다고 하면 바로 main.html을 href에 입력해 주시면 됩니다.
그리고 target은 위에서 보시는 것처럼 자신의 설정에 맞게 사용하시면 됩니다.
현재 페이지에서 열고자 할 경우는 기본값인 _self , 새창으로 열고자 할 경우에는 _blank , 프레임을 사용했을 경우 등 자신이 쓰고자 하는 것에 맞게 쓰시면 됩니다.

현재 이것은 iconfider라는 무료 아이콘을 제공해주는 사이트에 연결되어 있습니다.
주소는 html이 아닌 png 라는 이미지 파일로 되어 있는데 이렇게 href에 다운받고자 하는 것들이 있다고 하면 입력해 주시면 됩니다.
예전에는 속성으로 download라는 것을 제공해 주었는데 요즘은 쓸려고 하면 노란색으로 표시되는 것을 확인이 됩니다.

여기서 특이한 것은 href 주소를 지정할 때 #이라는 것이 붙어 있음을 보게 됩니다.
#을 붙임으로써 지정한 태그 중에 일치하는 id값을 찾아가는 것을 확인하실 수 있습니다.
만약 이 때 스크롤이 없거나 내용이 별로 없어서 글이 짧은 경우에는 차이를 못느끼지만 내용이 길 때 링크를 누르면 해당하는 id 값으로 가는 것을 확인하실 수 있습니다.

저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] form - 사용자 입력 정보 보내기 (0)	2021.02.01
[html5] map,area,usemap - 하나의 이미지에 여러 링크 지정 (1)	2021.01.29
[html5] img - 웹 브라우저에 이미지 표시 (0)	2021.01.25
[html5] colspan , rowspan - 표에서 열,행 합치기 (0)	2021.01.22
[html5] <colgroup>,<col> - 표에서 열(col) 스타일 적용 (0)	2021.01.21

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

티스토리 뷰

[html5] a - 링크와 앵커 사용하기

'[개발]프로그래밍 > html5' 카테고리의 다른 글

티스토리툴바