현이의 개발 이야기
2개 게시글
웹
Footer를 페이지 하단에 고정하는 법
대부분의 웹페이지는 Footer가 있으며, 페이지 내용의 길이에 상관 없이 하단에 고정되어 있다.
내용이 짧으면 알아서 페이지의 하단에 붙고, 내용이 길다면 스크롤해야 보이는 Footer를 만들어보자.
페이지 준비
우선 다음과 같이 간단한 페이지 구조를 만들었다.
<body>
<header class="header">Header</header>
<div class="content">
Content
</div>
<footer class="footer">Footer</footer>
</body>
body {
margin: 0;
}
.header {
background-color: yellow;
}
.content {
background-color: green;
}
.footer {
background-color: skyblue;
}
Header, Content, Footer를 색으로 구분하였다.
실제 웹페이지에서는 Content 안에 내용이 들어가게 될 것이다.
내용이 짧아 Footer가 위로 붙어있는 모습을 확인할 수 있다.
조건
Footer가 페이지 하단에 고정되기 위해서는 다음의 조건을 만족해야 한다.
내용이 짧을 때는 Content가 길어져야 한다.단, 페이지를 넘어가게 길어져서는 안된다.
내용이 길 때에는 Content가 내용에 맞는 높이만큼 사용해야 한다.
즉, Content의 높이가 Footer를 하단에 고정하는 데 핵심이라고 할 수 있다.
구현
우선, body가 차지하는 높이 자체를 늘려 주어야 한다.
그래야 Content도 그 안에서 원하는 만큼 길이를 가질 수 있을 것이다.
최소 높이, 즉 min-height를 활용하면 내용이 짧을 때에만 효과를 낼 수 있을 것이다.
body {
margin: 0;
min-height: 100vh;
}
그 다음, Content가 body에서 남는 공간을 전부 차지하도록 해야 한다.
이를 위해 body는 flex로 설정하고, Content에는 flex-grow: 1을 준다.
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
background-color: green;
flex-grow: 1;
}
이렇게만 하면 끝이다.
결과
내용이 짧을 때, Content가 늘어나 Footer가 하단에 고정된 것을 볼 수 있다.
스크롤바 또한 생기지 않는다.
내용이 길어 페이지를 넘어갈 경우, 정상적으로 스크롤바가 생겨 Footer는 페이지 아래로 밀려난다.
스크롤을 아래로 내려보면, Footer가 내용을 가리거나 하는 것 없이 하단에 잘 보여지고 있는 모습도 확인할 수 있다.
<body>
<header class="header">Header</header>
<div class="content">
Content
</div>
<footer class="footer">Footer</footer>
</body>
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
background-color: yellow;
}
.content {
background-color: green;
flex-grow: 1;
}
.footer {
background-color: skyblue;
}
02025. 04. 22.
웹
이미지 hover 시 오버레이 보여주기
<div class="container">
<img class="image" src="https://picsum.photos/200" />
<div class="overlay">
Overlay content here
</div>
</div>
.container {
position: relative;
display: inline-block;
cursor: pointer;
}
.image {
display: block;
}
.overlay {
background-color: #000000ff;
color: white;
opacity: 0;
transition: opacity 120ms;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 텍스트 가운데 정렬 */
display: flex;
align-items: center;
justify-content: center;
}
.overlay:hover {
opacity: 0.7;
}
이미지에 커서를 hover 했을 때 overlay content가 보여진다.
이미지의 크기에 따라 container의 사이즈도 변경된다.
이미지와, 이를 감싸는 컨테이너를 먼저 배치하고,
overlay 엘리먼트를 컨테이너 전체 면적을 차지하도록 absolute로 설정한다.
hover 시 opacity를 조정해주면 hover시에만 해당 내용을 보여줄 수 있게 된다.
https://jsfiddle.net/rn3e4c5d/20/
02025. 01. 11.