Frontend/HTML

하이퍼링크관련 태그

이파댥 2024. 6. 4. 20:06
하이퍼링크 관련 태그

a(anchor : 연결, 고정) 태그

        - 현재 HTML 문서와 다른 HTML 문서를 연결 시켜 
          페이지를 이동할 수 있게 만드는 태그

        - a 태그로 감싸진 글, 내용을 하이퍼 텍스트로 연결(하이퍼링크를 통해서)
        
        하이퍼링크 : hyper(최고의) link(연결)

        a 태그 사용 
            href="연결하고자 하는 웹사이트 주소나 HTML 파일 이름 작성"
            target="_blank" 새 탭에서 열기

            href (HyperText REFerence) : 연결할 주소를 지정하는 속성
        
        #
        HTML 에서 주로 페이지 내부의 특정 위치로 이동할 때 사용
        단독으로 사용하면 현재 페이지의 맨 위로 이동하거나 
        페이지에서 특정 요소로 이동할 수 있음
        스크롤 효과나 페이지 안에서 탐색할 때 사용
        페이지 맨 위로 이동
        
        #변수명
        #변수명은 a 태그를 제외한 모든 태그에서 (a 태그도 가능하긴 함) 
        id="변수명" 으로 이동하는 속성
        만약에 일치하는 변수명이 없으면 이동하지 않음

        id 는 다른 태그에서 id 변수명을 불러올 때 맨 앞에 # 을 붙여서 사용
        class 는 다른 태그나 속성에서 class 변수명을 불러 올 때 맨 앞에 . 을 붙여서 사용

          
  1. 글자 관련 태그
  2. 목록 관련 태그
  3. 목록 실습
<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>하이퍼링크 관련 태그</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h1>a(anchor : 연결, 고정) 태그</h1>
    <pre>
        - 현재 HTML 문서와 다른 HTML 문서를 연결 시켜 
          페이지를 이동할 수 있게 만드는 태그

        - a 태그로 감싸진 글, 내용을 하이퍼 텍스트로 연결(하이퍼링크를 통해서)
        
        하이퍼링크 : hyper(최고의) link(연결)

        a 태그 사용 
            href="연결하고자 하는 웹사이트 주소나 HTML 파일 이름 작성"
            target="_blank" 새 탭에서 열기

            href (HyperText REFerence) : 연결할 주소를 지정하는 속성
        
        #
        HTML 에서 주로 페이지 내부의 특정 위치로 이동할 때 사용
        단독으로 사용하면 현재 페이지의 맨 위로 이동하거나 
        페이지에서 특정 요소로 이동할 수 있음
        스크롤 효과나 페이지 안에서 탐색할 때 사용
        <a href="#">페이지 맨 위로 이동</a>
        
        #변수명
        #변수명은 a 태그를 제외한 모든 태그에서 (a 태그도 가능하긴 함) 
        id="변수명" 으로 이동하는 속성
        만약에 일치하는 변수명이 없으면 이동하지 않음

        id 는 다른 태그에서 id 변수명을 불러올 때 맨 앞에 # 을 붙여서 사용
        class 는 다른 태그나 속성에서 class 변수명을 불러 올 때 맨 앞에 . 을 붙여서 사용

          </pre>

    <ol>
        <li><a href="01_글자관련태그.html">글자 관련 태그</a></li>
        <li><a href="02_목록관련태그.html">목록 관련 태그</a></li>
        <li><a href="03_목록실습.html" target="_blank">목록 실습</a></li>
        
    </ol>

  </body>
</html>