HTML기초 : a태그 (링크)

hi098123 2020. 8. 2. 00:11

HTML에서 하이퍼링크(이하 링크)를 작성하는 방법은 a태그를 이용하면 됩니다.

a태그에는 다양한 값을 이용할 수 있습니다.

href
target
rel
download

href는 필수로 사용하며 target으로 어떻게 링크를 열지 선택할 수 있습니다.

href

href는 이동할 페이지의 url을 의미한다.

<a href="https://hi098123-skin.tistory.com/19">hi098123-skin</a>

이렇게 작성하면

hi098123-skin

이렇게 링크가 생깁니다.

target

_blank

<a href="https://hi098123-skin.tistory.com/" target="_blank">hi098123-skin</a>

링크를 새창으로 엽니다. 많이 사용되는 속성중 하나입니다.

예시 : hi098123-skin

_self

<a href="https://hi098123-skin.tistory.com/" target="_self">hi098123-skin</a>

현재창에서 링크를 엽니다. 기본값입니다.

(target을 설정하지 않으면 자동으로 _self로 설정됨)

_parent

<a href="https://hi098123-skin.tistory.com/" target="_parent">hi098123-skin</a>

부모창에서 링크를 엽니다. 주로 사용할 일이 없습니다.

_top

<a href="https://hi098123-skin.tistory.com/" target="_top">hi098123-skin</a>

최상위 부모에서 링크를 엽니다. 주로 사용하지 않습니다.

만약 페이지가 (부모) A->B->C (자식) 일때 C에서 링크 클릭시 A페이지 탭에서 링크로 이동

이런 페이지는 본적이 거의 없을겁니다.

주로 _blank 설정시에만 사용됩니다.

_parent와 _top은 쓸일이 별로 없기 때문에 모르고 있어도 상관없습니다.

rel

rel은 relationship의 약자로 링크와 페이지의 관계를 나타냅니다.

* noopener 값은 보안과 관련있으므로 필요시 적절히 쓰셔야됩니다.

값	의미
alternate	영어 단어 뜻은 대체하다. 프린트용 페이지, 번역된 페이지등 같은 콘텐츠의 다른 문서로 이동을 의미
author	글 작성자에 대한 링크
bookmark	즐겨찾기용 URL
external	외부 사이트 링크임을 의미
help	도움말 링크를 제공
license	저작권정보를 링크
next	다음 문서
nofollow	검색엔진(크롤러)이 접근하지 말라는 의미
noreferrer	링크된 사이트의 서버로 방문페이지를 전송하지 않음
noopener	window.opener을 방지한다. 외부 사이트링크시 필수요소
prev	이전 문서
search	문서를 찾기위한 검색링크
tag	현재문서의 키워드를 링크

만약 noopener를 안썻는데 연 사이트가 악성 사이트라면?

아래 같은 코드로 이전페이지를 조작할 수 있다.

만약 이전페이지와 같은 모양이라면 해커는 낚시에 성공할 수 있을것입니다.

window.opener.location = 'https://fakewebsite/facebook.com/page.html';

download

이 속성은 IE는 지원하지 않습니다.

<a href="이미지 주소" download="hi098123.png">다운로드</a>

이미지 주소를 입력하고 이렇게 만들고, 다운로드를 누르면 hi098123.png로 저장이됩니다.

제한사항

동일한 url에서 다운로드하는 링크 (CORS)
blob url
data: uri

스타일 변경하기

링크에 밑줄 없애기

링크에 기본적으로 웹브라우저에서 밑줄이 있습니다.

아래의 코드는 크롬 브라우저의 a태그 기본 값으로, text-decoration: underline으로 링크에 밑줄이 설정되어있습니다.

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

a태그의 text-decoration 옵션을 none로 설정하면 링크에 밑줄이 사라집니다.

a{
    text-decoration: none;
}

방문한 링크 색상바꾸기

방문한링크는 기본적으로 보라색으로 표시됩니다.

방문한 링크를 선택하는 CSS선택자는 a:visited이며 색상 등 여러 스타일을 변경가능합니다.

a:visited {
    color: #959595;
}

만약 이렇게 설정한다면, 방문한 링크는 회색계열 색상이됩니다.

'티스토리 > HTML' 카테고리의 다른 글

HTML 기초 : title attribute 툴팁을 만들자. (0)	2020.08.11
티스토리 스킨 ##_rp_rep_class_## (0)	2020.08.07
HTML기초 : h1 ~ h6 태그 (3)	2020.08.01
HTML기초 : <title> (3)	2020.08.01
HTML기초 : DIV 와 display (0)	2020.08.01

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 한 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.

링크 공유는 가능합니다. 만약, 본문 공유 시 링크 공유를 해주세요

댓글 0개

댓글 남기러가기