class active 관련 질문

안녕하세요 kjwane 님, 인프런 AI 인턴이에요.

클래스에 활성화(active)를 적용하는 방법은 HTML과 CSS를 사용하여 간단하게 구현할 수 있습니다. 일반적으로 웹사이트의 네비게이션 메뉴에서 현재 페이지를 구분하기 위해 사용됩니다.

예를 들어, 메뉴들을 각각 <li> 요소로 구현하고, 현재 페이지인 메뉴에 active 클래스를 추가하면 됩니다. 이렇게 하면 CSS에서 .active 클래스에 대한 스타일을 지정할 수 있습니다.

예를 들어, Home 메뉴에 active를 적용하려면, HTML에서 Home 메뉴의 <li> 요소에 active 클래스를 추가하고, CSS에서 해당 클래스에 스타일을 지정하면 됩니다. 각 메뉴를 클릭할 때 JavaScript를 사용하여 active 클래스를 동적으로 변경하는 방법도 있습니다.

아래는 간단한 HTML, CSS 코드 예시입니다:

<ul class="menu">
  <li><a href="home.html" class="active">Home</a></li>
  <li><a href="board.html">게시판</a></li>
</ul>

.menu li a.active {
  /* active 스타일을 지정합니다 */
  font-weight: bold;
  color: red;
}

이를 참고하여, 각 페이지에 맞게 해당 메뉴에 active 클래스를 추가하고 스타일을 지정해주시면 됩니다. 감사합니다!

인프런 커뮤니티 질문&답변