풀스크린 배경 이미지를 만들고 스타일링하는 6가지 예제를 CSS와 HTML로 구성하고 상세히 설명하겠습니다.
예제 1: 기본 풀스크린 배경 이미지
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-image: url("background.jpg");
background-size: cover;
background-position: center;
height: 100vh;
}
</style>
</head>
<body>
<!-- 내용이 없는 풀스크린 배경 이미지 -->
</body>
</html>
이 예제에서는 기본적인 풀스크린 배경 이미지를 만들었습니다. background-image 속성을 사용하여 배경 이미지를 설정하고, background-size 속성을 사용하여 이미지를 커버하도록 설정하였습니다. 또한, background-position 속성을 사용하여 이미지를 가운데 정렬하고, height: 100vh;로 화면 높이와 동일한 높이를 설정하여 풀스크린으로 표시했습니다.
예제 2: 풀스크린 이미지와 콘텐츠
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-image: url("background.jpg");
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.content {
text-align: center;
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to Our Website</h1>
<p>Explore our services and products.</p>
<a href="#">Learn More</a>
</div>
</body>
</html>
이 예제에서는 풀스크린 배경 이미지와 콘텐츠를 함께 표시한 페이지를 만들었습니다. display: flex;와 justify-content, align-items 속성을 사용하여 콘텐츠를 가운데 정렬하고, 배경에 투명한 백그라운드를 추가하여 콘텐츠를 강조했습니다.
예제 3: 풀스크린 비디오 배경
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
}
</style>
</head>
<body>
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="content">
<h1>Welcome to Our Website</h1>
<p>Explore our services and products.</p>
<a href="#">Learn More</a>
</div>
</body>
</html>
이 예제에서는 풀스크린 비디오 배경을 만들었습니다. video 요소를 사용하여 비디오를 삽입하고, CSS를 사용하여 비디오를 가운데 정렬하였습니다. 콘텐츠도 가운데 정렬되며, 비디오는 자동 재생 및 무음으로 설정되었습니다.
예제 4: 풀스크린 이미지 슬라이드쇼
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-size: cover;
background-position: center;
animation: slideshow 10s infinite;
}
@keyframes slideshow {
0%, 100% {
background-image: url("image1.jpg");
}
25% {
background-image: url("image2.jpg");
}
50% {
background-image: url("image3.jpg");
}
75% {
background-image: url("image4.jpg");
}
}
</style>
</head>
<body>
<!-- 내용이 없는 풀스크린 이미지 슬라이드쇼 -->
</body>
</html>
이 예제에서는 풀스크린 이미지 슬라이드쇼를 만들었습니다. @keyframes를 사용하여 이미지를 순환하고, 배경 이미지를 변경하여 슬라이드쇼 효과를 구현했습니다.
예제 5: 풀스크린 배경 이미지와 로그인 폼
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-image: url("background.jpg");
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-form {
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 8px;
text-align: center;
}
.form-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<input class="form-input" type="text" placeholder="Username">
<input class="form-input" type="password" placeholder="Password">
<button class="form-button">Login</button>
</div>
</body>
</html>
이 예제에서는 풀스크린 배경 이미지와 로그인 폼을 함께 표시한 페이지를 만들었습니다. 풀스크린 배경 이미지와 로그인 폼의 스타일을 설정하여 시각적으로 매력적인 페이지를 만들었습니다.
예제 6: 풀스크린 배경 이미지와 타이틀
<!DOCTYPE html>
<html>
<head>
<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;
text-align: center;
color: white;
}
.title {
font-size: 36px;
margin-bottom: 20px;
}
.subtitle {
font-size: 24px;
}
</style>
</head>
<body>
<div>
<h1 class="title">Welcome to Our Website</h1>
<p class="subtitle">Explore our services and products.</p>
</div>
</body>
</html>
이 예제에서는 풀스크린 배경 이미지와 타이틀을 함께 표시한 페이지를 만들었습니다. 풀스크린 배경 이미지와 타이틀의 스타일을 설정하여 환영 페이지를 만들었습니다.
'CSS' 카테고리의 다른 글
| 헤더 및 푸터 스타일링: 웹 페이지의 헤더와 푸터 디자인. (0) | 2023.12.23 |
|---|---|
| 블러 효과: 요소에 블러 효과 추가. (0) | 2023.12.23 |
| 카드 디자인: 카드 레이아웃 스타일링. (0) | 2023.12.23 |
| 미리보기 이미지 갤러리: 이미지 갤러리 스타일링. (0) | 2023.12.23 |
| 테이블 스타일링: HTML 테이블 스타일 변경. (0) | 2023.12.23 |