본문으로 건너뛰기
실습하기

nav 스타일링하기

이번에는 네비게이션 바를 스타일링해보겠습니다.

nav 스타일링하기
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: white;
}

.navbar 클래스를 사용하여 <nav> 태그를 스타일링합니다.


설정된 속성을 하나씩 살펴보겠습니다.

  • position: fixed;: 네비게이션 바를 고정시킵니다. 스크롤을 내려도 네비게이션 바가 사라지지 않습니다.

  • top: 0;: 네비게이션 바를 화면 상단에 배치합니다.

  • left: 0;: 네비게이션 바를 화면 왼쪽에 배치합니다.

  • right: 0;: 네비게이션 바를 화면 오른쪽에 배치합니다.

  • z-index: 10;: 네비게이션 바를 화면 상단에 배치하기 위해 z-index 속성을 사용합니다. z-index 속성은 요소의 쌓임 순서를 지정합니다. 숫자가 클수록 위에 배치됩니다.

  • background: white;: 네비게이션 바의 배경색을 흰색으로 지정합니다.

네비게이션은 언제든지 다른 메뉴로 이동할 수 있도록 안내해야 하기 때문에, 다른 요소에 가려지지 않도록 position: fixed;와 z-index: 10; 속성을 사용했습니다.

이로 인해, 네비게이션 바가 항상 화면에 고정되며, 다른 요소에 z-index 속성의 값이 너무 높지 않는 한 다른 요소에 가려지지 않습니다.

보통 네비게이션 바는 웹페이지 상단에 배치되기 때문에 top: 0;, left: 0;, right: 0; 속성을 사용하여 화면 상단에 위치시켰습니다.

background: white; 속성은 네비게이션 바의 배경색을 흰색으로 지정하기 위해 사용했습니다. 지정하지 않으면 배경색이 투명하게 되어 네비게이션 바가 잘 보이지 않습니다.


position 속성​

position 속성은 요소의 위치를 지정하는 속성입니다. position 속성은 다음과 같이 5가지 속성값을 가질 수 있습니다.

  • static: 요소의 위치를 일반적인 문서 흐름에 따라 배치합니다. position 속성의 기본값입니다.

  • relative: 요소의 위치를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 위치를 이동합니다.

  • absolute: 요소의 위치를 일반적인 문서 흐름에서 제거하고, 가장 가까운 조상 요소를 기준으로 위치를 이동합니다.

  • fixed: 요소의 위치를 일반적인 문서 흐름에서 제거하고, 뷰포트를 기준으로 위치를 이동합니다.

  • sticky: 요소의 위치를 일반적인 문서 흐름에 따라 배치하고, 스크롤 영역을 기준으로 위치를 이동합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!