html 하이퍼링크 a tag 4가지 속성 특징 using html hyperlink a tag arrtibutes

html에서 하이퍼링크인 a 태그를 사용하면 새로운 웹페이지를 어떻게 나타낼지 결정할 수 있다. 4가지 방식이 있지만, 보통 _blank 옵션을 자주 사용한다. _blank 옵션은 a 태그의 target 속성에 지정할 수 있는데 이 옵션을 사용하면 새 탭에서 이동할 웹페이지의 내용이 나타난다.

html 하이퍼링크 a tag 4가지 속성 특징
using html hyperlink a tag arrtibutes

현재의 웹페이지에서 다른 웹페이지 또는 웹사이트로 이동하기 위해 사용하는 것이 하이퍼링크 태그이다.

하이퍼링크 태그는 a tag 를 말하는데 이 태그를 이용하면 현재 페이지는 없어지고 이동하고자 하는 웹페이지가 나온다.

그렇기에 하이퍼링크 태그인 a tag에는 옵션과 같은 속성이 있다.

이 속성들을 이용하면 현재페이지에 대해 영향을 주기도 그렇지 않을 수도 있다. 적당히 프로세스에 맞게 사용하면 그만이다.

a tag 옵션 4가지

다른 웹페이지나 웹사이트로 이동하기 위해 사용하는 a 태그에는 옵션이 4가지가 있다. 이 옵션들을 사용하기 위한 a 태그의 속성은 target 을 이용한다.

target 속성에 4가지 중 하나의 옵션을 주면 다른 웹페이지로 이동하는 동작에 차이를 보인다.

즉, 이동할 웹페이지를 어떻게 열 것인지에 대한 옵션이라 생각해도 된다.

아래는 target 속성에 적용되는 옵션의 종류이다.

<a href="이동할 url" target="옵션">텍스트</a>

_self
기본값, 웹브라우저의 현재 탭에서 새로운 웹페이지로 이동한다.
_blank
웹브라우저의 새로운 탭을 열고 새로운 웹페이지로 이동한다.
_parent
웹페이지에 부모 프레임이 있다면 부모 프레임의 페이지에서 새로운 웹페이지로 이동한다.
_top
이동할 웹페이지가 전체 창으로 나타난다.

샘플코드

위의 내용으로 html 의 하이퍼링크인 a 태그에 대한 예제를 만들어 본다.

_parent 와 _top 의 경우 잘 사용하지 않지만 _blank 의 경우는 자주 사용되기도 한다.

현재 웹페이지에서 다른 메뉴의 내용을 보여줄 필요가 있거나 혹은 성격이 다른 웹페이지를 보여주고자 할 경우는 _blank 옵션을 사용하여 새 탭 또는 새 창에서 데이터를 보여줄 필요가 있다.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>
    
	<!-- 문서 정보 -->
	<head>
        <style>
        </style>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>
        <div>
            <p>
            	<a href="https://www.google.com" target="_self">구글 target : self</a>
            </p>
            <p>
            	<a href="https://www.google.com" target="_blank">구글 target : blank</a>
            </p>
            <p>
            	<a href="https://www.google.com" target="_parent">구글 target : parent</a>
            </p>
            <p>
            	<a href="https://www.google.com" target="_top">구글 target : top</a>
            </p>
        </div>
	</body>
    <!-- // -->

</html>
<!-- // -->

새로운 웹페이지로 이동하기 위한 a 태그의 target 속성 4가지를 사용했다.

위의 코드는 프레임을 사용하지 않았기 때문에 거의 같은 표현방식을 보여주고 있다.

하지만, target=_blank 의 속성의 경우 웹브라우저의 새 탭이 열리면서 이동할 페이지가 보여질 것이다.

결과 화면을 보자.

'programming > web' 카테고리의 다른 글

html 링크 태그 버튼 모양 스타일 적용하기 using html link tag button style (0)	2022.05.14
html 링크태그 색깔 종류 using html hyper link tag colors (0)	2022.05.10
html css 테두리 선과 마진 패딩 차이 html border margin padding (0)	2022.04.25
html css 글자 폰트 스타일 지정 방법 using html font style (0)	2022.04.23
html css 외부 스타일 적용 사용 방법 using html css external style (0)	2022.04.21