메뉴 컨테이너 스타일

메뉴 리스트를 가로로 배치하기 위해 display: flex;를 설정합니다.

메뉴 컨테이너 스타일
.navbar .nav-menu {
  display: flex;
  align-items: center;
  background: white;
}

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 강의를 등록해 주세요!