Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- DOM
- Semantic
- 코딩테스트
- display:flex
- CSS
- 조건문
- 와이어프레임
- 시멘틱
- jsx
- 반복문
- 생활패턴
- node.js
- 자바스크립트
- React
- 재귀함수
- 페어프로그래밍
- html5
- 웹접근성
- HTTP
- GUI
- 공부
- cli
- 리액트
- 야행성
- javascript
- target="_blank"
- a태그
- 네트워크
- API
- 숙면기원
Archives
- Today
- Total
뉴비 개발자의 학습일기
[HTML5]-<a> 태그 사용 시 새 창에서 페이지가 열리도록 하는 법 본문
<a> 태그는 anchor의 약자로 하이퍼링크를 넣고 싶을 때 사용하는 태그이다.
이 태그를 href 속성과 함께 사용하여 아래 이미지처럼 하이퍼링크를 삽입할 수 있는데, 2번 째 줄의 "./login.html" 링크처럼 작성된 경우에는 사용자가 현재 보고 있는 페이지에서 해당 링크로 이동하게 된다.
이 때, 이동하는 것이 아니라 새 창에서 페이지가 열리도록 하고 싶다면 target="_blank"를 써주면 된다.
처음 이미지의 HTML 코드를 브라우저를 통해 보면 이런 페이지가 출력된다. 여기서 로그인 페이지를 누를 경우
이렇게 보고 있던 페이지 자체가 해당 페이지로 이동한다. 해당 링크는 작성만 해놓았을 뿐 실제로는 아무것도 존재하지 않는 더미 링크이기 때문에 이렇게 오류가 발생한다.
반면에 target="_blank"를 사용해 작성한 코드스테이츠 홈페이지 링크를 클릭할 경우 위 이미지처럼 원래 페이지는 그대로 유지되고, 새 창에서 해당 링크가 열리는 것을 볼 수 있다.
'프론트엔드 과거의 흔적' 카테고리의 다른 글
[2023.02.16]-Flexbox를 이용한 레이아웃 잡기, 첫 페어프로그래밍 (0) | 2023.02.16 |
---|---|
[2023.02.15]-CSS의 기본적 사용법에 대해 배운 날 (0) | 2023.02.16 |
[CSS]-개념과 기초 문법 (0) | 2023.02.15 |
[2023.02.14]-HTML5의 기본 구조와 자주 사용하는 HTML5 요소 (0) | 2023.02.14 |
[2023.02.13]-SEB_FE_44기와의 첫 만남 (0) | 2023.02.13 |