가이드라인
실습
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 튜터
배포
디자인
업로드
수업 노트
즐겨찾기
도움말