[ 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)

,

[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰

HTML5 2019. 10. 23. 00:58
반응형

<article>과 <section>은 모두 <div>와 같은 block 속성을 갖고 있는 tag이다.

따라서 <article>과 <section> 을 모두 <div> tag로 대치해도 기능상의 문제는 전혀 없다. 이 외에도 semantic tag중 기본 구조를 구축하기 위한 <header>, <footer> 등도 모두 마찬가지이다.

다만 <header>, <footer> 등 그 뜻이 명확한 것과는 달리 <article>, <section>, <div>는 어디에 사용되어야 가장 적절 한지 명확히 구별하여 개발한 사례를 찾기가 힘들다.

시맨틱 태그를 사용하는 이유는 SEO뿐만이 아니라 개발자들의 가독성을 높이기 위한 측면도 무시할 수 없다.

이완 사용하는 것이라면 용도에 맞게 적절하게 사용하는 것이 좋을 것 같다.

각 tag의 기본적인 의미는 다음과 같다.

  • <article> tag는 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.
  • <section> tag는 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용한다.
  • <div> 요소간 논리적 관계와는 상관없이 요소를 나눠야 할 필요가 있을 경우 사용한다.

위와 같은 기본적인 의미를 생각 한다면 <section>안에 <article>이 여러 개 들어가는 것은 조금 부자연스러울 수 있다. 왜냐하면 서로 관련 있는 내용을 모아 놓아야 할 <section>안에 각각이 독립된 <article>이 들어가 서로 다른 내용의 독립 <article>이 배치되기 때문이다.

따라서 <article>안에 <section>이 들어가는 것이 자연스럽다.

<div>의 경우는 논리적 관계와는 무관하게 요소를 나누는데 사용됨으로 <article>과 <section> 어느 쪽의 내부에 정의하던 크게 어색하지 않다. 다만 시맨틱 태그에는 <div>태그로 사용하던 다양한 역할의 태그, 즉 aside, header, footer, nav 등 대부분을 정의하고 있기 때문에 특별한 경우가 아니라면 사용 자제하는 것이 가독성을 높이는데 유리하다. 

 

다음은 web page내용을 구성하는 기본 구조의 예시이다.

<article>
  <h1>Article1 Heading</h1>
  <section>
    <h2>Section1 Heading</h2>
    <p>Content...</p>
  </section>
  <section>
    <h2>Section2 Heading</h2>
    <p>Content...</p>
  </section>
  <section>
    <h2>Section3 Heading</h2>
    <p>Content...</p>
  </section>
</article>

 

 

반응형

'HTML5' 카테고리의 다른 글

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서  (0) 2023.07.20
[ 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
블로그 이미지

DeveloperN

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

,
반응형

공지사항

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
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 31

티스토리툴바