메뉴 컨테이너 스타일
메뉴 컨테이너 스타일
.navbar .nav-menu {
display: flex;
align-items: center;
background: white;
}
메뉴 리스트를 가로로 배치하기 위해 display: flex;
를 설정합니다.
display: flex;
는 요소를 가로로 배치할 때 사용됩니다.
align-items: center;
는 요소들을 수직으로 가운데 정렬할 때 사용됩니다.
이렇게 설정하면 메뉴 리스트가 가로로 배치되며 수직으로 가운데 정렬됩니다.
메뉴 항목 스타일
메뉴 항목 스타일
.navbar .nav-link {
margin: 0 16px;
font-size: 14px;
font-weight: var(--weight-semibold);
}
메뉴 항목 사이의 간격을 위해 margin: 0 16px;
를 설정합니다.
margin: 0 16px;
는 위 아래 여백은 0으로, 좌 우 여백은 16px으로 설정합니다.
margin
속성은 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 값을 설정할 수 있습니다.
예를 들어, margin: 2px 4px 6px 8px;
는 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 설정됩니다.
만약 헷갈린다면, margin-top
, margin-bottom
, margin-left
, margin-right
속성을 따로 사용하는 것도 가능합니다.
메뉴 항목의 글자 크기를 설정하기 위해 font-size: 14px;
를 설정합니다.
font-weight: var(--weight-semibold);
는 글자의 굵기를 설정합니다.
var(--weight-semibold);
는 --weight-semibold
라는 이름의 변수를 사용하는 것으로, 사전에 정의된 font-weight
값을 참조합니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!