안녕하세요, 여행벌입니다.
이번 포스팅에서는 링크를 만드는 <a> 태그와 여러 속성들에 대해서 다뤄보겠습니다.
'링크'는 웹 문서가 다른 문서와 구별되는 가장 큰 특징입니다. 클릭만 하면 연결된 곳으로 즉시 이동해 웹 사용을 더욱 편리하게 만들어줍니다.
<a> 태그, href 속성 - 링크 만들기
<a> 태그와 href 속성을 이용하면 링크를 만들 수 있습니다.
기본 형은 다음과 같습니다.
<a href="링크할 주소"> 텍스트 </a>
<a href="링크할 주소"><img src="이미지파일경로" alt=""></a>텍스트에다가 링크를 걸 수도 있고, <img> 태그를 이용해 이미지에다가 링크를 걸 수도 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h1>텍스트 링크 만들기</h1>
<a href="http://travelbeeee.tistory.com">굳건하게 티스토리</a>
<h1>이미지 링크 만들기</h1>
<a href="http://travelbeeee.tistory.com">
<img src="images/image1.jpg" alt="굳건하게 티스토리로 가기">
</a>
</body>
</html>
'굳건하게 티스토리' 텍스트를 눌러도, 이미지를 눌러도 모두 링크가 걸려있는 페이지로 넘어가게 됩니다. 기본 값으로 링크는 현재 창에 연결된 웹사이트를 띄워줍니다.
target 속성 - 새 탭에서 링크 열기
기본적으로 <a> 태그는 현재 창에 웹 사이트를 띄워줍니다. 새로운 창에 링크가 걸려있는 웹 사이트를 띄우고 싶으면 target 속성을 이용해야 합니다.
<a href="http://travelbeeee.tistory.com" target="_self">현재창에띄우기.</a>
<a href="http://travelbeeee.tistory.com" target="_blank">새로운창에띄우기.</a>
"_blank" 속성은 새로운 창에 연결된 사이트를 띄우고, "_self" 속성은 현재 창에 연결된 사이트를 띄워줍니다.
앵커 - 한 페이지 안에서 이동하는 링크
앵커(anchor)는 같은 페이지 내에서 이동하는 링크입니다. 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와줍니다.
기본 형은 다음과 같습니다.
<태그 id="앵커이름"> 내용 </태그>
<a href="#앵커이름"> 내용 </a>우리가 이동을 원하는 곳에 id 값을 줍니다. 그리고 id 값을 <a> 태그 href 속성에 대입하면 앵커가 생깁니다.
다음은 YES24 사이트 입니다. 상단에 보시면 도서정보 , 리뷰/한줄평, 배송/반품/교환 이 보이실 겁니다. 모두 앵커로 누르면 다음과 같이 같은 페이지 내의 설정된 위치로 이동합니다.
배송/반품/교환 앵커를 누르니 같은 페이지 내의 배송/반품/교환 관련된 텍스트가 적혀있는 부분으로 위치가 이동했습니다. 이와 같이 앵커는 정말 자주 사용되는 기능으로 꼭꼭 익혀두시길 권장합니다.
이상으로 포스팅을 마치겠습니다.
'Dev > HTML5 + CSS3' 카테고리의 다른 글
| [HTML+CSS] CSS 스타일 적용 방법과 우선 순위 - travelbeeee (0) | 2020.03.25 |
|---|---|
| [HTML+CSS] 사용자의 입력을 받는 <form> <label> <fieldset> <legend> 태그 (0) | 2020.01.20 |
| [HTML+CSS] 이미지를 삽입하는 <img> 태그 (1) | 2020.01.20 |
| [HTML+CSS] 표의 틀을 잡아주는 <thead> <tbody> <tfoot> <col> <colgroup> 태그 (0) | 2020.01.20 |
| [HTML+CSS] 표를 만드는 <table> <tr> <td> <th> <caption> <figcaption> 태그 (0) | 2020.01.20 |