푸터를 페이지 하단에 고정하는 6가지 예제를 제시하겠습니다. 각 예제는 HTML 및 CSS 코드와 함께 주석으로 설명되어 있습니다.
예제 1: 기본 푸터 고정
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
}
.content {
min-height: 100%;
margin-bottom: -100px;
}
.footer {
height: 100px;
}
</style>
</head>
<body>
<div class="content">
<!-- 내용 -->
</div>
<div class="footer">
<!-- 푸터 내용 -->
</div>
</body>
</html>
이 예제에서는 기본적인 방법으로 푸터를 페이지 하단에 고정합니다. min-height와 마진을 활용하여 페이지 내용이 푸터와 겹치지 않게 설정합니다.
예제 2: Sticky 푸터
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer {
height: 100px;
position: sticky;
bottom: 0;
}
</style>
</head>
<body>
<div class="content">
<!-- 내용 -->
</div>
<div class="footer">
<!-- 푸터 내용 -->
</div>
</body>
</html>
이 예제에서는 푸터를 Sticky로 만들어 페이지 하단에 고정합니다. position: sticky;를 사용하여 푸터를 하단에 고정하고, flex를 사용하여 콘텐츠와 푸터가 페이지 높이를 채우도록 설정합니다.
예제 3: Flexbox를 활용한 푸터 고정
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
height: 100px;
}
</style>
</head>
<body>
<div class="content">
<!-- 내용 -->
</div>
<div class="footer">
<!-- 푸터 내용 -->
</div>
</body>
</html>
이 예제에서는 Flexbox를 사용하여 푸터를 페이지 하단에 고정합니다. flex-direction을 column으로 설정하여 콘텐츠와 푸터가 세로로 배치되며, min-height로 최소 페이지 높이를 설정합니다.
예제 4: Grid를 활용한 푸터 고정
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
.content {
/* 콘텐츠 스타일 */
}
.footer {
height: 100px;
}
</style>
</head>
<body>
<div class="content">
<!-- 내용 -->
</div>
<div class="footer">
<!-- 푸터 내용 -->
</div>
</body>
</html>
이 예제에서는 Grid를 사용하여 푸터를 페이지 하단에 고정합니다. grid-template-rows로 그리드 행을 설정하고, min-height로 최소 페이지 높이를 설정합니다.
예제 5: Flexbox 및 Sticky 푸터
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
height: 100px;
position: sticky;
bottom: 0;
}
</style>
</head>
<body>
<div class="content">
<!-- 내용 -->
</div>
<div class="footer">
<!-- 푸터 내용 -->
</div>
</body>
</html>
이 예제에서는 Flexbox와 Sticky를 조합하여 푸터를 페이지 하단에 고정합니다. flex-direction으로 세로 배치하고, position: sticky;로 푸터를 하단에 고정합니다.
예제 6: CSS 그리드와 Flexbox를 활용한 푸터 고정
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
.content {
/* 콘텐츠 스타일 */
}
.footer {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="content">
<!-- 내용 -->
</div>
<div class="footer">
<!-- 푸터 내용 -->
</div>
</body>
</html>
이 예제에서는 CSS 그리드와 Flexbox를 함께 사용하여 푸터를 페이지 하단에 고정합니다. grid-template-rows로 그리드 행을 설정하고, Flexbox를 사용하여 푸터를 가운데 정렬합니다.
'CSS' 카테고리의 다른 글
| 토글 스위치: 토글 스위치 디자인 커스터마이징. (0) | 2023.12.23 |
|---|---|
| 오버레이 효과: 요소에 오버레이(뒷 배경 불투명도) 효과 추가. (0) | 2023.12.23 |
| 슬라이더 스타일링: 이미지 슬라이더 스타일링. (0) | 2023.12.23 |
| 탭 메뉴 스타일링: 탭 메뉴 디자인 커스터마이징. (0) | 2023.12.23 |
| 헤더 및 푸터 스타일링: 웹 페이지의 헤더와 푸터 디자인. (0) | 2023.12.23 |