HTML의 <base> 요소에서 target 속성은 문서 내 모든 하이퍼링크가 클릭될 때 기본적으로 어디서 열릴지 지정하는 역할을 합니다. 페이지의 모든 링크에 일일이 target을 설정하지 않고도 한 번의 선언으로 전체 링크 동작 방식을 통일할 수 있어 매우 유용합니다.
target 속성 문법
기본 문법은 다음과 같습니다.
<base target="_blank|_self|_parent|_top|frame">
속성 값별 동작 방식
- _blank – 연결된 문서를 새 창 또는 새 탭에서 엽니다.
- _self – 링크가 클릭된 동일한 프레임(현재 페이지)에서 문서를 엽니다. 기본값입니다.
- _parent – 부모 프레임에서 문서를 엽니다.
- _top – 창 전체 영역에서 문서를 엽니다. 즉, 모든 프레임 구조를 해제하고 최상위 창에 표시합니다.
- frame – 지정된 이름(name)을 가진 특정 프레임에서 문서를 엽니다.
예제 코드
이제 <base> 요소의 target 속성을 실제로 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html> <html> <head> <base href="https://www.example.com/tutorials/" target="_blank"> </head> <body> <h2>튜토리얼 목록</h2> <p>Java 튜토리얼</p> <p>(https://www.example.com/tutorials/java.html 로 이동)</p> <p>jQuery 튜토리얼</p> <p>(https://www.example.com/tutorials/jquery.html 로 이동)</p> <p>Blockchain 튜토리얼</p> <p>(https://www.example.com/tutorials/blockchain.html 로 이동)</p> <p>Python 튜토리얼</p> <p>(https://www.example.com/tutorials/python.html 로 이동)</p> </body> </html>
실행 결과
위 코드를 실행하면 아래와 같은 화면이 출력됩니다. target 값이 _blank로 설정되어 있으므로, 목록의 어떤 링크를 클릭하더라도 해당 문서는 항상 새 창(새 탭)에서 열립니다.
코드 설명
예제에서는 head 영역 안에 다음과 같이 기준 URL(base URL)을 설정했습니다.
<base href="https://www.example.com/tutorials/" target="_blank">
또한 <base> 요소의 target 속성을 아래처럼 지정했기 때문에,
target="_blank"
문서 내의 모든 URL은 별도의 설정 없이 자동으로 새 창에서 열리게 됩니다. 이처럼 <base> 태그의 target 속성을 활용하면 링크의 열기 방식을 문서 단위로 손쉽게 관리할 수 있습니다.