CSS에서 메뉴 만들기

이번 강의에서는 웹사이트 메뉴를 만드는 연습을 할 것입니다. 예를 들어 다음과 같은 메뉴를 만들어 보겠습니다:

먼저 HTML 부분을 만들어야 합니다. 메뉴의 링크를 담을 div를 만들겠습니다:

html<div id="menu">
  <a href="#">link text 1</a>
  <a href="#">link text 2</a>
  <a href="#">link text 3</a>
  <a href="#">link text 4</a>
  <a href="#">link text 5</a>
</div>

보시다시피 샘플에서 메뉴의 한 링크가 강조되어 있습니다. 이것은 우리가 해당 메뉴 항목에 해당하는 사이트 페이지에 있음을 상징합니다. 이러한 페이지는 일반적으로 클래스 active를 사용하여 강조합니다:

html<div id="menu">
  <a href="#">link text 1</a>
  <a href="#" class="active">link text 2</a>
  <a href="#">link text 3</a>
  <a href="#">link text 4</a>
  <a href="#">link text 5</a>
</div>

이제 링크들을 한 줄에 배치해 보겠습니다:

css#menu {
  display: flex;
}

링크 스타일을 작성하겠습니다:

css#menu a {
  margin-right: 5px;
  padding: 10px;
  font: 15px Arial;
  text-decoration: none;
  color: #1437AD;
  border: 1px solid #1437AD;
  background-color: white;
}

링크에 마우스 오버 시 반응을 만들어 보겠습니다:

css#menu a:hover {
  color: blue;
  border: 1px solid blue;
  background-color: #F5F6FA;
}

활성 링크의 모양은 마우스 오버 시 링크 모양과 동일합니다. 이 스타일들을 함께 합쳐 보겠습니다:

css#menu a:hover, #menu a.active {
  color: blue;
  border: 1px solid blue;
  background-color: #F5F6FA;
}

코드를 모두 모아서 메뉴의 코드를 완성하겠습니다:

html<div id="menu">
  <a href="#">link text 1</a>
  <a href="#" class="active">link text 2</a>
  <a href="#">link text 3</a>
  <a href="#">link text 4</a>
  <a href="#">link text 5</a>
</div>

css#menu {
  display: flex;
}
#menu a {
  margin-right: 5px;
  padding: 10px;
  font: 15px Arial;
  text-decoration: none;
  color: #1437AD;
  border: 1px solid #1437AD;
  background-color: white;
}
#menu a:hover, #menu a.active {
  color: blue;
  border: 1px solid blue;
  background-color: #F5F6FA;
}