[HTML] 원하는 섹션으로 이동
2023. 3. 9. 14:02ㆍ기술 창고/HTML
728x90
SMALL
어떤 사이트를 보면 한 페이지 내에서 원하는 내용 부분에 이동할 수 있게끔 하는 기능이 구현되어있는 것을 종종 볼 수 있다.
내가 원하는 특정 내용 부분으로 이동될 수 있게끔 하는 만들어보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Abc corporation Abc corporation</title>
</head>
<body>
<h1><a href="index.html">abc.com</a></h1>
<h2>About us</h2>
<img src="images/ABC_com.gift" alt="abc logo"> <!-- alternative 대체 -->
<img src="http://place-holtd.it/300x300" alt="dummy image">
<ul>
<li><a href="about.html">about us</a></li>
<li><a href="docs/services.html">services</a></li>
<li><a href="docs/location.html">location</a></li>
<li><a href="docs/html/partners.html">partners</a>
<ul>
<li><a href="http://www.naver.com" target="_blank">naver</a></li>
<li><a href="http://www.daum.net" target="_blank">daum</a></li>
</ul>
</li>
<li><a href="docs/catalog.zip">catalog download</a></li>
<li><a href="mailto:info@abc.com">contact us</a></li>
</ul>
<hr />
<p>
<a href="#ci">Our CI</a> /
<a href="#vision">Our Vision</a> /
<a href="#history">Our History</a>
</p>
<hr />
<h2 id="ci">Our CI</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<h2 id="vision">Our Vision</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<h2 id="history">Our History</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
</body>
</html>
<!--
# id 속성 : 해당 태그의 고유한 구분값
# 현재 페이지 내에서 원하는 섹션 부분으로 이동하고 싶을 때 사용하는 방법
(1) 원하는 섹션 태그에 id 속성을 부여한다. 예) <h2 id="history">
(2) 이동하고자하는 a 태그의 href 속성에 1번에서 부여한 id 속성값을 넣어준다. 예) <a href="#history">
여기서 a 태그의 href에 적은 id 값의 맨 앞에 있는 #는 id 속성을 의미한다.
-->- 원하는 부분으로 이동하기 위해서는 원하는 내용이 담긴 태그 부분에 고유의 id 속성값을 설정해주어야 한다.
예) <h2 id="ci">Our CI</h2> - a 태그의 href 속성 부분에 설정한 id 값을 넣어준다.
예) <a href="#ci"> - #는 id 속성을 의미한다. 따라서, 위에서 설정한 a 태그를 누르면 ci 라는 id 값을 가진 h2 태그 부분으로 이동한다.
[실행한 결과]
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
| [HTML] 구글 맵 위치 수정 (0) | 2023.11.28 |
|---|---|
| [HTML] Form 태그 (0) | 2023.03.14 |
| [HTML] 이미지 태그 (0) | 2023.03.09 |
| [HTML] anchor 태그 이동 경로 설정 파악 (0) | 2023.03.09 |
| [HTML] anchor 태그 (0) | 2023.03.09 |