[HTML] 링크 태그 <a> 사용법, href, target 속성

Client/HTML

[HTML] 링크 태그 <a> 사용법, href, target 속성

meeeeejin 2021. 4. 28. 09:01

<a> 태그

✔ a 태그 정의

<a href="">contents</a>

<a> 태그는 anchor(닻)의 약어로, 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다. 따라서 <a> 태그에는 링크(link)의 목적지를 가리키는 href 속성이 필요합니다.

✔ 속성(attributes) 정의 및 형식

속성(attributes)이란 태그에 대해 추가적인 정보를 제공할 때 사용하는 것입니다. 키(key) = "속성 값(value)" 형식으로 속성을 명시할 수 있습니다. 또한 하나의 태그에 속성이 여러 개일 경우, 각 속성은 공백 한 칸으로 구분합니다.

<!--href, target이라는 2개의 속성을 가진 a 태그-->
<a href="https://naver.com" target="_self">네이버</a>

✔ URL 정의와 종류

다시 href 속성으로 돌아와서, href의 속성 값으로는 URL이 들어갈 수 있습니다. URL에 대해 간단히 설명하자면, 우선 Uniform Resource Locator의 약자입니다. 명칭에서 추측할 수 있듯이 인터넷에서 HTML 페이지, CSS 문서, 이미지 등의 자원(Resource)의 위치를 나타낼 때 사용합니다.

URL은 절대(Absolute) URL, 상대(Relative) URL로 분류할 수 있습니다.

절대 URL: 접근하는 최초 시작점부터 경유한 경로를 모두 기록하여 자원의 위치를 나타냅니다.
상대 URL: 기준점을 기준으로 상대적인 경로를 기록하여 자원의 위치를 나타냅니다.

상대 URL에서는 index.html을 현재 기준점으로 생각했습니다.

✔ target 속성과 속성값

<a> 태그의 또 다른 속성으로는 target 속성이 있습니다. 이 속성은 클릭으로 링크를 오픈할 때 어디에서 오픈할지 정하는 속성입니다. 제일 많이 쓰는 속성 값으로는 "_self"와 "_blank"가 있습니다.

"_self": 현재 창에서 링크를 오픈합니다.
"_blank": 새 창(또는 탭)에서 링크를 오픈합니다.

✔ a 태그 사용 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>링크 태그</title>
</head>
<body>
    <a href="https://google.com">구글</a>
    <a href="https://naver.com" target="_self">네이버</a>
    <a href="https://facebook.com" target="_blank">페이스북</a>
</body>
</html>

✔ 링크의 기본 스타일

<a> 태그로 표현되는 링크의 기본 스타일은 다음과 같습니다.

아직 방문하지 않은 링크(unvisited link): 밑줄, 파란색
방문했던 링크(visited link): 밑줄, 보라색
활성화된(현재 마우스가 클릭하고 있는) 링크(active link): 밑줄, 빨간색

참고 사이트: tcpschool.com/html-tags/a

728x90

저작자표시 비영리 동일조건

'Client > HTML' 카테고리의 다른 글

[HTML] HTML 이미지, 동영상(유튜브), 음악 넣는 법 (0)	2021.04.28
[HTML] 제목, 본문, 글자 태그(h, p, br, pre, strong, em, b, sub, sup, ins, del 태그) (0)	2021.04.27
[HTML] 시맨틱 태그(Semantic Tag), HTML 레이아웃 (0)	2021.04.27
[HTML] HTML이란? HTML 개념 및 요소와 구조 (0)	2021.04.27
[HTML] Form(폼) 태그와 Input 태그 사용법 (0)	2020.06.08

현재글[HTML] 링크 태그 <a> 사용법, href, target 속성

250x250

docker, 모두 0으로 만들기, BOJ, 책 리뷰, CSS, 2018 카카오 코딩테스트, 오늘 또 일을 미루고 말았다, c++, 개발자의 글쓰기, AWS, EC2, spring, Python, 프로그래머스, display flex, html, 파이썬, Java, css flexbox, 백준,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

👾