본문 바로가기
🎪 놀고있네/HTML & CSS

[HTML] Link 태그 사용하기 - 새창에서 페이지 열기

by 냥장판 2020. 1. 15.
반응형

 

 

 

안녕하세요 냥장판 입니다 

 

여기를 눌러보세요

 

링크를 누르면 새창에서 페이지가 열리죠?

링크를 걸 때 새창에서 열기를 설정해서 그래요.

 

그럼 이거는 어떤가요?

두 개가 페이지를 여는 방식이 다르죠!

이번 게시글에서는 Link 태그를 사용해서 페이지 여는 속성을 확인해봅시당!

target 속성

 

target 속성은 링크를 어디에서 여는지에 대해 설정할 수 있어요.

 

 

속성 내용
_blank 새 창이나 새 탭에서 페이지 열기
_self 현재 프레임(frame)에서 페이지 열기(기본설정)
_parent 부모 프레임(frame)에서 페이지 열기
_top 현재 창에서 full window로 페이지 열기

 

target 속성 사용방법

 

target 속성은 아래와 같이 작성합니다.

 

링크 걸어주고, target에 속성값 넣으면되요!



 

코드 보기

더보기
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>새창에서 페이지 열기 🐱‍💻</title> 
        <!-- Google fonts 와 연결 -->
        <link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
        
        <!-- class 구분하기 -->
        <style>
            a.latin {
                font-family: 'Dosis', sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>a태그의 target 속성</h1>
        <h2><a class="latin" href="https://miaow-miaow.tistory.com/" target="_blank">blank - 새 창 열기</a></h2>
        <h2><a class="latin" href="https://miaow-miaow.tistory.com/" target="_self">self - 현재 프레임에서 열기</a></h2>
        <h2><a class="latin" href="https://miaow-miaow.tistory.com/" target="_parent">parent - 부모 프레임에서 열기</a></h2>
        <h2><a class="latin" href="https://miaow-miaow.tistory.com/" target="_top">top - 가장 상위 프레임에서 열기</a></h2>
    </body>
</html>

 

 

 

 

 

 

     style="display:inline-block;width:740px;height:200px"
     data-ad-client="ca-pub-9512983930357661"
     data-ad-slot="5785466884">

 

 

하나씩 살펴보죠

 

  • 새 창에서 페이지 열기(blank)

새로운 탭에서 페이지를 여는 거죠.

 

  • 현재 프레임에서 페이지 열기(self)

 

 

새로운 탭에서 페이지를 열지 않고, 현재 페이지에서 열어요.

 

부모 프레임(parent frame)은 자기를 호출한 부모 페이지에서 화면 여는 것,

top은 현재페이지에서 화면 전체로 여는 것을 말해요.

 

사실 self, blank 만 알아도 문제는 없답니다.

 

특정 창안에서 페이지를 열고 싶을 때는 프레임에 이름을 지정해요(e.g. myframe)

 

 

코드 보기

더보기
<h2><a href="https://miaow-miaow.tistory.com/" target="myframe">myframe</a></h2>
<iframe name="myframe" style="width:50%; height: 330px"></iframe>

 

 

 

 

  • 이미지 파일로 페이지 열기

 

이미지 파일로 페이지 오픈할 때도 마찬가지에요

 코드 보기

더보기
<a href="https://miaow-miaow.tistory.com/" target="_blan">
  <img src="pop-up.png" alt="pop-up">
</a>

 

 

 

 

 

그럼 이만!


     style="display:inline-block;width:740px;height:200px"
     data-ad-client="ca-pub-9512983930357661"
     data-ad-slot="5785466884">


반응형

댓글