💦 문제 (라고 쓰고 각종 삽질)
웹사이트를 만드는데, 사이트 내에 글씨들에 모두 동일한 폰트 컬러를 적용하고 싶었다.
원래는 head 태그 안의 style 태그 안에 클래스로 지정한 후에, 가능한 큰 부모 태그에 넣어서 많이 쓰지 않고 일괄 지정하고 싶었다.
다른 영역들은 모두 지정이 잘 되었는데, 아래 코드에서 li 태그 안의 글씨들은 바뀌지 않았다.
a 태그의 클래스로 있던 .text-white를 나만의 컬러를 지정한 클래스(.custom-navbar)로 하려고 했는데, 딱 상단 메뉴의 글씨만 변경이 안되었다.
원인은 Bootstrap에 기본 적용된 색깔들이 우선 순위를 높게 가져서!
아예 .custom-text 라는 폰트 컬러만 지정한 클래스를 만들어서 모든 a 태그에 적용했지만 그것도 실패...
그것도 역시나 원인은 Bootstrap에 기본 적용된 색깔들이 우선 순위를 높게 가져서!
✨ 해결
이 우선 순위를 강제로 바꿔주는 건 위험하다고 GPT가 그러길래,
그냥 Bootstrap 에서 기본 제공하는 클래스 중 하나인 .text-white 와 같은 클래스를 사용했다.
(코드는 맨 아래에)
그랬더니 적당히 예쁘게 나온 것 같다.
<nav class="navbar custom-navbar d-flex justify-content-between align-items-center sticky-top">
<div class="ms-3">
<a href="{{ url_for('home') }}">
<img src="https://static.vecteezy.com/system/resources/previews/001/187/438/original/heart-png.png" alt=""
class="custom-logo">
</a>
</div>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" aria-current="page" href="{{ url_for('home')}}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="{{ url_for('music')}}">Music</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="{{ url_for('love') }}">Love</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="{{ url_for('team') }}">Team</a>
</li>
</ul>
</div>
</nav>
<div class="d-flex justify-content-center align-items-center mx-4">
<h6 id="current-time" class="text-white"></h6>
</div>
</nav>코드 전체는 Github에서 확인
(문제를 해결한 시점의 코드로, 현재 완성본과는 차이가 있을 수 있음)
👻 TMI
이거 해결하다가 새벽 4시까지 못 잠...
Why can't I sleep? 🫠
그래도 나만의 첫 홈페이지 완성!
자세한 스토리는 WIL 에 적어야지!
