풀 페이지 스크롤 디자인을 위한 6가지 예제를 아래에 제시합니다. 각 예제는 HTML 및 CSS 코드로 구성되어 있으며, 상세한 주석과 함께 설명됩니다.
예제 1: 기본 풀 페이지 스크롤
<!DOCTYPE html>
<html>
<head>
<style>
/* 기본 풀 페이지 스크롤 스타일 */
body, html {
height: 100%;
margin: 0;
}
.section {
height: 100%;
}
</style>
</head>
<body>
<div class="section" style="background-color: #f0f0f0;">
<h1>섹션 1</h1>
</div>
<div class="section" style="background-color: #ddd;">
<h1>섹션 2</h1>
</div>
<div class="section" style="background-color: #aaa;">
<h1>섹션 3</h1>
</div>
</body>
</html>
이 예제는 기본 풀 페이지 스크롤 디자인을 보여줍니다. 각 섹션은 화면 높이만큼 차지하며, 섹션 간에 스크롤이 발생합니다.
예제 2: 풀 페이지 스크롤 애니메이션
<!DOCTYPE html>
<html>
<head>
<style>
/* 풀 페이지 스크롤 애니메이션 스타일 */
body, html {
height: 100%;
margin: 0;
}
.section {
height: 100%;
transition: transform 0.5s ease-in-out;
}
.active {
transform: translateY(0);
}
.inactive {
transform: translateY(100%);
}
</style>
</head>
<body>
<div class="section active" style="background-color: #f0f0f0;">
<h1>섹션 1</h1>
</div>
<div class="section inactive" style="background-color: #ddd;">
<h1>섹션 2</h1>
</div>
<div class="section inactive" style="background-color: #aaa;">
<h1>섹션 3</h1>
</div>
</body>
</html>
이 예제는 풀 페이지 스크롤을 위한 애니메이션을 추가합니다. 섹션 간에 스크롤이 발생하면 애니메이션을 통해 부드럽게 전환됩니다.
예제 3: 네비게이션 메뉴 추가
<!DOCTYPE html>
<html>
<head>
<style>
/* 풀 페이지 스크롤 스타일 */
body, html {
height: 100%;
margin: 0;
}
.section {
height: 100%;
}
/* 네비게이션 메뉴 스타일 */
.nav {
position: fixed;
top: 0;
left: 0;
background-color: #333;
width: 100%;
padding: 10px 0;
text-align: center;
z-index: 1;
}
.nav a {
color: #fff;
text-decoration: none;
margin: 0 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="nav">
<a href="#section1">섹션 1</a>
<a href="#section2">섹션 2</a>
<a href="#section3">섹션 3</a>
</div>
<div id="section1" class="section" style="background-color: #f0f0f0;">
<h1>섹션 1</h1>
</div>
<div id="section2" class="section" style="background-color: #ddd;">
<h1>섹션 2</h1>
</div>
<div id="section3" class="section" style="background-color: #aaa;">
<h1>섹션 3</h1>
</div>
</body>
</html>
이 예제는 네비게이션 메뉴를 추가하여 특정 섹션으로 이동할 수 있도록 합니다. 각 메뉴 항목에는 해당 섹션의 ID로 연결되어 있습니다.
예제 4: 스크롤 효과 추가
<!DOCTYPE html>
<html>
<head>
<style>
/* 풀 페이지 스크롤 스타일 */
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.section {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.5s;
}
.section:nth-child(odd) {
background-color: #f0f0f0;
}
.section:nth-child(even) {
background-color: #ddd;
}
/* 스크롤 효과 스타일 */
.animate {
animation: fadeIn 1s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="section animate">
<h1>섹션 1</h1>
</div>
<div class="section animate">
<h1>섹션 2</h1>
</div>
<div class="section animate">
<h1>섹션 3</h1>
</div>
</body>
</html>
이 예제는 각 섹션에 스크롤 효과를 추가합니다. 스크롤할 때 섹션이 나타나는 애니메이션 효과가 적용됩니다.
예제 5: 화살표 스크롤 네비게이션
<!DOCTYPE html>
<html>
<head>
<style>
/* 풀 페이지 스크롤 스타일 */
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.section {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* 스크롤 네비게이션 스타일 */
.scroll-nav {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
}
.scroll-nav a {
text-decoration: none;
color: #333;
font-size: 24px;
margin-bottom: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="section">
<h1>섹션 1</h1>
</div>
<div class="section">
<h1>섹션 2</h1>
</div>
<div class="section">
<h1>섹션 3</h1>
</div>
<div class="scroll-nav">
<a href="#section1">↑</a>
<a href="#section2">↑</a>
<a href="#section3">↑</a>
</div>
</body>
</html>
이 예제는 화살표로 구성된 스크롤 네비게이션을 추가합니다. 각 화살표를 클릭하면 해당 섹션으로 스크롤됩니다.
예제 6: 이미지 백그라운드와 텍스트
<!DOCTYPE html>
<html>
<head>
<style>
/* 풀 페이지 스크롤 스타일 */
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.section {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
color: #fff;
}
/* 섹션 배경 이미지 */
.section:nth-child(1) {
background-image: url('image1.jpg');
}
.section:nth-child(2) {
background-image: url('image2.jpg');
}
.section:nth-child(3) {
background-image: url('image3.jpg');
}
.section h1 {
font-size: 48px;
}
</style>
</head>
<body>
<div class="section">
<h1>섹션 1</h1>
</div>
<div class="section">
<h1>섹션 2</h1>
</div>
<div class="section">
<h1>섹션 3</h1>
</div>
</body>
</html>
이 예제는 각 섹션에 이미지 배경과 텍스트를 추가합니다. 섹션 배경 이미지는 CSS로 지정하며, 텍스트는 각 섹션 내에 포함됩니다. 필요에 따라 이미지 URL을 수정하여 사용할 수 있습니다.
'CSS' 카테고리의 다른 글
| 헤더 스크롤 효과: 스크롤 시 헤더 효과. (0) | 2023.12.23 |
|---|---|
| 랜딩 페이지 디자인: 랜딩 페이지 디자인. (0) | 2023.12.23 |
| 드롭다운 메뉴 스타일링: 드롭다운 메뉴 디자인. (0) | 2023.12.23 |
| 토글 스위치: 토글 스위치 디자인 커스터마이징. (0) | 2023.12.23 |
| 오버레이 효과: 요소에 오버레이(뒷 배경 불투명도) 효과 추가. (0) | 2023.12.23 |