target(타깃) 속성이란?
target 속성은 사용자가 링크를 클릭했을 때 해당 링크를 어느 위치에서 열지를 지정하는 HTML 속성입니다.
아래 링크를 클릭하면 현재 브라우저 탭(창)과 동일한 탭에서 TechStacker의 첫 화면으로 이동합니다:
<a href="https://techstacker.com/">첫 화면으로 가는 링크</a>즉, 다른 웹사이트로 연결되는 링크를 만들면 사용자는 여러분의 사이트를 떠나 링크된 사이트로 이동하게 됩니다. 이러한 동작을 원할 수도 있고 원하지 않을 수도 있습니다.
기본값은 언제나 _self
이런 동작이 일어나는 이유는 <a> 요소의 target 속성이 기본적으로 _self 값으로 설정되어 있기 때문입니다. _self는 '사용자가 현재 있는 같은 창에서 링크를 열어라'라는 의미입니다.
예를 들어 다음과 같이 작성한 링크 요소는,
<a href="https://techstacker.com/"></a>브라우저가 실제로 읽는 코드는 아래와 같습니다:
<a href="https://techstacker.com/" target="_self"></a>코드에는 표시되지 않기 때문에 처음에는 혼란스러울 수 있지만, 이제 그 원리를 알게 되셨습니다.
새 탭에서 링크 열기: _blank 값 사용하기
링크가 새 브라우저 탭에서 열리길 원한다면, 기본값인 _self 대신 _blank 값으로 덮어쓰면 됩니다:
<a href="https://youtube.com" target="_blank" rel="noopener">이 링크를 클릭하면 유튜브 사이트가 새 탭에서 열립니다</a>언제 어떤 값을 사용해야 할까?
간단히 답하자면, SEO 등의 이유로 사용자를 내 웹사이트에서 떠나게 하고 싶지 않다면 target="_blank"를 사용하세요.
반대로 굳이 지정할 필요가 없다면 아무것도 설정하지 않아도 됩니다. 링크는 기본적으로 _self 값에 따라 같은 브라우저 창에서 열립니다.
중요: target="_blank"를 사용할 때는 보안상의 이유로 rel="noopener" 속성을 함께 추가하는 것이 좋습니다. 특히 외부 웹사이트로 연결되는 링크일수록 더욱 그렇습니다. noopener는 새로 열린 페이지가 원본 페이지를 조작하는 것을 막아주는 역할을 합니다.