반응형
[Html & CSS] a href 새창, 현재창 에서 오픈 하는 방법 !!(+ 설명)
HTML에서 <a> 태그(anchor 태그)를 사용하여 링크를 만들 때, 링크가 어떻게 열릴지 지정할 수 있습니다.
새 창이나 탭에서 링크를 열려면 target 속성을 _blank로 설정하고,
현재 창에서 링크를 열려면 target 속성을 _self로 설정하거나 target 속성을 생략합니다.
예시코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://seill.tistory.com/" target="_blank">Visit Example.com</a>
<br>
<a href="https://seill.tistory.com/" target="_self">Visit Example.com</a>
<br>
<a href="https://seill.tistory.com/" target="_parent">Visit Example.com</a>
<br>
<a href="https://seill.tistory.com/" target="_top">Visit Example.com</a>
</body>
</html>
target 속성은 다음과 같은 여러 값을 가질 수 있습니다:
- _blank: 링크를 새 창이나 탭에서 엽니다.
- _self: 링크를 현재 창이나 탭에서 엽니다. 이것은 기본값이므로, target 속성을 생략하면 _self로 간주합니다.
- _parent: 링크를 현재 프레임의 부모 프레임에서 엽니다.
- _top: 링크를 현재 프레임을 무시하고 최상위 레벨의 창이나 탭에서 엽니다.
보안상의 이유로, target="_blank"를 사용할 때는 rel="noopener noreferrer" 속성을 추가하는 것이 좋습니다. 이렇게 하면 새 창에서 열린 페이지가 원본 페이지에 접근하는 것을 제한하여 보안을 강화할 수 있습니다.
보안을 강화하여 새 창에서 링크 열기:
<a href="https://seill.tistory.com/" target="_blank" rel="noopener noreferrer">Visit Example.com</a>
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [Html & CSS] 백그라운드(background-color) 투명하게 만드는 방법 !! (0) | 2024.01.02 |
|---|---|
| [Html & CSS] 초간단 자동으로 움직이는 사진 슬라이드 예시 코드 !! (0) | 2023.11.15 |
| [Html & CSS] span 태그에 onclick 온클릭 이벤트 넣는 방법 !! (0) | 2023.11.08 |
| [HTML & CSS] html에서 "visibility:hidden" 과 "display:none" 에 대한 설명 및 차이점(+사용 예시) (0) | 2023.11.07 |
| [Html & CSS] input에 검색 시 정규식으로 영어랑 숫자만 입력 시키는 방법 !! (0) | 2023.08.10 |
댓글