반갑습니다. 잡지식스토리입니다.
이번에는 동일한 웹페이징서 지정한 위치로 이동하는 방법에 대해서 알아보겠습니다.
사용할 태그는 <a href="#ASD">ASD</a> 와 <h2 id="ASD">ASD</h2>입니다.
a태그를 이용해서 #ASD를 지정하고 "ASD"를 클릭하면 id="ASD" 태그를 이용한 "ASD영역"으로 바로 이동합니다.
일단 캡쳐사진을 보면서 설명해 보겠습니다.
위에서 상단의 '버스'를 클릭하면 '버스'설명으로 이동합니다.
'지하철'을 클릭하면 '지하철'로, '택시'를 클릭하면'택시' 설명으로 이동하는 태그입니다.
어떤 내용인지 이해는 되시죠..??
그럼 이제 이 웹문서의 '소스보기'를 해 보겠습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>지정한 위치로 이동하기</title>
</head>
<body>
<h1 id="list">대중 교통의 종류</h1>
<p>대중 교통의 종류에 대해서 알아보겠습니다.</p>
<ul>
<li><a href="#bus">버스</a></li>
<li><a href="#subway">지하철</a></li>
<li><a href="#texi">택시</a></li>
</ul>
<hr>
<h2 id="bus">버스</h2>
<p> 버스 전용 도로로 다니는 대형 자동차입니다.</p>
.................................
<p> 버스 전용 도로로 다니는 대형 자동차입니다.</p>
<div class="top"><a href="#list">위로</a></div>
<hr>
<h2 id="subway">지하철</h2>
<p> 지하로 다니는 전철입니다.</p>
...............................
<p> 지하로 다니는 전철입니다.</p>
<div class="top"><a href="#list">위로</a></div>
<hr>
<h2 id="texi">택시</h2>
<p> 어디든지 신속하게 이동할 수 있는 교통수단입니다.</p>
............................................
<p> 어디든지 신속하게 이동할 수 있는 교통수단입니다.</p>
<div class="top"><a href="#list">위로</a></div>
<hr>
</body>
</html>
이해를 돕기 위해서 설명이 들어가야 할 영역에 같은 문장을 여러개 넣었습니다.
같은 문장부분은 생략하였습니다.
버스부분만 설명해 보겠습니다.
"대중교통의 종류" 목록에서 버스에 <a href="#bus">버스</a> 태그를 설정하고,
아래 설명부분에서 <h2 id="bus">버스</h2>태그를 설정하였습니다.
목록에서 "버스"를 클릭하면 "버스"설명으로 바로 이동하는 기능입니다.
설명 아래쪽으로 "위로" 라는 글씨를 클릭하면 다시 목록으로 이동하는데,
소스을 적용하는 방법은 동일합니다.
직접 웹문서를 작성해 보면 쉽게 이해가 될 것이라 판단됩니다.
오늘은 여기까지입니다.
'웹문서 공부' 카테고리의 다른 글
| 새 탭 버튼 누르면 빈페이지로 열리는 레지스트리 설정 (0) | 2014.01.04 |
|---|---|
| 인터넷 시작페이지 설정 레지스트리 (0) | 2013.12.27 |
| [HTML]div 태그, 일반적인 영역 설정하기 (0) | 2013.11.15 |
| [웹문서]ol 태그 / li 태그, 순번이 있는 목록 만들기 (0) | 2013.11.01 |
| [웹문서] ul 태그, li 태그, 목록 만들기 (1) | 2013.10.30 |
