에러 탈출 일지
[HTML/CSS] menu 구성하기 (ul, li, div, 시맨틱 태그 사용) 본문
# 박스의 유형을 활용한 메뉴 구성하기
1. ul, li 태그 사용
<style>
#container {
width: 700px;
padding: 10px;
margin: 30px auto;
border: 1px solid gray;
}
ul { list-style-type: none;} /*앞에 블릭(점) 없애기*/
ul li a {
text-decoration: none; /*밑줄 없애기*/
color: darkcyan;
font-weight: bold;
}
ul li {
display: inline-block;
width: 100px;
margin: 20px; padding: 10px 10px;
border-radius: 20px;
border: 1px solid salmon;
background-color: salmon;
border-radius: 20px; /*모서리 둥글게*/
}
ul li:hover {background-color: lightpink;}
ul li:hover a {color: white;}
</style> <body>
<div id="container">
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</div>
</body>
# 박스의 유형을 활용한 메뉴 구성하기
2. div 태그 사용
<style>
#container {
width: 700px;
padding: 10px;
margin: 30px auto;
border: 1px solid black;
text-align: center;
}
.top_menu a {
text-decoration: none;
color: orangered;
font-weight: bold;
}
.mm {
display: inline-block;
width: 100px; height: 20px;
padding: 10px 15px;
margin: 0 10px;
text-align: center;
background-color: beige ;
border-top: 5px solid salmon;
}
.mm:hover {
background-color: mistyrose;
border-top: 5px solid deeppink;
}
.mm:hover a color: mediumvioletred;}
</style> <body>
<div id="container">
<div class="top_menu">
<div class="menu1 mm"><a href="#">애완견 종류</a></div>
<div class="menu2 mm"><a href="#">입양하기</a></div>
<div class="menu3 mm"><a href="#">건강 돌보기</a></div>
<div class="menu4 mm"><a href="#">더불어 살기</a></div>
</div>
</div>
</body># 박스의 유형을 활용한 메뉴 구성하기
3. 시멘틱 태그 사용
<style>
#container {
width: 1000px;
padding: 10px;
margin: 30px auto;
text-align: center;
border: 1px solid gray;
font-size: 0.9rem;
}
nav a {
text-decoration: none; /*밑줄 없애기*/
color: black;
font-weight: bold;
}
nav, div {margin: 0;}
.mm {
display: inline-block; /*옆으로 나란히 배치*/
width: 100px; height: 20px;
padding: 5px 10px; /*위아래, 좌우*/
margin: 0 -3px;
border-bottom: 3px solid white;
}
.mm:hover {border-bottom: 3px solid red;}
</style> <body>
<div id="container">
<header></header>
<nav>
<div class="menu1 mm"><a href="#">최고의</a></div>
<div class="menu2 mm"><a href="#">쇼핑찬스</a></div>
<div class="menu3 mm"><a href="#">한가위</a></div>
<div class="menu4 mm"><a href="#">빅세일</a></div>
<div class="menu5 mm"><a href="#">추천 라이프</a></div>
<div class="menu6 mm"><a href="#">제휴 이벤트</a></div>
<div class="menu7 mm"><a href="#">추천 이벤트</a></div>
</nav>
</div>
</body>'개발 > HTML & CSS' 카테고리의 다른 글
| [CSS] 글라디언트(gradient), 레이아웃, 배치 방법 (0) | 2022.09.01 |
|---|---|
| [CSS] 폰트, 다단 설정 (0) | 2022.09.01 |
| [CSS] margin, padding (0) | 2022.08.31 |
| [CSS] text, border, display, box (0) | 2022.08.31 |
| [CSS] Background 속성 (0) | 2022.08.31 |