랜딩 페이지 디자인을 위한 6가지 예제를 아래에 제시하겠습니다. 각 예제는 HTML 및 CSS 코드로 구성되어 있으며, 상세한 주석과 함께 설명됩니다.
예제 1: 간단한 랜딩 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜딩 페이지</title>
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
p {
font-size: 18px;
}
/* 버튼 스타일 */
.btn {
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
text-decoration: none;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>환영합니다!</h1>
<p>당사의 서비스를 이용해보세요.</p>
<a href="#" class="btn">시작하기</a>
</body>
</html>
이 예제는 간단한 랜딩 페이지를 보여줍니다. 페이지에는 제목, 설명 텍스트 및 시작하기 버튼이 포함되어 있습니다.
예제 2: 이미지 배경과 제목
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜딩 페이지</title>
<style>
/* 스타일 */
body {
margin: 0;
padding: 0;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-family: Arial, sans-serif;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
}
p {
font-size: 24px;
max-width: 600px;
text-align: center;
}
/* 버튼 스타일 */
.btn {
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
text-decoration: none;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>환영합니다!</h1>
<p>당사의 서비스를 이용해보세요. 최고의 경험을 제공합니다.</p>
<a href="#" class="btn">시작하기</a>
</body>
</html>
이 예제는 이미지 배경과 제목이 포함된 랜딩 페이지를 보여줍니다. 배경 이미지는 CSS로 지정되며, 페이지에는 제목, 설명 텍스트 및 시작하기 버튼이 있습니다.
예제 3: 비디오 배경 랜딩 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜딩 페이지</title>
<style>
/* 스타일 */
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
video {
object-fit: cover;
width: 100%;
height: 100%;
}
.content {
z-index: 1;
text-align: center;
color: #fff;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
}
p {
font-size: 24px;
max-width: 600px;
text-align: center;
margin: 0 auto;
}
/* 버튼 스타일 */
.btn {
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
text-decoration: none;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="video-background">
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="content">
<h1>환영합니다!</h1>
<p>당사의 서비스를 이용해보세요. 최고의 경험을 제공합니다.</p>
<a href="#" class="btn">시작하기</a>
</div>
</body>
</html>
이 예제는 비디오 배경을 갖는 랜딩 페이지를 보여줍니다. 페이지의 내용은 비디오 위에 겹쳐져 있으며, 제목, 설명 텍스트 및 시작하기 버튼이 포함되어 있습니다.
예제 4: 반응형 랜딩 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜딩 페이지</title>
<style>
/* 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
}
p {
font-size: 24px;
margin-bottom: 40px;
}
/* 버튼 스타일 */
.btn {
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
text-decoration: none;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>환영합니다!</h1>
<p>당사의 서비스를 이용해보세요. 최고의 경험을 제공합니다.</p>
<a href="#" class="btn">시작하기</a>
</div>
</body>
</html>
이 예제는 반응형 랜딩 페이지를 보여줍니다. 페이지 컨테이너는 최대 너비를 가지며, 텍스트 및 버튼은 가운데 정렬되어 사용자에게 가독성과 사용 편의성을 제공합니다.
예제 5: 그라디언트 배경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜딩 페이지</title>
<style>
/* 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #007BFF, #00BFFF);
color: #fff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
}
p {
font-size: 24px;
margin-bottom: 40px;
}
/* 버튼 스타일 */
.btn {
padding: 10px 20px;
background-color: #fff;
color: #007BFF;
text-decoration: none;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>환영합니다!</h1>
<p>당사의 서비스를 이용해보세요. 최고의 경험을 제공합니다.</p>
<a href="#" class="btn">시작하기</a>
</div>
</body>
</html>
이 예제는 그라디언트 배경을 사용한 랜딩 페이지를 보여줍니다. 페이지의 배경은 그라디언트로 구성되어 있으며, 텍스트와 버튼 스타일은 대비를 높이고 있습니다.
예제 6: 비디오 배경과 반응형 랜딩 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜딩 페이지</title>
<style>
/* 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
video {
object-fit: cover;
width: 100%;
height: 100%;
}
.content {
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
text-align: center;
color: #fff;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
}
p {
font-size: 24px;
margin-bottom: 40px;
}
/* 버튼 스타일 */
.btn {
padding: 10px 20px;
background-color: #fff;
color: #007BFF;
text-decoration: none;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="video-background">
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="content">
<h1>환영합니다!</h1>
<p>당사의 서비스를 이용해보세요. 최고의 경험을 제공합니다.</p>
<a href="#" class="btn">시작하기</a>
</div>
</body>
</html>
이 예제는 비디오 배경과 반응형 디자인을 갖는 랜딩 페이지를 보여줍니다. 페이지의 내용은 비디오 위에 겹쳐져 있으며, 제목, 설명 텍스트 및 시작하기 버튼이 포함되어 있습니다. 페이지는 모든 화면 크기에 대응할 수 있도록 설계되었습니다.
'CSS' 카테고리의 다른 글
| 그리드 레이아웃: 그리드 레이아웃 스타일링. (0) | 2023.12.23 |
|---|---|
| 헤더 스크롤 효과: 스크롤 시 헤더 효과. (0) | 2023.12.23 |
| 풀 페이지 스크롤: 풀 페이지 스크롤 디자인. (0) | 2023.12.23 |
| 드롭다운 메뉴 스타일링: 드롭다운 메뉴 디자인. (0) | 2023.12.23 |
| 토글 스위치: 토글 스위치 디자인 커스터마이징. (0) | 2023.12.23 |