안녕하세요 냥장판 입니다
링크를 누르면 새창에서 페이지가 열리죠?
링크를 걸 때 새창에서 열기를 설정해서 그래요.
그럼 이거는 어떤가요?
두 개가 페이지를 여는 방식이 다르죠!
이번 게시글에서는 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">
'🎪 놀고있네 > HTML & CSS' 카테고리의 다른 글
| [HTML] display 요소(p, div, span)의 차이점 (6) | 2020.01.17 |
|---|---|
| [HTML] charset 의 중요성 ❤ (10) | 2020.01.16 |
| [HTML, Chrome] 크롬에서 HTML 작업하기 - 개발자도구 (6) | 2020.01.14 |
| [HTML] Link 태그 사용하기 - 맨위로 이동 (7) | 2020.01.11 |
| [HTML] Link 태그 사용하기 - download 속성 (6) | 2020.01.10 |
댓글