웹 페이지의 헤더와 푸터를 스타일링하는 6가지 예제를 CSS와 HTML로 구성하고 상세히 설명하겠습니다.
예제 1: 기본 헤더와 푸터
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<div>
<p>Content goes here.</p>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
이 예제에서는 기본적인 헤더와 푸터 스타일링을 보여줍니다. header와 footer 요소에 배경 색상, 텍스트 색상, 정렬 및 패딩을 적용하여 디자인합니다.
예제 2: 네비게이션 메뉴 헤더
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
}
nav {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
margin-right: 20px;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div>
<p>Content goes here.</p>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
이 예제에서는 네비게이션 메뉴를 포함한 헤더를 만듭니다. nav 요소에 메뉴 항목을 나열하고 스타일을 적용하여 메뉴를 디자인합니다.
예제 3: 로고와 소셜 미디어 아이콘 푸터
<!DOCTYPE html>
<html>
<head>
<style>
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
.logo {
font-size: 24px;
}
.social-icons {
list-style: none;
padding: 0;
margin: 10px 0;
}
.social-icons li {
display: inline;
margin-right: 10px;
}
.social-icons a {
color: white;
text-decoration: none;
font-size: 18px;
}
</style>
</head>
<body>
<div>
<p>Content goes here.</p>
</div>
<footer>
<div class="logo">My Website</div>
<ul class="social-icons">
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</footer>
</body>
</html>
이 예제에서는 로고와 소셜 미디어 아이콘을 포함한 푸터를 만듭니다. 로고와 아이콘은 스타일을 적용하여 푸터를 디자인합니다.
예제 4: 이미지 헤더와 푸터
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-image: url("header.jpg");
background-size: cover;
color: white;
text-align: center;
padding: 100px 0;
}
footer {
background-image: url("footer.jpg");
background-size: cover;
color: white;
text-align: center;
padding: 50px 0;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<div>
<p>Content goes here.</p>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
이 예제에서는 이미지를 배경으로 사용하여 헤더와 푸터를 스타일링합니다. background-image 및 background-size 속성을 사용하여 이미지를 배경으로 설정하고 텍스트를 표시합니다.
예제 5: 헤더와 푸터 그라디언트
<!DOCTYPE html>
<html>
<head>
<style>
header {
background: linear-gradient(to bottom, #3498db, #2980b9);
color: white;
text-align: center;
padding: 20px;
}
footer {
background: linear-gradient(to bottom, #333, #222);
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<div>
<p>Content goes here.</p>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
이 예제에서는 그라디언트를 사용하여 헤더와 푸터를 스타일링합니다. background 속성을 사용하여 그라디언트 배경을 설정하고 텍스트를 표시합니다.
예제 6: 투명 헤더와 푸터
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-color: rgba(52, 152, 219, 0.7);
color: white;
text-align: center;
padding: 20px;
}
footer {
background-color: rgba(51, 51, 51, 0.7);
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<div>
<p>Content goes here.</p>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
이 예제에서는 투명한 배경을 사용하여 헤더와 푸터를 스타일링합니다. rgba() 함수를 사용하여 배경의 투명도를 조절하고 텍스트를 표시합니다.
'CSS' 카테고리의 다른 글
| 슬라이더 스타일링: 이미지 슬라이더 스타일링. (0) | 2023.12.23 |
|---|---|
| 탭 메뉴 스타일링: 탭 메뉴 디자인 커스터마이징. (0) | 2023.12.23 |
| 블러 효과: 요소에 블러 효과 추가. (0) | 2023.12.23 |
| 풀스크린 배경 이미지: 전체 화면 배경 이미지. (0) | 2023.12.23 |
| 카드 디자인: 카드 레이아웃 스타일링. (0) | 2023.12.23 |