안녕하세요. 성조입니다.
이번 포스팅은 HTML과 CSS를 활용해서 가볍게 하단에 고정된 메뉴바를 만들어보려고 해요.
만들게 된 이유는 티스토리에서 포스팅하다 보면 미리 보기, 맞춤법, 글감 검색, open source ~~ 임시저장 완료 같은 버튼이 있는 것을 보고 그냥 저런 기능도 가볍게 연습 삼아 만들면 좋겠다 싶어서 만들게 됐습니다.
예시 이미지
HTML 코드
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="menu">
<div class="menu-details">
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
</ul>
</div>
</div>
<!-- 나머지 콘텐츠 -->
</body>
</html>
CSS 코드
.menu {
background-color: #f2f2f2;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
}
.menu-details ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.menu-details ul li {
display: inline-block;
margin-right: 10px;
}
.menu-details ul li a {
color: #333;
text-decoration: none;
}
설명
HTML의 경우 콘텐츠는 어디에 넣어도 무관하다.
우선 만들고자 했던 티스토리의 게시물 작성 하단 부분이 어떤 태그로 활용됐는지 파악해 보려 한다.
기본 header, nav, footer 같은 시맨틱태그를 활용하지 않고 기본 div 태그에 클래스를 추가하여 만들었다.
사실 페이지 바닥에 붙이는 구조로여서 태그를 어떻게 할 것인지 조금 고민했다. 본인은 가볍게 메뉴라고 생각하고 html div class 네임을 menu로 지정했다.
내부에 디테일한 값들이 들어갈 것이므로 다음의 구조로 만들었다.
<div class="menu">
<div class="menu-details">
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
</ul>
</div>
</div>
이후 html 코드를 완성 후. css로 넘어간다.
.menu {
background-color: #f2f2f2;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
}이 css 코드가 바닥에 붙은 상태로 고정하는 코드이다. 티스토리는 #F5F5F5 코드의 색상을 사용하길래 본인은 #F2F2F2 코드를 적용시켜 봤다.
그리고 조금 더 보기 좋게 만들기 위해서 가운데로 정렬했고, 글씨 사이즈에 맞도록 조정했다.
.menu-details ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.menu-details ul li {
display: inline-block;
margin-right: 10px;
}
.menu-details ul li a {
color: #333;
text-decoration: none;
}
오타나 궁금한 것이 있다면 언제든지 댓글 남겨주시길 바랍니다!
[여담]
html css로 가볍게 하단 고정 메뉴를 만들어 봤습니다.
가볍게 이런 코드가 있구나, 하고 이 코드를 응용해서 다른 새로운 코드를 만들어 주면 좋을 것 같다는 생각이 들었습니다!
다음 포스팅 때 뵙겠습니다!
'Web Basic > CSS' 카테고리의 다른 글
| [CSS] Tailwind CSS 반응형 커스텀 사이즈 세팅하기 (5) | 2024.11.08 |
|---|---|
| [CSS] CSS란? (0) | 2022.08.25 |
