Minwoo Dev.

<a> 본문

Web

<a>

itisminu 2023. 7. 23. 10:50
728x90
반응형
SMALL

<a> 태그는 HTML 문서에서 링크를 첨부할 때 사용하는 태그이다.

자세한 정보는 아래와 같다.

 

 

정의 및 사용법

태그 <a>는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의합니다.

<a> 요소의 가장 중요한 속성은 링크의 대상을 나타내는 속성인 href 입니다. 

기본적으로 링크는 모든 브라우저에서 다음과 같이 표시됩니다.

  • 방문하지 않은 링크는 밑줄과 파란색으로 표시됩니다.
  • 방문한 링크는 밑줄과 보라색으로 표시됩니다.
  • 활성된 링크는 밑줄과 빨간색으로 표시됩니다.

팁 및 참고사항

팁 : <a> 태그에 href 속성이 없으면 하이퍼링크의 자리 표시자일 뿐입니다.

팁 : 다른 대상을 지정하지 않는 한 연결된 페이지는 일반적으로 현재 브라우저 창에 표시됩니다.

도움말 : CSS를 사용하여 링크 스타일 지정하기  : CSS 링크 및 CSS 버튼.

Definition and Useage

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Tips and Notes

Tip : If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.

Tip : A linked page is normally displayed in the current browser window, unless you specify another target.

Tip : Use CSS to style links : CSS Links and CSS Buttons.

 

 

출처 - https://www.w3schools.com/tags/tag_a.asp

 

HTML a tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

<!doctype html>
<html>

<head>
  <title>My introduction</title>
  <meta charset="utf-8">
</head>

<body>
  <h1>About Me</h1>
  <h2>MY NAME</h2>
  <p>나의 이름은 <strong>이민우</strong> 이고, 영어로는 <strong>LEE MIN WOO</strong>, 한자로는 <strong>李旼宇</strong> 이다.<br></p>
  <h2>NETWORK OF CONTACTS</h2>
  <p>
    <strong>Phone</strong> : 010-0000-0000<br>
    <strong>E-mail</strong> : minwoo1119@naver.com<br>
    <strong>school</strong> : Kumoh Institute of Technology (KIT), Gumi, Gyeongsangbuk-do, Reapublic of Korea<br>
    <strong>Major department</strong> : Computer science<br>
    <strong>Instagram</strong> : minwoo_is_minu<br>
    <strong>GitHub</strong> : minwoo1119</a><br>
  </p>
</body>

</html>

결과

My introduction

About Me

MY NAME

나의 이름은 이민우 이고, 영어로는 LEE MIN WOO, 한자로는 李旼宇 이다.

NETWORK OF CONTACTS

Phone : 010-0000-0000
E-mail : minwoo1119@naver.com
school : Kumoh Institute of Technology (KIT), Gumi, Gyeongsangbuk-do, Reapublic of Korea
Major department : Computer science
Instagram : minwoo_is_minu
GitHub : minwoo1119

 

 

 

 다음과 같은 HTML 코드가 있다고 하자. 

나는 Kumoh Institute of Technology 에 학교 사이트를 연결하고 싶다.

 

<a> 태그를 사용하여 작성하면

 

<!doctype html>
<html>

<head>
  <title>My introduction</title>
  <meta charset="utf-8">
</head>

<body>
  <h1>About Me</h1>
  <h2>MY NAME</h2>
  <p>나의 이름은 <strong>이민우</strong> 이고, 영어로는 <strong>LEE MIN WOO</strong>, 한자로는 <strong>李旼宇</strong> 이다.<br></p>
  <h2>NETWORK OF CONTACTS</h2>
  <p>
    <strong>Phone</strong> : 010-0000-0000<br>
    <strong>E-mail</strong> : minwoo1119@naver.com<br>
    <strong>school</strong> : <a href="https://www.kumoh.ac.kr/ko/index.do">Kumoh National Institute of Technology
      (KIT), Gumi, Gyeongsangbuk-do, Reapublic of Korea</a><br>
    <strong>Major department</strong> : Computer science<br>
    <strong>Instagram</strong> : minwoo_is_minu<br>
    <strong>GitHub</strong> : minwoo1119</a><br>
  </p>
</body>

</html>

결과

My introduction

About Me

MY NAME

나의 이름은 이민우 이고, 영어로는 LEE MIN WOO, 한자로는 李旼宇 이다.

NETWORK OF CONTACTS

Phone : 010-0000-0000
E-mail : minwoo1119@naver.com
school : Kumoh National Institute of Technology (KIT), Gumi, Gyeongsangbuk-do, Reapublic of Korea
Major department : Computer science
Instagram : minwoo_is_minu
GitHub : minwoo1119

 

 

