HTML 외부 링크 — target=_blank · text-decoration 완전 정리

 

 

Web Development · HTML Link

HTML 외부 링크 —
새 탭 열기 · 링크 스타일 완전 정리

target=_blank로 새 창 열기 + text-decoration으로 밑줄 제거

시작 오늘 분석할 코드

외부 사이트로 가는 링크를 만들고, 같은 창 / 새 창 두 가지 방식을 비교한다. 또 CSS로 링크의 기본 스타일(파란 글씨 + 밑줄)을 바꾸는 방법도 함께 본다.

<style> a { text-decoration: none; color: black; } </style> <p><a href="http://www.easyspub.com">이지스퍼블리싱 홈페이지(현재 화면)</a></p> <p><a href="http://www.easyspub.com" target="_blank">이지스퍼블리싱 홈페이지(새 창 또는 새 탭)</a></p>

실제 출력 결과

이지스퍼블리싱 홈페이지(현재 화면)

이지스퍼블리싱 홈페이지(새 창 또는 새 탭)

용어 용어 정리

aAnchor — 링크 태그

href이동할 URL 또는 #id

target링크 열릴 위치 지정

_blank새 탭/창에서 열기

text-decoration밑줄·취소선 제어 CSS

noopener새 창 열 때 보안 옵션

---

1 target 속성 — 링크가 열리는 위치

<a> 태그의 target 속성은 "링크를 어디에서 열 것인가"를 지정한다. 기본은 현재 창에서 열리지만, 다른 창이나 탭으로 열도록 바꿀 수 있다.

target 값	동작	사용 빈도
_self (기본)	현재 창/탭에서 열림	가장 흔함
_blank	새 창/탭에서 열림	외부 링크 표준
_parent	iframe의 부모 창에서	iframe 시
_top	최상위 창 전체에서	iframe 시
이름 (예: "win1")	해당 이름 창 재사용	드묾

※ 새 탭이냐 새 창이냐는 브라우저 설정에 따라 다르다. 보통 데스크톱은 새 탭, Shift 누르고 클릭하면 새 창. 개발자가 강제할 수는 없다.

---

2 같은 창 vs 새 창 — 언제 어떤 걸?

같은 창 (_self / 기본)

내부 링크
같은 사이트 내 이동
네비게이션 메뉴
"뒤로가기" 자연스러움

새 창 (_blank)

외부 사이트 링크
참고 자료 / 출처
PDF·이미지 등 미디어
현재 페이지 작업 유지하고 싶을 때

※ 사용자 경험 관점: 새 창이 너무 많이 열리면 짜증난다. 외부로 나가거나 잠깐 참고할 때만 _blank를 권장.

---

3 _blank의 보안 함정 — noopener

target="_blank"로 새 창을 열면, 새로 열린 페이지가 JavaScript로 원래 페이지를 조작할 수 있다. 악의적으로 쓰면 피싱 사이트로 리다이렉트 시킬 수 있다.

※ 새로 열린 페이지가 window.opener.location = "피싱사이트"를 실행 → 원래 페이지가 가짜 로그인 페이지로 바뀜. 사용자는 모르는 사이에 정보 탈취당함.

해결: rel="noopener" 추가

<a href="https://example.com" target="_blank" rel="noopener noreferrer">외부 링크</a>

속성	역할
noopener	새 창에서 원래 창을 조작 못하게
noreferrer	HTTP referer 헤더 차단 (추적 방지)

※ 모던 브라우저(Chrome 88+ 등)는 target="_blank" 시 noopener를 자동 적용. 그래도 명시하는 게 호환성·안전성 모두 ↑.

---

4 text-decoration: none — 밑줄 제거

링크의 기본 스타일은 파란 글씨 + 밑줄이다. 디자인 의도에 맞지 않을 때 CSS로 제거할 수 있다.

text-decoration 값	효과
none	아무 장식 없음 (이번 코드)
underline	밑줄 (기본)
overline	윗줄
line-through	취소선

※ 밑줄을 완전히 없애면 "이게 링크인지 일반 글씨인지" 구분이 어려워진다. 색상이나 hover 효과로 보완해야 사용성이 유지됨.

반응형

---

 

5 링크의 5가지 상태 (Pseudo Class)

링크는 단순히 한 가지 모양만 갖지 않는다. 사용자 행동에 따라 5가지 상태를 가진다.

상태	CSS 셀렉터	의미
:link	a:link	방문 안 한 링크
:visited	a:visited	방문한 적 있는 링크
:hover	a:hover	마우스 올림
:active	a:active	클릭 중
:focus	a:focus	키보드 Tab으로 포커스

a { color: #333; text-decoration: none; } a:hover { color: #2d6a4f; text-decoration: underline; } /* 마우스 올렸을 때 색 변화 + 밑줄 표시 */

※ LVHA 순서 — Link → Visited → Hover → Active 순으로 CSS 작성하면 우선순위 충돌 없음.

---

6 자주 하는 실수

실수	증상	해결
외부 링크에 _blank 안 줌	외부 사이트로 빠져나감	외부 링크는 _blank 권장
_blank만 쓰고 noopener 누락	보안 취약점	rel="noopener" 추가
밑줄만 없애고 색도 그대로	일반 글씨처럼 보여 클릭률 ↓	색·hover로 링크 표시
http:// 빠뜨림	같은 사이트의 경로로 인식	외부면 https:// 명시
모든 링크에 _blank	탭이 너무 많아짐	외부·미디어만 새창

---

핵심 한 줄 요약

target="_blank"새 탭/창에서 열기

기본값_self — 같은 창에서 열림

rel="noopener"_blank 보안 옵션 — 함께 사용

text-decorationnone으로 밑줄 제거

a:hover마우스 올렸을 때 스타일

LVHA 순서link → visited → hover → active

외부 vs 내부외부면 _blank, 내부면 _self

Tags

#a태그 #target #_blank #href #HTML #새창 #새탭 #외부링크 #text-decoration #링크스타일 #noopener #CSS #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

a태그, target, _blank, href, HTML, 새창, 새탭, 외부링크, text-decoration, 링크스타일, noopener, CSS, 웹개발, 티스토리