HTML에서 링크를 클릭했을 때 새 브라우저 탭으로 열리도록 하려면, 앵커 요소(<a>)에 target 속성을 하나만 추가하면 됩니다.
href 속성이 이동할 링크 경로(URL) 값을 필요로 하는 것처럼, target 속성 역시 브라우저가 새 탭을 열도록 지시하는 특정 값이 필요합니다. 그 값이 바로 _blank입니다.
새 탭에서 링크 열기 예제
아래 링크를 클릭하면 Techstacker 홈페이지가 현재 페이지를 벗어나지 않고 새 탭에서 열립니다.
예제의 HTML 코드
<a href="https://techstacker.com" target="_blank" rel="noopener">Techstacker.com 바로가기</a>알아두면 좋은 점: rel="noopener" 속성
예제 코드에 포함된 rel="noopener" 속성은 보안과 성능을 위해 함께 사용하는 것이 좋습니다. target="_blank"로 열린 새 탭은 기존 페이지와 연결되어 있어, 악의적인 사이트가 원래 페이지를 조작할 수 있는 잠재적 위험이 있습니다. rel="noopener"(또는 rel="noreferrer")를 추가하면 이러한 위험을 차단할 수 있습니다.
생각보다 아주 간단하죠? 이제 여러분의 웹사이트에서도 방문자를 놓아주지 않는 새 탭 링크를 자유롭게 활용해 보세요!