div 스타일링하기

이번에는 네비게이션 바 내부의 div 요소를 스타일링해보겠습니다.

div 스타일링하기
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  height: 80px;
  width: 100%;
}

.navbar .container 선택자를 사용하여 div 요소를 스타일링 했습니다.

설정된 속성은 다음과 같습니다.

display: flex;: 내부 요소를 가로로 배치하기 위해 flex를 사용했습니다.
align-items: center;: 내부 요소를 수직으로 중앙 정렬했습니다.
justify-content: space-between;: 내부 요소를 수평으로 좌우로 분산 정렬했습니다.
z-index: 10;: div 요소를 화면 상단에 배치하기 위해 z-index 속성을 사용합니다.
height: 80px;: div 요소의 높이를 80px로 지정합니다.
width: 100%;: div 요소의 너비를 화면의 100%로 지정했습니다

이렇게 하면 div 요소가 네비게이션 바 내에서 가로로 배치되며, 수직으로 중앙 정렬됩니다. 또한 수평으로 좌우로 분산 정렬되어 내부 요소 사이에 공간이 생기게 됩니다.

z-index 속성으로 인해서 div 요소는 네비게이션 바 안에서 10번째로 높게 쌓이게 됩니다. z-index 속성이 없는 요소나, 설정되더라도 10보다 적은 요소보다 위에 그려져서 다른 요소들에게 가려지지 않습니다.

그리고 높이는 80px로, 너비는 화면의 100%로 설정되어 화면 전체를 가로로 가득 채우게 됩니다.

다음 내용이 궁금하다면?

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