HTML 및 CSS로 간단한 Navbar를 구축하는 방법

이번 주 기사에서는 HTML과 CSS를 사용하여 간단한 navbar 구축에 바로 뛰어들고 싶습니다. 구축할 디자인을 살펴보고 요구 사항을 검토해 보겠습니다.

목차:

What we are building

Requirements

Implementation

Conclusion

우리가 만들고 있는 것

우리는 HTML과 CSS로 간단한 navbar를 만들 것입니다. 아래 디자인을 구성 요소의 지침으로 사용합니다.

요구 사항

다음은 navbar를 구축하는 데 필요한 요구 사항입니다.

Navbar 배경색은 #333333입니다.

Navbar hover background-color is #272727

Navbar 활성 배경색은 #272727입니다

텍스트 색상은 #e7e7e7입니다

브랜드 글꼴 크기는 24px입니다

.

링크 전체에 24픽셀의 패딩이 있어야 함

RS는 링크

여야 합니다.

구현

1 단계

내가 가장 먼저 하는 일은 내비게이션을 구축하는 데 어떤 요소가 이치에 맞는지 자문해 보는 것입니다. HTML을 사용하면 선택할 수 있는 시맨틱 요소가 있음을 알 수 있습니다. 이 경우 탐색 구성 요소임을 알고 있으므로 nav 요소를 래핑 컨테이너로 사용합니다. 나중에 스타일을 적용할 수 있도록 navbar 클래스도 추가하겠습니다.

<nav class="navbar"></nav>

2 단계

다음으로 내비게이션 내부의 콘텐츠를 검토하겠습니다.

내용을 두 부분으로 나눕니다.

브랜드 콘텐츠

탐색 항목

이것을 분리하는 이유는 브랜드 콘텐츠가 반드시 탐색 항목이 아니며 HTML이 올바른 의미를 갖기를 원하기 때문입니다.

3단계

다음으로 2단계, 브랜드 콘텐츠의 옵션 1을 구현해 보겠습니다. 요구 사항에서 알고 있기 때문에 링크가 필요하므로 앵커 태그를 사용합니다. 나중에 스타일을 지정할 수 있도록 클래스 이름brand도 추가합니다.

이제 코드는 다음과 같아야 합니다.

<nav class="navbar">
  <a class="brand" href="#">RS</a>
</nav>

4단계

다음으로, 탐색 항목인 2단계의 옵션 2를 구현해 보겠습니다. 나는 이것을 링크 목록으로 분류할 것입니다. HTML 구조가 시맨틱한지 확인하기 위해 목록을 사용하여 항목을 구성합니다.

이제 코드는 다음과 같아야 합니다.

<nav class="navbar">
  <a class="brand" href="#">RS</a>
  <ul>
    <li>
      <a href="#">Blog</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Profile</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

5단계

다음으로 몇 가지 스타일을 추가해 보겠습니다. 브랜드와 내비게이션을 수평으로 정렬하고 필요한 스타일 중 일부를 추가하기 시작하기 위해 flexbox(플렉스박스에 대한 자세한 설명은 체크아웃CSS-TRICKS)를 사용할 것입니다.

이제 스타일은 다음과 같아야 합니다.

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

6단계

다음으로 목록의 스타일을 지정해 보겠습니다. 우리는 목록이 수평이기를 원하기 때문에 이를 달성하기 위해 flexbox를 다시 사용할 수 있습니다.

목록 스타일은 다음과 같아야 합니다.

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

전반적으로 스타일은 다음과 같아야 합니다.

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

7단계

다음으로 브랜드 및 탐색 링크의 스타일을 지정하겠습니다. 브랜드와 링크 주위에 간격을 추가해야 합니다.

링크 및 브랜드 스타일은 다음과 같아야 합니다.

.navbar .brand {
  display: block;
  color: #e7e7e7;
 /* Remove padding from top/bottom and add 24px padding right/left */
  padding: 0 24px;
  font-size: 24px;
}

.navbar ul li a {
  color: #e7e7e7;
  padding: 24px;
  /*Let's make the anchor display block.
     This will ensure when we hover, focus, or is active we get the full width and height 
      of the container.
  */
  display: block;
}

/* When a use hovers or focuses to a link change the background */
.navbar ul a:hover,
.navbar ul a:focus {
  background-color: #272727;
}

전반적으로 스타일은 다음과 같아야 합니다.

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

.navbar .brand {
  /*Let's make the anchor display block.
     This will ensure when we get the full width of the container.
  */
  display: block;
  color: #e7e7e7;
 /* Remove padding from top/bottom and add 24px padding right/left */
  padding: 0 24px;
  font-size: 24px;
}

.navbar ul li a {
  color: #e7e7e7;
  padding: 24px;
  /*Let's make the anchor display block.
     This will ensure when we hover, focus, or is active we get the full width and height 
      of the container.
  */
  display: block;
}

/* When a use hovers or focuses a link change the background */
.navbar ul a:hover,
.navbar ul a:focus {
  background-color: #272727;
}

8단계

다음으로 활성 탐색 링크의 스타일을 지정하는 마지막 조각이 필요합니다.

먼저 HTML을 업데이트하여 active 클래스를 About 링크에 추가해 보겠습니다.

<nav class="navbar">
  <a class="brand" href="#">RS</a>
  <ul>
    <li>
      <a href="#">Blog</a>
    </li>
    <li>
      <a class="active" href="#">About</a>
    </li>
    <li>
      <a href="#">Profile</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

다음으로 active 스타일을 추가해 보겠습니다. 활성 스타일은 포커스 및 호버와 동일하므로 활성 스타일을 추가할 수 있습니다.

.navbar ul a:hover,
.navbar ul a:focus,
.navbar ul .active {
  background-color: #272727;
}

전반적으로 스타일은 다음과 같아야 합니다.

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

.navbar .brand {
  /*Let's make the anchor display block.
     This will ensure when we get the full width of the container.
  */
  display: block;
  color: #e7e7e7;
 /* Remove padding from top/bottom and add 24px padding right/left */
  padding: 0 24px;
  font-size: 24px;
}

.navbar ul li a {
  color: #e7e7e7;
  padding: 24px;
  /*Let's make the anchor display block.
     This will ensure when we hover, focus, or is active we get the full width and height 
      of the container.
  */
  display: block;
}

/* When a user hovers, focuses or if the link is active change the background */
.navbar ul a:hover,
.navbar ul a:focus,
.navbar ul .active {
  background-color: #272727;
}

codepen을 통한 전체 코드:

결론

HTML 및 CSS에 대한 기본 지식을 바탕으로 완벽하게 작동하는 navbar 구성 요소를 만들 수 있었습니다.

웹 개발에 대한 더 많은 정보를 공유하는 Twitter( )에서 저를 아직 팔로우하지 않으셨다면 저를 팔로우해 주세요.