오봉이와 함께하는 개발 블로그

하이퍼링크 태그 본문

FE/HTML

하이퍼링크 태그

오봉봉이 2021. 12. 2. 16:34
728x90

FrontEnd_day1 정리 (2021.12.02 목요일)

하이퍼링크 태그

  • 하이퍼링크로 문서를 연결하는 <a> 태그 (앵커 태그)
  • 원하는 문서나 사이트로 연결
  • 한 문서 내 다른 영역으로 이동 (한 페이지 안에서 지정된 영역으로 이동)
  • <a href="파일 경로" target="연결된 문서가 보여줄 위치(프레임영역)">
  • 사이트로 이동 : <a href=”http://www.naver.com”>
  • 다른 문서로 이동 : <a href=”newMember.html”>
  • 문서 내 다른 영역으로 이동 : <a href=”#jQuery”>id가 jQuery인 영역으로 이동</a>
    • <h3 id="jQuery">temp</h3>
하이퍼링크 예제
  • index.html
<!DOCTYPE html>
<html lang="en">
<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>Hello World!</title>
</head>
<body>
    <h1>HeadLine 1</h1>
    <hr>
    <br>
    <br>
    <h2>HeadLine 2</h2>
    <h3>HeadLine 3</h3>    
    <!-- 주석 입니다 -->
</body>
</html>
  • hyperlink.html
<!DOCTYPE html>
<html lang="en">
<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>HyperLink : a tag</title>
</head>
<body>
    <h3>사이트로 이동</h3>
    <a href="http://www.naver.com">네이버로 이동</a>
    <h3>다른 문서로 이동</h3>
    <a href="index.html">index로 이동</a>
    <h3>문서 내 다른 영역으로 이동</h3>
    <a href="#javascript">id가 javascript인 곳으로 이동</a><br> <br>
    <a href="#jquery">id가 jquery인 곳으로 이동</a><br> <br>
    <a href="#css">id가 css인 곳으로 이동</a><br> <br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <h3 id="javascript">javascript</h3>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <h3 id="jquery">jquery</h3>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <h3 id="css">css</h3>
</body>
</html>
728x90
저작자표시

'FE > HTML' 카테고리의 다른 글

테이블 태그  (0) 2021.12.02
목록태그  (0) 2021.12.02
텍스트 관련 태그  (0) 2021.12.02
문서 구조 태그  (0) 2021.12.02
HTML의 구조와 태그  (0) 2021.12.02
'FE/HTML' Related Articles more
Comments