anchor(``) 링크는 target과 rel을 포함해 어떻게 동작하나요?

Question

anchor(`<a>`) 링크는 target과 rel을 포함해 어떻게 동작하나요?

Accepted Answer

``(anchor) element는 하이퍼링크를 만듭니다. 그 `href`는 목적지이며, URL, 경로, 페이지 내 앵커, 또는 특수 스킴이 될 수 있습니다. ```html External site Internal page (relative) Jump to an element with id="section2" Send email Call us ``` ## 새 탭에서 열기 — 그리고 보안 주의사항 ```html Opens in a new tab ``` `target="_blank"`은 새 탭을 열지만, **`rel="noopener"`**를 추가해야 합니다. 이것이 없으면 새 페이지가 `window.opener`에 접근하여 여러분의 페이지를 리다이렉트할 수 있습니다("tab-nabbing" 공격). `noreferrer`는 referrer 헤더도 제거합니다. 최신 브라우저는 `_blank`에 대해 `noopener`를 암묵적으로 적용하지만, 명시적으로 추가하는 것이 모범 사례입니다. ## rel attribute는 관계를 전달합니다 ```html SEO 랭킹을 전달하지 않음 (신뢰할 수 없는/사용자 링크) 보안: window.opener 접근 차단 유료/제휴 링크 ``` ## 페이지 내 내비게이션 ```html Back to top ...

...

``` 클릭하면 fragment와 `id`가 일치하는 element로 스크롤됩니다. ## 왜 중요한가 Anchor는 웹 내비게이션의 근간입니다. `href` 스킴(상대, 절대, fragment, `mailto`/`tel`), `target="_blank"` + `rel="noopener"` 보안 조합, SEO와 관련된 `rel` 값을 아는 것은 올바르고 안전한 링크 작성에 필수적입니다.