FullStack Steps/CSS Practicing
CSS 수평메뉴 수직메뉴 간단하게 만들어 보기
짱짱짱마샤리
2025. 1. 7. 11:30
오늘은 수평메뉴와 수직 메뉴를 간단하게 구현해보겠다
애플 공식 홈페이지의 수평 메뉴의 일부를 만들어보려고 한다.
일단 메뉴 안에 여러 카테고리 들이 있는 걸로 생각해서 list를 쓰면 편할 것 같다
그럼 리스트를 해서 작성 해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<!-- a 태그는 메뉴를 클릭했을 때 다른 웹사이트로 이동해야하기 때문에 적어주었다.
#은 아무 의미 없다. 링크 설정 전 임시방편으로 #을 적어줬을 뿐이다. -->
<li><a href="#">스토어</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">AirPods</a></li>
</ul>
</body>
</html>
리스트를 썼더니 수평이 아닌 수직 메뉴가 생성 됐다. 하지만 괜찮다 CSS는 이를 수평으로 바꿔줄 뿐더러 좀 더 멋드러지게 바꿔줄 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
/* margin이 바깥쪽 여백의 크기라면
padding은 안쪽 여백의 크기를 나타낸다 */
padding: 0;
}
#box {
width: 765px;
/* 좌우마진이 동일하게 설정(결과적으로 중앙배치) */
margin: auto;
/* margin-left: 100px;
margin-right: 100px; */
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 메뉴 상자를 만들기 위해 div 태그 id 속성값을 box로 설정하고
id selector를 사용해 위에서 CSS를 정의해주었다 -->
<div id=box>
<ul>
<!-- a 태그는 메뉴를 클릭했을 때 다른 웹사이트로 이동해야하기 때문에 적어주었다.
#은 아무 의미 없다. 링크 설정 전 임시방편으로 #을 적어줬을 뿐이다. -->
<li><a href="#">스토어</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">AirPods</a></li>
</ul>
</div>
</body>
</html>
일단 메뉴 박스를 페이지의 정중앙에 위치시켜놓았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
/* margin이 바깥쪽 여백의 크기라면
padding은 안쪽 여백의 크기를 나타낸다 */
padding: 0;
}
#box {
width: 880px;
/* 좌우마진이 동일하게 설정(결과적으로 중앙배치) */
margin: auto;
/* margin-left: 100px;
margin-right: 100px; */
/* border: 1px solid black; */
}
/* id가 main-menu의 배경색을 검정색으로 바꿈 */
#main-menu {
background-color: black;
}
/* id가 main-menu인 태그 안에 있는 모든 li 태그에 적용
배경색을 검정색으로 바꿈
블록 요소인 li 태그를 인라인 속성의 블록으로 표시시*/
#main-menu>li {
background-color: black;
display: inline-block;
}
/* id가 main-menu인 태그 안에 있는 모든 li 태그 안에 있는 모든 a 태그에 적용
a 태그는 인라인 요소기 때문에 한쪽으로 쏠리는 현상이 발생하여 block으로 바꿔줌
a 태그의 텍스트는 밑줄을 가지기 때문에 밑줄 효과를 빼주기 위해 none으로 설정
텍스트 색깔을 하얀색으로 바꿔주고 a 태그의 길이를 100px로 설정해준다
a 태그안에 씌여진 텍스트를 가운데 정렬하고
a 태그의 바깥여백을 10px로 설정해준다
폰트의 크기를 18px로 고정해주고
폰트를 강조 표시한다.
*/
#main-menu>li>a {
display: block;
text-decoration: none;
color: white;
width: 100px;
text-align: center;
padding: 10px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 메뉴 상자를 만들기 위해 div 태그 id 속성값을 box로 설정하고
id selector를 사용해 위에서 CSS를 정의해주었다 -->
<div id=box>
<ul id="main-menu">
<!-- a 태그는 메뉴를 클릭했을 때 다른 웹사이트로 이동해야하기 때문에 적어주었다.
#은 아무 의미 없다. 링크 설정 전 임시방편으로 #을 적어줬을 뿐이다. -->
<li><a href="#">스토어</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">AirPods</a></li>
</ul>
</div>
</body>
</html>원래는 하나하나씩 하려고 했는데 첨부할 실행 결과들이 보기 좋지 않아서 한꺼번에 작성한 내용이다.
이렇게 아까보다 훨씬 근사한(?) 수평 메뉴가 만들어졌다
다음은 수직 메뉴를 만들어보자
저녁 메뉴를 고를텐데 음식을 수직으로 나열해보겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>저녁메뉴</h1>
<ul>
<li><a href="#">국밥</a></li>
<li><a href="#">라면</a></li>
<li><a href="#">햄버거</a></li>
<li><a href="#">김밥</a></li>
<li><a href="#">김치찌게</a></li>
</ul>
</body>
</html>
헤드를 가운데 정렬해주고 li 태그도 좀 더 수정해주자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
가운데 정렬해주고 폰트를 궁서체로 바꿔준다
폰트 사이즈는 26px에 강조표시를 해주고
글씨색은 파란색 계열로 설정해주고
그림자를 우측하단에 3px 두께만큼 검정색으로 설정해준다
*/
h1{
text-align: center;
font-family: 궁서체;
font-size: 26px;
font-weight: bold;
color: #4750f4;
text-shadow: 1px 1px 3px black;
}
/*
sub-menu 클래스의 리스트 스타일을 none으로줘서
리스트 왼쪽의 점을 없앤다
*/
.sub-menu{
list-style: none;
}
</style>
</head>
<body>
<h1>점심메뉴</h1>
<!-- ul 태그에 CSS를 적용하기 위해서 클래스 속성을 부여한다 -->
<ul class="sub-menu">
<li><a href="#">국밥</a></li>
<li><a href="#">라면</a></li>
<li><a href="#">햄버거</a></li>
<li><a href="#">김밥</a></li>
<li><a href="#">김치찌게</a></li>
</ul>
</body>
</html>
위의 코드의 실행 결과이다. 의도한대로 됐지만 아직 좀 밋밋하다.
조금 더 이쁘게 수정해주자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
가운데 정렬해주고 폰트를 궁서체로 바꿔준다
폰트 사이즈는 26px에 강조표시를 해주고
글씨색은 파란색 계열로 설정해주고
그림자를 우측하단에 3px 두께만큼 검정색으로 설정해준다
*/
h1{
text-align: center;
font-family: 궁서체;
font-size: 26px;
font-weight: bold;
color: #4750f4;
text-shadow: 1px 1px 3px black;
}
/*
sub-menu 클래스의 리스트 스타일을 none으로줘서
리스트 왼쪽의 점을 없앤다
*/
.sub-menu{
list-style: none;
}
.sub-menu > li > a {
display: block;
width: 100px;
border: 1px solid yellow;
text-decoration: none;
margin-top: 20px;
/* 색깔은 r: 9, g: 120, b: 48 만큼 줘서 녹색 계열의 색을 주겠다 */
color: rgb(9, 120, 48);
font-weight: bold;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1>점심메뉴</h1>
<!-- ul 태그에 CSS를 적용하기 위해서 클래스 속성을 부여한다 -->
<ul class="sub-menu">
<li><a href="#">국밥</a></li>
<li><a href="#">라면</a></li>
<li><a href="#">햄버거</a></li>
<li><a href="#">김밥</a></li>
<li><a href="#">김치찌게</a></li>
</ul>
</body>
</html>
이제 좀 볼만해졌다
마지막으로 hover 를 적용해서 마우스를 올렸을 때 색깔이 변하게끔 해주자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
가운데 정렬해주고 폰트를 궁서체로 바꿔준다
폰트 사이즈는 26px에 강조표시를 해주고
글씨색은 파란색 계열로 설정해주고
그림자를 우측하단에 3px 두께만큼 검정색으로 설정해준다
*/
h1 {
text-align: center;
font-family: 궁서체;
font-size: 26px;
font-weight: bold;
color: #4750f4;
text-shadow: 1px 1px 3px black;
}
/*
sub-menu 클래스의 리스트 스타일을 none으로줘서
리스트 왼쪽의 점을 없앤다
*/
.sub-menu {
list-style: none;
}
.sub-menu>li>a {
display: block;
width: 100px;
border: 1px solid yellow;
text-decoration: none;
margin-top: 20px;
/* 색깔은 r: 9, g: 120, b: 48 만큼 줘서 녹색 계열의 색을 주겠다 */
color: rgb(9, 120, 48);
font-weight: bold;
text-align: center;
padding: 10px;
}
/* 의사클래스:상태 */
.sub-menu>li>a:hover {
border-color: red;
box-shadow: 1px 1px 3px black;
}
/* 의사요소 */
.sub-menu>li>a::before {
content: '◀';
}
.sub-menu>li>a::after {
content: '▶';
}
.sub-menu>li::marker {
content: '※';
}
</style>
</head>
<body>
<h1>점심메뉴</h1>
<!-- ul 태그에 CSS를 적용하기 위해서 클래스 속성을 부여한다 -->
<ul class="sub-menu">
<li><a href="#">국밥</a></li>
<li><a href="#">라면</a></li>
<li><a href="#">햄버거</a></li>
<li><a href="#">김밥</a></li>
<li><a href="#">김치찌게</a></li>
</ul>
</body>
</html>
마우스를 올리면 이렇게 튀어나온 것같은 효과를 줄 수 있다