실행 가능한 HTML 문서: 새 탭에서 열기

Q: HTML에서 링크를 새 탭에서 열리게 하려면 어떻게 하나요?

태그에 target="blank"를 추가하세요. Example 처럼요. 브라우저가 현재 페이지는 그대로 두고 새 탭에서 페이지를 열어요.

Q: target="_blank"에 아직도 rel="noopener"가 필요한가요?

현재 Chrome, Firefox, Safari는 target="_blank" 링크에 noopener를 자동으로 적용해서, 새 페이지가 window.opener로 내 페이지에 접근할 수 없어요. rel="noopener"를 써도 손해가 없고 오래된 브라우저의 방문자를 보호하니, 대부분의 스타일 가이드는 여전히 쓰라고 해요.

Q: noopener와 noreferrer는 무엇이 다른가요?

noopener는 두 탭 사이의 연결을 끊어요(새 탭에서 window.opener가 null). noreferrer는 그 일에 더해 브라우저가 내 페이지 URL을 리퍼러로 보내지 않게 해서, 상대 사이트의 분석 도구는 그 방문을 직접 방문으로 봐요.

Q: HTML로 링크를 탭이 아니라 새 창에서 열도록 강제할 수 있나요?

아니요. target="_blank"는 새 브라우징 컨텍스트를 요청할 뿐이고, 그게 탭인지 창인지는 브라우저와 사용자 설정이 정해요. 현재 브라우저는 탭으로 열어요.

Q: 페이지의 모든 링크를 새 탭에서 열려면 어떻게 하나요?

에 를 넣으세요. 그러면 자체 target이 없는 모든 링크가 새 탭에서 열려요. 폼에도 영향을 주니 정말 그걸 원하는 페이지에서만 쓰세요.

target="_blank"로 새 탭에서 링크 열기

링크에 target="_blank"를 추가하세요. 브라우저가 목적지를 새 탭에서 열고 내 페이지는 그대로 둬요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

방법은 이게 전부예요. <a>에 target="_blank"를 주고, 다음에 설명할 rel="noopener"를 더하면 돼요. 독자는 Ctrl+클릭(Mac에서는 Cmd+클릭)이나 가운데 버튼 클릭으로 어떤 링크든 직접 새 탭에서 열 수 있으니, 반쯤 채운 폼이나 재생 중인 영상처럼 페이지를 떠나면 손해가 생길 때만 target="_blank"를 쓰세요.

이 페이지의 미리보기는 예제 프레임이 다른 곳으로 이동하면 안 되기 때문에 target이 있든 없든 모든 외부 링크를 새 탭에서 열어요. target이 만드는 차이를 보려면 예제를 파일로 저장해서 브라우저로 열어 보세요.

rel="noopener"와 rel="noreferrer"

예전에는 target="_blank"로 열린 페이지가 window.opener로 내 페이지에 대한 참조를 얻었고, 그걸로 내 탭을 다른 URL(예를 들어 가짜 로그인 페이지)로 보낼 수 있었어요. rel="noopener"는 그 참조를 없애요.

`rel` 값	새 탭의 `window.opener`	새 사이트로 리퍼러 전송
없음(오래된 브라우저)	내 페이지	예
없음(현재 브라우저)	`null`	예
`noopener`	`null`	예
`noreferrer`	`null`	아니요
`opener`	내 페이지	예

현재 버전의 Chrome, Firefox, Safari는 rel="opener"를 쓰지 않는 한 모든 target="_blank" 링크를 noopener로 취급해요. 그래도 rel="noopener"를 쓰면 오래된 브라우저의 방문자를 보호하고 코드에서 의도가 드러나요.

noreferrer는 브라우저가 리퍼러를 보내지 않게 해서, 링크한 사이트는 방문자가 어느 페이지에서 왔는지 알 수 없어요. 이건 보안이 아니라 개인정보 보호를 위한 선택이에요. 내 URL을 비공개로 해야 할 때 쓰고, 내 트래픽을 확인해야 하는 파트너 링크에는 빼세요.

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel은 공백으로 구분한 여러 값을 받기 때문에 noopener를 SEO용 값과 함께 쓸 수 있어요. 유료 링크에는 rel="noopener sponsored", 보증하지 않는 링크에는 rel="noopener nofollow"를 써요.

새 탭에서 열린다고 알려 주세요

예고 없이 열리는 새 탭은 혼란스러워요. 특히 페이지가 바뀐 걸 알아채지 못할 수 있는 스크린 리더 사용자에게 그래요. 링크에서 알려 주세요. 작은 아이콘은 보는 사용자에게, 숨긴 텍스트는 스크린 리더 사용자에게 알려 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

a[target="_blank"] 선택자가 새 탭 링크마다 화살표를 자동으로 붙여서 빼먹을 일이 없어요. 숨긴 span은 링크 이름의 일부로 "accessibility guidelines (opens in a new tab)"처럼 읽히지만 화면에서는 자리를 차지하지 않아요.

