새 탭에서 링크 열기와 download 속성
링크 동작을 제어하기 위해 target 및 download 속성을 사용합니다.
새 탭에서 링크 열기와 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.openPing 특성
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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- anchor 요소와 href 속성
- 절대 URL과 상대 URL 비교
- 새 탭에서 링크 열기와 download 속성
- 섹션 연결과 프래그먼트 식별자