728x90
마우스오버 효과(마우스 커서 올릴 때 hover 효과)
_base_book.html
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- css 적용 -->
<link rel="stylesheet" href = "{% static 'css/style.css' %}">
......
</head>
<body>
{% include 'nav_bar.html' %}
...
</div>
</body>
</html>
nav_bar.html
{% load static %}
<header class="header">
...
<!-- 메뉴바 -->
<div class="headermiddle">
<ul>
<li><a href="{% url 'book:best_seller' %}"><b>베스트셀러</b><i class="fa-regular fa-lightbulb"></i></a></li>
<li><a href="{% url 'book:recommended_book' %}"><b>AI추천도서</b><i class="fa-regular fa-lightbulb"></i></a></li>
<li><a href="{% url 'book:show_all_book' %}"><b>전체도서목록</b><i class="fa-regular fa-lightbulb"></i></a></li>
<li><a href="{% url 'book:show_review' %}"><b>마이리뷰조회</b><i class="fa-regular fa-lightbulb"></i></a></li>
</ul>
</div>
...
</header>
css/style.css
...
.headermiddle li {
margin: 0px 25px;
}
/* 마우스오버 설정 */
.headermiddle li:hover {
background-color: #00468B;
border-radius: 3px;
}
.headermiddle a {
text-decoration-line: none; /* 링크 밑줄 없앰 */
color: #00468B;
}
/* 마우스오버 설정 */
.headermiddle a:hover {
color: white;
}
...
[마우스오버 전]
[마우스오버 후]
728x90
'03_Web' 카테고리의 다른 글
| [Django]부트스트랩(Bootstrap)을 활용한 form디자인 (1) | 2025.05.27 |
|---|---|
| 무료아이콘 웹에 적용하기(FONT AWESOME) (0) | 2025.05.27 |
| [Django]로그인 기능 구현 (4) | 2025.05.23 |
| [Django]Paginator를 활용한 페이징(paging) (3) | 2025.05.22 |
| [Django]장고 템플릿 태그 주석 다는법 (0) | 2025.05.22 |