가이드라인

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%로 설정되어 화면 전체를 가로로 가득 채우게 됩니다.

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말