html target 속성에 대하여 알아보기

네 안녕하세요, 이번 포스팅에서는 target 속성에 대하여 알아보도록 하겠습니다.

target 속성은 html을 사용하다 보면 거의 필연적으로 사용을 하게 되는 속성입니다.

그만큼 사용하는 빈도가 높은 편이기 때문에 매우 중요한 요소입니다.

그럼 지금부터 시작하도록 하겠습니다.

1. target 속성으로 문서를 출력할 윈도 지정하기

target 속성은 <base>, <a>, <area>, <form> 태그에서 사용이 되는 속성인데,

html 페이지를 출력할 윈도를 지정하는 데 사용을 합니다.

target 속성은 이런 식으로 사용을 합니다.

<!-- 윈도우 이름으로 타겟 지정하여 창 열기 -->

<iframe src="http://www.w3c.org" name="frame1"></iframe>
...
<a href="http://www.w3c.org" target="frame1">W3C</a>

<!-- 새 창을 타겟으로 지정하여 창 열기 -->

<iframe src="http://www.w3c.org" name="_blank"></iframe>
...
<a href="http://www.w3c.org" target="_blank">W3C</a>

<!-- 현재 탭을 타겟으로 지정하여 창 열기 -->

<iframe src="http://www.w3c.org" name="_self"></iframe>
...
<a href="http://www.w3c.org" target="_self">W3C</a>

<!-- 부모 윈도우를 타겟으로 지정하여 창 열기 -->

<iframe src="http://www.w3c.org" name="_parent"></iframe>
...
<a href="http://www.w3c.org" target="_parent">W3C</a>

<!-- 모든 탭을 제거하고 최상위 윈도우(브라우저 창)을 타겟으로 지정하여 창 열기 -->

<iframe src="http://www.w3c.org" name="_top"></iframe>
...
<a href="http://www.w3c.org" target="_top">W3C</a>

이런 식으로 윈도 우명을 직접 지정을 할 수도 있고,

새 창을 열 수도, 현재 탭에서 열 수도 있으며,

부모 창, 브라우저 창에서도 본인이 윈 하는 대로 열 수가 있습니다.

그럼 간단한 예제 코드로 한 번 살펴볼까요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>target 속성 활용</title>
</head>
<body>
    <h3>target 속성 활용</h3>
    <hr>
    <iframe src="2-24-sitelist.html" name="left" width="200" height="300"></iframe>
    <iframe src="http://www.w3c.org" name="right" width="300" height="300"></iframe>
</body>
</html>

이건 왼편에 html 페이지를 불러오는 코드, 그리고 오른쪽에 웹 사이트를 띄우는 코드를 적어놓은 겁니다.

그래서 왼편에 띄울 html 페이지가 필요합니다.

그럼 이어서 여기에 추가해야 하는 코드를 작성해 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>사이트 리스트</title>
</head>
<body>
    <h4>사이트 리스트</h4>
    <ul>
        <li>
            <a href="http://www.w3c.org" target="right">W3C</a>
            </li><li><a href="http://www.etnews.com" target="_self">전자신문</a>
            </li><li><a href="http://www.mk.co.kr" target="_top">매일경제신문</a>
            </li><li><a href="http://www.w3c.org" target="_blank">새 창에 W3C</a>
        </li>
    </ul>
</body>
</html>

이렇게 지정을 해주시면 오른편에는 W3C 사이트가 띄워져 있고,

왼편에는 해당 사이트들로 가는 링크들이 달려있는 걸 볼 수 있습니다.

그럼 결과 화면도 같이 보실까요?

이런 식의 화면이 뜨게 됩니다.

W3C는 오른쪽에 생겼고,

전자신문은 클릭 시 왼편에 창이 생길 것이고,

메일 경제신문은 최상위 윈도인 브라우저 창에 생길 것이고,

제일 마지막 링크는 W3C를 새 창에서 띄우는 링크입니다.

여기까지 인라인 프레임 사용법에 대하여 알아보았습니다.

다음 포스팅에서는 html에 미디어를 삽입하는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사합니다 ~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > html' 카테고리의 다른 글

html header, nav, section, article, aside, footer 태그로 시멘틱 웹 구성해보기 (0)	2023.03.02
html video 태그와 audio 태그, source 태그로 미디어 삽입하기 (0)	2023.03.02
html iframe 태그로 인라인 프레임 사용하기 (0)	2023.03.02
html a 태그로 하이퍼링크(하이퍼텍스트, 하이퍼미디어)와 다운로드 링크 만들기 (0)	2023.03.02
html 고급 문서 만들기 3 - table 태그로 표 만들기 (0)	2023.03.01

개발러 L의 뻔fun한 코딩

html target 속성에 대하여 알아보기