[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서

HTML5 2023. 7. 20. 17:06
반응형
앵커 태그는 다른 문서로 이동하거나, 같은 문서의 특정 위치로 이동하거나 혹은 다른 문서의 특정 위치로 이동하는데 사용됩니다.

 

[ 문법 ]

1. 다른 문서로 이동하려는 경우, href 속성에 이동하려는 문서의 경로 혹은 URL을 넣고 “링크 텍스트”를 클릭하면 해당 문서로 이동하게 됩니다.

01 	<a href="url">링크 텍스트</a>
02 	<!-- 예 -->
03 	<a href="https://google.com">구글로 이동</a>
04 	<a href="../test.html">test 문서 열기</a>

 

 

2. 같은 문서의 특정 위치로 이동하려는 경우(내부 링크), href에 #를 이용해서 id값을 지정하고 이동하고자 하는 태그에 같은 id값을 써주면 된다.
여기서 “Section 1로 이동”을 클릭하면 화면이 스크롤 하면서 해당 위치로 이동하게 됩니다.

01 	<a href="#section1">Section 1로 이동</a>
02 	...
03 	...
04 	...
05 	<h1 id="section1">Section 1</h1>

 

 

3. 다른 문서의 특정 위치로 이동하려는 경우 위의 1, 2번에서 설명한 것을 모두 사용하면 됩니다.
즉 href의 url끝에 id를 추가해주면 url의 문서로 이동한 후 id값이 있는 곳을 스크롤 됩니다.

01 	<!-- test1. html -->
02 	<a href="https://test.com/test2.html#Section1">test2.html로 이동</a>

 

01 	<!-- test2. html -->
02 	...
03 	...
04 	...
05 	<h2 id=”Section1” >test.html에서 이동해 오는 곳</h2>

 

 

앵커 태그는 인터넷이 지금처럼 발전할 수 있도록 하는데 기반을 만들어 준 태그입니다. 
초창기 인터넷은 문서의 특정 단어나 문장을 클릭하면 링크된 문서로 이동하는 기능을 이용해서 학자들 간 논문이나 문서를 효과적으로 사용하기 위해 개발되었습니다.
그것이 발전을 거듭해 지금의 거대한 인터넷이 된 것이지요. 만일 앵커 태그가 없었다면 불가능한 일이었을 겁니다.

 

 

<a> - Anchor 태그 사용 설명서

 

반응형
저작자표시 비영리 변경금지

'HTML5' 카테고리의 다른 글

[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가?  (0) 2023.07.20
[ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법  (0) 2023.07.18
[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그  (0) 2019.11.16
[HTML5] <dl> tag - definition list (정의 목록)  (0) 2019.11.13
[HTML5] block과 inline level 요소들  (0) 2019.11.01
[HTML5] meta tag 총정리  (0) 2019.10.31
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰  (0) 2019.10.23
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가?

HTML5 2023. 7. 20. 14:40
반응형
<!DOCTYPE> 태그는 HTML문서임을 선언하는 것으로 HTML문서의 제일 위에 작성합니다.

 

HTML4.01까지만 해도 다음과 같이 길어서 외워서 사용하기에는 어려움이 있었습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
이후 HTML5가 발표되면서 <!DOCTYPE>만 사용해도 웹 브라우저에서 HTML문서임을 인식합니다.
최근에는 에디터 혹은 통합 개발 환경(IDE)이 많이 발전하여, 단축키 등으로 자동 입력해 주기 때문에 외울 필요가 없어 졌습니다.

01 <!DOCTYPE>

 

[ 예제 ]

이 태그는 다음 예제와 같이 문서 제일 위에 추가해 줍니다.

01 	<!DOCTYPE html>
02 	<html>
03 	<head>
04 	  <title>HTML 문서 선언</title>
05 	</head>
06 	<body>
07 	  <div>
08 	    이 곳에 내용을 
09 	  </div>
10 	</body>
11 	</html>

 

 

HTML - A그룹 <!DOCTYPE> 태그는 무엇인가

반응형
저작자표시 비영리 변경금지

'HTML5' 카테고리의 다른 글

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서  (0) 2023.07.20
[ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법  (0) 2023.07.18
[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그  (0) 2019.11.16
[HTML5] <dl> tag - definition list (정의 목록)  (0) 2019.11.13
[HTML5] block과 inline level 요소들  (0) 2019.11.01
[HTML5] meta tag 총정리  (0) 2019.10.31
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰  (0) 2019.10.23
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법

HTML5 2023. 7. 18. 18:18
반응형
주석 혹은 코멘트(comment)라고 부르며, 소스 코드의 내용을 설명하기 위한 메모를 추가하는데 사용합니다.
주석은 코드를 이해하기 쉽게 설명하거나, 특정 부분을 임시로 비활성화하는 용도로 사용하는 것이 일반적입니다.
이 태그로 감싸고 있는 내용은 웹 브라우저에 표시되지 않으며, 소스에서만 내용의 확인이 가능합니다.

 

 

[ 문법 ]

HTML 주석은 다음과 같은 형식으로 작성합니다. 한 줄 또는 여러 줄의 주석을 감쌀 수 있습니다.

 

<!-- 한 줄 주석 -->
<!--
여러 줄 주석 1
여러 줄 주석 2
여러 줄 주석 3
-->

 

 

[ 예제 ]

01 	<!DOCTYPE html>
02 	<html>
03 	<head>
04 	  <title>주석 예제</title>
05 	</head>
06 	<body>
07 	  <h1>웹 페이지 제목</h1>
08 	  <p>이것은 웹 페이지의 본문입니다.</p>
09 	  
10 	  <!-- 한 줄 주석입니다.  -->
11 	  
12 	  
13 	  <!-- 
14 	    여러 줄에 걸친 주석을 작성할 수도 있습니다.
15 	    또한 다음과 같이 주석으로 처리된 태그는 비활성화 되어 동작하지 않습니다.
16 	    <div>
17 	      <p>이 부분은 표시되지 않습니다.</p>
18 	    </div>
19 	  -->
20 	</body>
21 	</html>

 

 

HTML - A 그룹 : <!-- 주석 --> 사용 설명서

반응형
저작자표시 비영리 변경금지

'HTML5' 카테고리의 다른 글

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서  (0) 2023.07.20
[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가?  (0) 2023.07.20
[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그  (0) 2019.11.16
[HTML5] <dl> tag - definition list (정의 목록)  (0) 2019.11.13
[HTML5] block과 inline level 요소들  (0) 2019.11.01
[HTML5] meta tag 총정리  (0) 2019.10.31
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰  (0) 2019.10.23
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,
반응형

공지사항

글 보관함

달력

«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

티스토리툴바