• 회원가입
  • 로그인
  • 구글아이디로 로그인

[attribute] HTML - target 속성 ★ - (링크된 문서 열 곳 / 폼 제출할 곳) 지정 (= target속성 = 타겟속성) ※ 링크 타겟 설정

목차
  1. target 예제 - <a>/<area> 태그 경우
  2. target 정의
  3. target 구문
  4. target 예제 - <base> 태그 경우
  5. target 예제 - <form> 태그 경우

 

target 예제 - <a>/<area> 태그 경우

<a> 태그 경우

(예) 새창으로 열기 

 

<a href="https://homzzang.com" target="_blank">홈짱닷컴</a>

 


<area> 태그 경우

(예) 새창으로 열기 

 

<img src="https://i.imgur.com/NUjTqSd.gif" width="389" height="26" border="0" usemap="#Search_Engine">
<map name="Search_Engine">
    <area shape="rect" coords="4,3,68,21" href="http://naver.com" target="_blank" onFocus="blur()">
    <area shape="rect" coords="78,4,119,20" href="http://daum.net" target="_blank" onFocus="blur()">
    <area shape="rect" coords="128,5,193,19" href="http://www.paran.com" target="_blank" onFocus="blur()">
    <area shape="rect" coords="204,3,259,20" href="http://nate.com" target="_blank" onFocus="blur()">
    <area shape="rect" coords="269,2,323,20" href="http://www.google.co.kr/" target="_blank" onFocus="blur()">
    <area shape="rect" coords="331,4,385,18" href="http://kr.yahoo.com/" target="_blank" onFocus="blur()">

 

target 정의

 

요소에 따라 의미 다름.

  • <a>/<area> 태그 경우 - 링크 문서를 열 위치 지정.
  • <base> 태그 경우 - 페이지의 모든 하이퍼링크 및 폼에 대한 기본 대상을 지정.
  • <form> 태그 경우 - 폼 제출 후 받은 응답을 표시할 위치 나타내는 이름 또는 키워드 지정.

 


 

1.

 

2.

모든 브라우저 지원.

 

 

target 구문


  • <a target="_blank|_self|_parent|_top|framename">
  • <area target="_blank|_self|_parent|_top|framename">
  • <base target="_blank|_self|_parent|_top">
  • <form target="_blank|_self|_parent|_top|framename">

 


[속성값]

 

  • _blank - 새창이나 새탭에서 링크 열기
  • _self - (기본값) 현재창이나 클릭한 것과 동일 프레임에서 링크 열기
  • _parent - 부모창(= 상위 프레임)에서 링크 열기
  • _top  - 최상위창(=창 전체)에서 링크 열기
  • framename - 지정 프레임에서 열기 (※ BASE 태그에선 사용 X)

 

 

target 예제 - <base> 태그 경우

(예) 링크 기본 타겟을 새창으로 지정.

 

<head>

    <base target="_blank">

</head>


<body>

    <a href="https://homzzang.com">홈짱닷컴</a>

    <a href="https://sir.kr">그누보드</a>

</body>


결과보기

 

target 예제 - <form> 태그 경우

(예) 액션파일을 새창에서 열기

 

<form action="/action_page.php" method="get" target="_blank">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name"><br><br>

  <label for="nick">별명:</label>

  <input type="text" id="nick" name="nick"><br><br>

  <input type="submit" value="확인">

</form>

 

결과보기



분류 제목
attribute HTML - onloadedmetadata 속성 - 미디어 로드되고 준비 완료 시 실행 (= onloaded…
attribute HTML - onbeforeunload 속성 - 사용자가 웹페이지 떠날 때 떠나기 전 실행 (= onbefo…
attribute HTML - checked 속성 ★ - 미리 (체크박스/라디오) 체크 여부 지정 (= checked속성 = …
attribute HTML - align 속성 - (HTML5 지원 X) 정렬 지정 (= align속성 = 얼라인속성)
attribute HTML - colspan 속성 ★ - 병합할 가로셀 개수 지정 (= colspan속성 = 콜스팬속성)
attribute HTML - scope 속성 - <th> (테이블헤더셀)의 범위 지정 (= scope속성 = 스코우프속성/스…
attribute HTML - autoplay 속성 - 자동재생 여부 지정 (= autoplay속성 = 오토플레이속성)
attribute HTML - onerror 속성 - 미디어파일 로딩 에러 시 실행 (= onerror속성 = 온에러속성) ※…
attribute HTML - onchange 속성 ★ - 요소값 변경 이벤트 시 실행 (= onchange속성 = 온체인지속…
attribute HTML - autocomplete 속성 - 자동완성 여부 지정 (= autocomplete속성 = 오토컴플…
form HTML - <input type="week"> 태그 - 연도와 몇주차인지 선택 입력 (= 인풋위크타입/위크…
form HTML - <input type="date"> 태그 - 연월일(년월일) 입력 (= 인풋데이트타입/데이트타입…
attribute HTML - wrap 속성 - FORM 제출 시, TEXTAREA 텍스트 감싸기 (= wrap속성 = 랩속성…
attribute HTML - onmouseover 속성 ★ - 마우스커서가 지정요소 위에 있을 때 실행 (= onmouseo…
attribute HTML - ondblclick 속성 ★ - 요소 더블클릭 이벤트 시 실행 (= ondblclick속성 = …
attribute HTML - accesskey 속성 ★ - 요소접근키 (= accesskey속성 = 액세스키속성) ※ 요소접…
attribute HTML - minlength 속성 ★ - 입력 가능한 최소 글자 개수 지정 (= minlength속성 =…
image HTML - <picture> 태그 - 해상도 크기에 따라 다른 이미지 표시 지정 (= picture태그 =…
attribute HTML - placeholder 속성 - 입력값 '샘플/힌트/예시' 제공 (= placeholder속성 =…
attribute HTML - onblur 속성 ★ - 포커스 해제 이벤트 시 실행 (= onblur속성 = 온블러속성) ※ …
9/18
목록
찾아주셔서 감사합니다. Since 2012