HTML에서 화면 스크롤 이동은 a 태그와 href 속성을 사용하여 구현할 수 있습니다. 아래는 간단한 예제입니다. a 태그의 href 속성 값으로 이동할 위치의 id 값을 지정하고, # 문자와 함께 id 값을 사용합니다. 이렇게 하면 해당 위치로 자연스럽게 이동합니다.
// html
<!DOCTYPE html>
<html>
<head>
<title>Scroll Example</title>
<style>
body {
height: 1500px;
margin: 0;
padding: 0;
}
section {
height: 500px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
color: white;
}
section:nth-of-type(2n) {
background-color: black;
}
</style>
</head>
<body>
<section id="section1">
Section 1
</section>
<section id="section2">
Section 2
</section>
<section id="section3">
Section 3
</section>
<section id="section4">
Section 4
</section>
<section id="section5">
Section 5
</section>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
</ul>
</nav>
</body>
</html>위 예제에서, body 요소의 height 속성 값을 크게 지정하여 스크롤을 할 수 있는 공간을 만들었습니다. section 요소는 각각 높이가 500px 이고, background-color 속성 값으로 배경색을 지정하였습니다.
nav 요소는 각 section 요소로 이동할 수 있는 링크를 표시합니다. ul과 li 태그를 사용하여 목록을 만들고, a 태그를 사용하여 링크를 생성합니다. href 속성 값으로 # 문자와 함께 이동할 위치의 id 값을 지정하였습니다.
위 예제를 실행하면, 각 section 요소와 링크가 표시됩니다. 링크를 클릭하면 해당 위치로 자연스럽게 이동합니다.
반응형
'IT' 카테고리의 다른 글
| [IT]SSH 키 생성 (0) | 2023.06.23 |
|---|---|
| Synology GIT 사용법 (0) | 2023.06.08 |
| html에서 map 사용하는 예제 (0) | 2023.03.06 |
| 리눅스 find 명령어 사용법 (0) | 2023.03.06 |
| VI 에디터 명령어 (0) | 2023.03.06 |
