웹프로그래밍 HTML/태그와 멀티미디어

<a>태그

별초롱언니 2025. 3. 5. 11:14

▣ <a> 태그

· 다른 사이트 혹은 같은 문서 내 다른 위치로 이동할 때 사용

· href 속성값에 URL을 입력해 원하는 곳으로 이동 

     <a hrdf="URL">

표기 유형 표기 예
절대경로 URL 표기 href="http://www.w3.org/index.html"
상대경로 URL 표기 href="hello.html"
<base>태그에 기본 URL지정
페이지 내 요소 위치 표기 href="#top"
프로토콜 URL 표기 https://, ftp://, mailto:, file: 등
스크립트 표기 href="javascript:alert('Hello');"

 

▣ 웹 사이트 간 이동

· hrdf 속성 : 연결하고자 하는 웹 사이트의 URL 지정

· target 속성 : 링크를 클릭했을 때 웹 사이트가 열릴 곳 지정 

속성값 설명
_blank 새로운 웹 브라우저 창에 연다.
_self 현재 웹 브라우저 창에 연다. (기본)
_parent 부모 웹 브라우저 창에 연다.
_top 웹 브라우저 전체 영역에 연다. 

 

♧ 타깃 속성값에 따른 결과 확인하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>타깃 속성값에 따른 결과 확인하기</title>
</head>
<body>
  <header>
    <center>
      <h2>&lt; 하이퍼링크 관련 태그 &gt;</h2>
    </center>
  </header>
  <section>
    <p>
      <a href="http://www.w3.org" target="_blank">W3C 사이트(blankwindow)</a></p>
      <a href="http://www.w3.org" target="_self">W3C 사이트(selfwindow)</a></p>
      <a href="http://www.w3.org" target="_parent">W3C 사이트(parentwindow)</a></p>
      <a href="http://www.w3.org" target="_top">W3C 사이트(topwindow)</a></p>
    </article>
  </section>
</body>
</html>

 

♧ 베이스 태그 사용하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>base tag</title>
  <base href="http://www.w3.org/"/>
</head>
<body>
  <header>
    <center>
      <h2>&lt; 베이스 태그 사용 &gt;</h2>
    </center>
  </header>
  <section>
    <article>
      <a href="standards/" target="_blank">W3C STANDARDS</a>
      </p>
      <a href="Consortium/mission.html" target="_blank">W3C MISSION</a>
      </p>
      <a href="Consortium/facts.html" target="_blank">FACTS ABOUT W3C</a>
      </p>
      <a href="Consortium/presskit.html" target="_blank">PRESS AND ANALYSTS</a>
      </p>
    </article>
  </section>
</body>
</html>

 

▣ 문서 내 특정 위치로 이동

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>책갈피 기능 사용하기</title>
</head>
<body>
  <header>
    <center>
      <h2>&lt; 책갈피 기능 &gt;</h2>
    </center>
  </header>
  <section>
    <article>
      <a href="#name">[이름]</a>&nbsp;
      <a href="#add">[주소]</a>&nbsp;
      <a href="#tel">[전화번호]</a>&nbsp;
      <a href="#foot">[참고]</a>&nbsp;
    </article>
  </section>

  <p>정보 영역</p>
  ...생략
  <p>정보 영역</p>
  <br>
  
<!-- id는 고유한 값 -->
  <p><a id="name">별초롱</a></p>
  <a href="#top">[TOP]</a>
  <p>정보 영역</p>
  ...생략
  <p>정보 영역</p>
  <br>

  <p><a id="add">창원시 마산회원구 양덕북12길 113, 4층</a></p>
  <a href="#top">[TOP]</a>
  <p>정보 영역</p>
  ...생략
  <p>정보 영역</p>
  <br>

  <p><a id="tel">055-716-1771</a></p>
  <a href="#top">[TOP]</a>
  <p>정보 영역</p>
  ...생략
  <p>정보 영역</p>
  <br>

  <p><a id="foot">참고</a></p>
  <a href="#top">[TOP]</a>
  <p>정보 영역</p>
  ...생략
  <p>정보 영역</p>

</body>
</html>