HTML의 링크 태그
2024. 12. 13. 15:19ㆍFullStack Steps/HTML Practicing
이번 시간에는 HTML의 링크 태그에 대해 알아보려고 한다.
링크(link)란?
-링크란 현재 문서에서 다른 문서로 이동하는 수단을 의미한다.
링크(anchor)란?
- a 태그 요소는 href 속성을 통해 다른 페이지, 전화번호 , 이메일 주소와
그외 다른 url로 연결할 수 있는 링크를 만든다.
- anchor는 인라인 요소이며 컨텐츠는 주로 링크의 목적지를 나타낸다.
링크에 대해 간단히 소개 했으니 직접 사용해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
<h3>Html 링크 설명</h3>
<hr>
<!-- a 태그는 anchor의 약자이며 href는 a의 속성이라고 한다. -->
<!-- href 속성은 hyperlink Reference의 약자이다 -->
<!-- src 속성과 마찬가지로 경로를 설정하게되면 해당 경로로 이동한다 -->
<a href="_00_hello.html">1.Hello 예제</a>
<a href="_01_font_tag.html">2.폰트태그 예제</a>
<a href="_02_list_tag.html">3.목록태그 예제</a>
<a href="_03_image_tag.html">4.이미지태그 예제</a>
<a href="_04_video_tag.html">5.비디오태그 예제</a>
<!-- 필자는 이때까지 블로그에 작성하기 위해 사용했던 파일을 불러왔다 -->
</body>
</html>
다음은 실행 결과다
a 태그는 인라인 속성이기 때문에 옆으로 줄줄이 출력된다. br 태그만 추가해주자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
<h3>Html 링크 설명</h3>
<hr>
<!-- a 태그는 anchor의 약자이며 href는 a의 속성이라고 한다. -->
<!-- href 속성은 hyperlink Reference의 약자이다 -->
<!-- src 속성과 마찬가지로 경로를 설정하게되면 해당 경로로 이동한다 -->
<a href="_00_hello.html">1.Hello 예제</a><br>
<a href="_01_font_tag.html">2.폰트태그 예제</a><br>
<a href="_02_list_tag.html">3.목록태그 예제</a><br>
<a href="_03_image_tag.html">4.이미지태그 예제</a><br>
<a href="_04_video_tag.html">5.비디오태그 예제</a><br>
<!-- 필자는 이때까지 블로그에 작성하기 위해 사용했던 파일을 불러왔다 -->
</body>
</html>
이제 좀 보기 좋다. 자 이제 하나하나 클릭해보면 해당 파일들이 실행되면서 우리가 이전에 실행했던 예제들을 볼 수 있을 것이다.
필자가 블로그엔 기록하지 않았지만 공부하면서 이것저것 만져진 부분이 있어서 이전 예제랑 약간 다를 순 있다.
다음은 하나하나 눌러 봤을 때 결과다.
이렇게 필자가 공부했던 예제들이 HTML에서 잘 불러와졌다.
이 뿐만 아니라 여러모로 img 태그와 비슷한 a 태그 역시 온라인 상의 주소 또한 HTML 화면에 출력할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
<h3>Html 링크 설명</h3>
<hr>
<a href="_00_hello.html">1.Hello 예제</a><br>
<a href="_01_font_tag.html">2.폰트태그 예제</a><br>
<a href="_02_list_tag.html">3.목록태그 예제</a><br>
<a href="_03_image_tag.html">4.이미지태그 예제</a><br>
<a href="_04_video_tag.html">5.비디오태그 예제</a><br>
<br>
<br>
<!-- 대한민국에서 홈페이지로 저장된 가장 대표적인 사이트들을 들어가보자 -->
<a href="https://www.naver.com/">네이버 Site</a><br>
<a href="https://www.daum.net/">다음 Site</a><br>
<a href="https://www.google.com/">구글 Site</a><br>
</body>
</html>
코드를 실행해 보고 정말 네이버, 다음, 구글까지 들어가지는지 확인해보자!
만족스럽게도 세 사이트 전부 a 태그의 href 속성을 통해 접속한 것을 확인할 수 있다.
오늘 이렇게 링크에 대해 알아보았다!
'FullStack Steps > HTML Practicing' 카테고리의 다른 글
| HTML의 입력 담당 태그 input과 form 태그 (0) | 2024.12.13 |
|---|---|
| HTML의 컨테이너 태그와 전역 속성 (1) | 2024.12.13 |
| HTML에서 이미지와 동영상 그려보기 (2) | 2024.12.13 |
| HTML에서 목록 표시하기 (0) | 2024.12.13 |
| HTML의 텍스트 표시 방법과 태그의 구분(Block VS Inline) (2) | 2024.12.12 |