모든 외부 링크 자동으로 표시하기

속성 선택자로 href에 따라 링크에 스타일을 입힐 수 있어요. 여기서는 http로 시작하는 모든 링크에 화살표가 붙고, 사이트 안의 링크에는 붙지 않아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^=는 "~로 시작함"이라는 뜻이에요. 선택자는 링크에 스타일만 입혀요. target과 rel 속성은 여전히 HTML에 써야 해요.

target 값

target은 링크가 열릴 곳을 정해요. 키워드가 네 개 있고, 그 밖의 값은 이름이에요.

`target`	링크가 열리는 곳
`_self`	같은 탭이나 프레임. 기본값이에요.
`_blank`	이름 없는 새 탭
`_parent`	현재 프레임의 부모(프레임 밖에서는 `_self`와 같음)
`_top`	모든 프레임을 벗어나 탭 전체
아무 이름, 예: `help`	그 이름의 탭이나 프레임, 없으면 새로 만듦

이름을 준 target은 재사용돼요. target="help"인 링크는 모두 같은 탭에서 열리기 때문에, 도움말 링크 다섯 개를 클릭해도 탭은 다섯 개가 아니라 하나예요. <iframe> 안에서 링크가 프레임이 아니라 페이지 전체를 바꿔야 할 때는 _top을 쓰세요.

base 요소로 모든 링크를 새 탭에서 열기

<head> 안의 <base target="_blank">는 페이지의 모든 링크와 폼의 기본 target을 정해요.

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

링크 자체의 target이 <base>보다 우선해요. 거의 쓰지 마세요. 모든 링크가 새 탭에서 열리는 페이지는 쓰기 불편해요.

JavaScript로 새 탭 열기

window.open(url, '_blank')는 스크립트에서 탭을 열어요. rel 속성과 같은 보호를 받으려면 세 번째 인자로 'noopener'를 넘기세요. 그러면 window.open은 새 탭에 대한 참조 대신 null을 돌려줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

브라우저는 클릭이나 키 입력에 대한 응답이 아니면 window.open을 차단하니까, 페이지 로드 때나 타이머 뒤가 아니라 이벤트 리스너에서 호출하세요. 독자가 미리 볼 수 있는 URL이 목적지라면 target="_blank"가 있는 링크가 더 간단하고 JavaScript 없이도 동작해요. 링크 자체는 HTML a 태그에서 다뤄요.

자주 하는 실수

밑줄 없이 target="blank"로 씀. 키워드가 아니라 이름이에요. 처음에는 새 탭을 열지만, 그다음부터는 같은 이름을 가진 모든 링크가 그 탭을 재사용해요.
target="_new". 이것도 그냥 이름이고 효과도 같아요. 재사용되는 탭 하나예요.
모든 링크에 target을 줌. 내부 링크는 같은 탭에서 열려야 해요. 새 탭을 원하는 독자는 여는 법을 알아요.
새 탭에서 열린다는 표시가 없음. 아이콘과 숨긴 텍스트를 추가하세요.
파트너나 제휴 링크에 noreferrer를 붙임. 그러고 나서 파트너 쪽에 유입이 안 잡힌다고 의아해하게 돼요.

자주 묻는 질문

HTML에서 링크를 새 탭에서 열리게 하려면 어떻게 하나요?

<a> 태그에 target="_blank"를 추가하세요. <a href="https://example.com" target="_blank" rel="noopener">Example</a>처럼요. 브라우저가 현재 페이지는 그대로 두고 새 탭에서 페이지를 열어요.

target="_blank"에 아직도 rel="noopener"가 필요한가요?

현재 Chrome, Firefox, Safari는 target="_blank" 링크에 noopener를 자동으로 적용해서, 새 페이지가 window.opener로 내 페이지에 접근할 수 없어요. rel="noopener"를 써도 손해가 없고 오래된 브라우저의 방문자를 보호하니, 대부분의 스타일 가이드는 여전히 쓰라고 해요.

noopener와 noreferrer는 무엇이 다른가요?

noopener는 두 탭 사이의 연결을 끊어요(새 탭에서 window.opener가 null). noreferrer는 그 일에 더해 브라우저가 내 페이지 URL을 리퍼러로 보내지 않게 해서, 상대 사이트의 분석 도구는 그 방문을 직접 방문으로 봐요.

HTML로 링크를 탭이 아니라 새 창에서 열도록 강제할 수 있나요?

아니요. target="_blank"는 새 브라우징 컨텍스트를 요청할 뿐이고, 그게 탭인지 창인지는 브라우저와 사용자 설정이 정해요. 현재 브라우저는 탭으로 열어요.

페이지의 모든 링크를 새 탭에서 열려면 어떻게 하나요?

<head>에 <base target="_blank">를 넣으세요. 그러면 자체 target이 없는 모든 링크가 새 탭에서 열려요. 폼에도 영향을 주니 정말 그걸 원하는 페이지에서만 쓰세요.