학교 이름에 링크가 정상적으로 연결된 것을 볼 수 있다.

하지만 지금 상황으로는 링크에 접속하면 새 탭으로 접속하는 것이 아니라 불편함이 있다.

 

<!doctype html>
<html>

<head>
  <title>My introduction</title>
  <meta charset="utf-8">
</head>

<body>
  <h1>About Me</h1>
  <h2>MY NAME</h2>
  <p>나의 이름은 <strong>이민우</strong> 이고, 영어로는 <strong>LEE MIN WOO</strong>, 한자로는 <strong>李旼宇</strong> 이다.<br></p>
  <h2>NETWORK OF CONTACTS</h2>
  <p>
    <strong>Phone</strong> : 010-0000-0000<br>
    <strong>E-mail</strong> : minwoo1119@naver.com<br>
    <strong>school</strong> : <a href="https://www.kumoh.ac.kr/ko/index.do" target="_blank">Kumoh National Institute of
      Technology
      (KIT), Gumi, Gyeongsangbuk-do, Reapublic of Korea</a><br>
    <strong>Major department</strong> : Computer science<br>
    <strong>Instagram</strong> : minwoo_is_minu<br>
    <strong>GitHub</strong> : minwoo1119</a><br>
  </p>
</body>

</html>

결과

My introduction

About Me

MY NAME

나의 이름은 이민우 이고, 영어로는 LEE MIN WOO, 한자로는 李旼宇 이다.

NETWORK OF CONTACTS

Phone : 010-0000-0000
E-mail : minwoo1119@naver.com
school : Kumoh National Institute of Technology (KIT), Gumi, Gyeongsangbuk-do, Reapublic of Korea
Major department : Computer science
Instagram : minwoo_is_minu
GitHub : minwoo1119

 

target="_blank" 요소를 추가하여 새 탭에서 링크가 연결되도록 설정할 수 있다.

 

 

나머지 소개들도 모두 링크를 연결해보겠다.

<!doctype html>
<html>

<head>
  <title>My introduction</title>
  <meta charset="utf-8">
</head>

<body>
  <h1>About Me</h1>
  <h2>MY NAME</h2>
  <p>나의 이름은 <strong>이민우</strong> 이고, 영어로는 <strong>LEE MIN WOO</strong>, 한자로는 <strong>李旼宇</strong> 이다.<br></p>
  <h2>NETWORK OF CONTACTS</h2>
  <p>
    <strong>Phone</strong> : 010-0000-0000<br>
    <strong>E-mail</strong> : minwoo1119@naver.com<br>
    <strong>school</strong> : <a href="https://www.kumoh.ac.kr/ko/index.do" target="_blank">Kumoh National Institute of
      Technology
      (KIT), Gumi, Gyeongsangbuk-do, Reapublic of Korea</a><br>
    <strong>Major department</strong> : <a href="https://ce.kumoh.ac.kr/ce/index.do" target="_blank">Computer
      science</a><br>
    <strong>Instagram</strong> : <a href="https://www.instagram.com/minwoo_is_minu/"
      target="_blank">minwoo_is_minu</a><br>
    <strong>GitHub</strong> : <a href="https://github.com/minwoo1119" target="_blank">minwoo1119</a><br>
  </p>
</body>

</html>

결과

My introduction

About Me

MY NAME

나의 이름은 이민우 이고, 영어로는 LEE MIN WOO, 한자로는 李旼宇 이다.

NETWORK OF CONTACTS

Phone : 010-0000-0000
E-mail : minwoo1119@naver.com
school : Kumoh National Institute of Technology (KIT), Gumi, Gyeongsangbuk-do, Reapublic of Korea
Major department : Computer science
Instagram : minwoo_is_minu
GitHub : minwoo1119

 

 

정리

  • <a> 태그는 하이퍼링크를 삽입할 때 사용한다.
  • href 속성을 이용하여 하이퍼링크를 달아준다.
  • target 속성을 이용하면 새 탭에서 열리게 할 수 있다.
728x90
반응형
LIST
저작자표시

'Web' 카테고리의 다른 글

HTML Project - About Minwoo (1)  (0) 2023.07.29
HTML Project - About Minwoo  (0) 2023.07.29
<title>, <html>, <head>, <body>, HTML 문서의 기본 구조  (0) 2023.07.22
<li> 태그, 목차를 나타내는 방법  (0) 2023.07.22
<img> 태그, 속성(Attribute)  (0) 2023.07.22
'Web' Related Articles more