Programming Language/HTML & CSS (웹 개발 관련)

[ HTML ] 링크를 클릭했을 때 새 창이나, 새 탭에서 열리게 하려면 어떤 코드를 작성해야 하나요??

티끌 코딩 2021. 7. 5. 23:38
반응형

 

 기본 링크에서 새 창과 새 탭이 열리게 하기 위해서는 HTML <a href= > 링크 코드 부분에 target blank 코드를 넣어주면, 현재 탭은 그대로 있고 새 탭에서 클릭한 링크로 연결됩니다. 기존 창을 그대로 유지하고 싶은 경우 이 코드를 사용해주면 효율적으로 페이지를 관리할 수 있습니다. 

코드 예시로 살펴보겠습니다. 

 

1. 현재 페이지를 없애고 링크 이동

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 현재 페이지 없애고 링크 이동 </title>
    </head>
    <body>

        <h3>
            <a href="https://collocationvoca.tistory.com">새로운 링크 이동</a>
        </h3>
    </body>

 링크 코드의 수정 없이 그대로 이 코드를 사용한다면, 현재 페이지는 남기지 않고 링크로 이동하게 됩니다. 검색 페이지가 더 이상 필요없는 경우 움직임을 최소화 할 수 있어 효율적이지만, 검색 창을 띄워두고 여러 페이지로 이동할 경우 불편합니다.

 

2. 현재 페이지를 남긴 채로 링크 이동

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 현재 페이지 남기고 새로운 링크로 이동 </title>
    </head>
    <body>

        <h3><a href="https://collocationvoca.tistory.com/" target="_blank">새로운 링크 이동</a></h3>
    </body>

  body 태그 안 <a href= > 태그 안을 보면 target을 blank 코드로 입력한 것을 볼 수 있습니다. 이렇게 html을 입력하게 될 경우 새 탭에서 해당 링크가 열리게 됩니다.

 

 

 저의 아주 작은 티끌 코딩 글이 블로그 방문자 님의 작업에 도움이 됐으면 좋겠습니다. 

 좋아요(❤) 버튼 ↙은 항상 감사합니다. 

 방문하신 모든 분들 좋은 하루 되세요 : ) 

반응형