HTML Academy · 강의

새 탭에서 링크 열기와 download 속성

링크 동작을 제어하기 위해 target 및 download 속성을 사용합니다.

레슨 3/413개 단계

새 탭에서 링크 열기와 download 속성은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

새 탭에서 열기

target 특성은 연결된 문서가 열리는 위치를 제어합니다.

<a href="https://example.com" target="_blank">Open in new tab</a>

<!-- target values:
  _blank  → new tab (or window)
  _self   → same tab (default)
  _parent → parent frame
  _top    → full window (exits frames)
-->

_blank의 보안 위험

예방 조치 없이 target="_blank"를 사용하면 보안 취약점이 발생합니다.

  • 새 페이지가 window.opener를 통해 원래 페이지를 제어할 수 있습니다
  • 악성 페이지가 원래 탭을 다른 곳으로 리디렉션할 수 있습니다
  • 이 공격을 역방향 탭 가로채기라고 합니다

rel=noopener noreferrer

target="_blank"를 사용할 때는 항상 rel="noopener noreferrer"를 추가하세요.

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->

새 탭은 언제 열어야 할까요?

target="_blank"에 관한 사용자 경험 지침:

  • 사용자가 앱을 벗어날 것으로 예상하지 않는 외부 사이트에 사용합니다
  • 참조 문서(PDF, 안내서)에 사용합니다
  • 내부 페이지 탐색에는 사용하지 마세요
  • 항상 사용자에게 알립니다 — 새 탭에서 열린다는 아이콘이나 제목을 추가합니다

사용자에게 새 탭임을 알리기

링크가 새 탭에서 열린다는 사실을 사용자에게 알려 주세요.

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Visit Example (opens in new tab)">
  Visit Example
  <span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
     The arrow icon gives visual users a hint -->

download 특성

download 특성은 연결된 파일로 이동하는 대신 브라우저가 해당 파일을 다운로드하도록 합니다.

<a href="/reports/q4-report.pdf" download>
  Download Q4 Report
</a>

<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
  Export CSV
</a>

download 특성의 제약

download 특성에는 다음과 같은 제한이 있습니다.

  • 동일 출처 URL에서만 작동합니다
  • 교차 출처 다운로드에는 서버가 Content-Disposition: attachment를 보내야 합니다
  • download의 파일 이름은 제안일 뿐이며 서버 헤더가 이를 덮어쓸 수 있습니다

데이터 URI 다운로드

데이터 URI를 사용하면 생성한 콘텐츠를 다운로드할 수 있습니다.

<a href="data:text/plain;charset=utf-8,Hello%20World!"
   download="hello.txt">
  Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->

JavaScript와 링크 대상

JavaScript가 탐색을 처리할 때는 target="_blank"를 남용하지 마세요.

// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.open

Ping 특성

ping 특성은 링크를 클릭할 때 POST 요청을 보냅니다(분석용).

<a href="/destination" ping="/analytics/track">
  Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->

링크의 type 특성

type 특성은 연결된 리소스의 MIME 유형을 나타냅니다.

<a href="/report.pdf" type="application/pdf">
  Download PDF Report
</a>
<a href="/data.json" type="application/json">
  JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->

확인 문제

target="_blank"와 항상 함께 사용해야 하는 보안 특성은 무엇인가요?

복습: target과 download

링크 동작을 제어하는 특성:

  • target="_blank" — 새 탭에서 엽니다
  • _blank와 함께 항상 rel="noopener noreferrer"를 추가합니다
  • 링크가 새 탭에서 열릴 때 시각적으로 사용자에게 알립니다
  • download — 탐색하는 대신 파일 다운로드를 실행합니다
  • download="filename" — 다운로드할 파일 이름을 제안합니다
무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스
40
레슨
159

자주 묻는 질문

“새 탭에서 링크 열기와 download 속성” 강의는 무료인가요?

네 — “새 탭에서 링크 열기와 download 속성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“새 탭에서 링크 열기와 download 속성”에서 뭘 배우나요?

링크 동작을 제어하기 위해 target 및 download 속성을 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“새 탭에서 링크 열기와 download 속성” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. anchor 요소와 href 속성
  2. 절대 URL과 상대 URL 비교
  3. 새 탭에서 링크 열기와 download 속성
  4. 섹션 연결과 프래그먼트 식별자
← HTML Academy(으)로 돌아가기