간단한 메뉴 디자인을 위한 HTML과 CSS 코드를 제공합니다. 이 코드는 수평 메뉴 바를 만들고 각 항목을 스타일링합니다.
<!DOCTYPE html>
<html>
<head>
<title>간단한 메뉴 디자인</title>
<style>
/* 메뉴 스타일 */
ul.menu {
list-style-type: none;
padding: 0;
background-color: #333;
display: flex;
}
ul.menu li {
padding: 10px 20px;
}
ul.menu li a {
text-decoration: none;
color: white;
}
ul.menu li:hover {
background-color: #555;
}
</style>
</head>
<body>
<h1>간단한 메뉴 디자인</h1>
<!-- 메뉴 바 -->
<ul class="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>
위 코드에서는 메뉴를 수평으로 표시하기 위해 display: flex;를 사용하고, 마우스 호버 시 배경색이 변하도록 스타일을 적용합니다.
결과보기
'HTML 예제' 카테고리의 다른 글
| 텍스트 스타일링 연습 (0) | 2023.12.07 |
|---|---|
| 화면 스크롤 이벤트 (0) | 2023.12.07 |
| 사진 크기 조절하기 (0) | 2023.12.07 |
| CSS 애니메이션 사용 (0) | 2023.12.07 |
| 화면에 특수 효과 추가 (0) | 2023.12.07 |
