헤더 디자인 설정하기

헤더는 아래 ①~⑤ 요소로 구성됩니다.

① 로고 - 좌상단에 고정 배치되는 회사 로고 이미지 (1개)

② 메뉴 버튼 - 헤더에 표시되는 메뉴 버튼 (추가/삭제 가능, 최대 7개)

③ 드롭다운 메뉴 - 메뉴 버튼 하단에 표시되는 하위 메뉴 (추가/삭제 가능, 메뉴별 최대 10개)

④ 로그인 버튼 - 로그인 기능이 있는 경우 표시되는 버튼 (1개)

⑤ 언어 선택 버튼 - 다국어 홈페이지를 사용할 경우 표시되는 버튼 (1개)

로고 이미지와 메뉴 버튼, 드롭다운 메뉴의 링크는 페이지, 외부 URL, 또는 섹션과 연결할 수 있습니다. 드롭다운 메뉴의 경우 메뉴 버튼을 최대 7개, 하위 항목을 최대 10개까지 연결할 수 있습니다.

헤더 스타일 설정 패널에서는 헤더의 배경 유형, 스크롤 상태 스타일, 메뉴 레이아웃 방식, 모바일 화면의 드로어 메뉴 스타일을 설정할 수 있습니다.

채용 홈페이지 빌더에서 [헤더] 영역을 클릭한 후, 우측에 나타나는 [헤더] 설정 버튼을 클릭하면 스타일 설정 화면이 열립니다.

헤더 배경을 표시하는 방식을 선택합니다.

① 기본 상태: 기본 상태에서 표시할 헤더 스타일을 설정합니다.

② 헤더 유형 선택: 일반 헤더 또는 오버레이 헤더 중 선택합니다.

③ 스크롤 상태: 스크롤 시 적용될 스타일을 설정합니다.

④ 스크롤 상태 세부 설정: 각 헤더 유형별 스크롤 스타일 옵션을 세부 설정합니다.

일반 헤더와 오버레이 헤더 모두 기본 상태 스타일을 기준으로, 스크롤 시 변경될 스타일을 별도로 설정할 수 있습니다.

(1) 일반 헤더

헤더 영역에 배경색을 채울 수 있는 기본 유형입니다.

기본 상태

• 배경색: 색상 피커와 색상 코드로 헤더 배경색을 지정합니다.

• 구분 방식: 헤더와 본문 사이의 경계를 표시하는 방식을 선택합니다.

  • 구분선: 헤더 하단에 얇은 선을 표시합니다.

  • 그림자: 헤더에 아래 방향의 그림자를 표시합니다.

스크롤 상태

• 배경색: 스크롤 시 헤더 배경색을 별도로 지정할 수 있습니다.

• 구분 방식: 스크롤 시 헤더 하단의 경계 표시 방식을 별도로 설정합니다.

(2) 오버레이 헤더

헤더 배경을 투명하게 처리하여 본문 첫 번째 섹션 위에 헤더가 겹쳐 표시되는 유형입니다. 이미지나 영상 위에 헤더를 자연스럽게 배치할 때 활용할 수 있습니다.

기본 상태

• 배경색: 배경색과 투명도를 별도로 지정할 수 있습니다.

• 배경 블러: 헤더 아래 콘텐츠에 블러 처리 효과를 적용합니다.

스크롤 상태

• 배경색: 스크롤 시 헤더 배경색과 투명도를 별도로 지정할 수 있습니다.

• 배경 블러: 스크롤 시 배경 블러 적용 여부를 변경할 수 있습니다.

헤더 내 메뉴 항목의 가로 정렬 위치를 선택합니다.

• 왼쪽: 로고 옆 왼쪽 정렬

• 가운데: 헤더 중앙 정렬

• 오른쪽 (기본값): 헤더 우측 정렬

모바일 화면에서 메뉴 아이콘을 눌렀을 때 열리는 드로어(서랍형) 메뉴의 전체 배경 스타일을 선택합니다.

• 밝은 모드 (기본값): 흰색 계열의 밝은 배경

• 어두운 모드: 어두운 배경

헤더에 표시할 로고 이미지와 크기를 설정해 보세요.

채용 홈페이지 헤더에 사용할 로고를 아래 두 가지 방식 중 선택할 수 있습니다.

(1) 워크스페이스 브랜드 로고

나인하이어 [관리] > [워크스페이스 설정] 에 등록된 브랜드 로고를 그대로 사용합니다. 브랜드 로고가 변경되면 채용 홈페이지 헤더의 로고도 자동으로 반영됩니다.

브랜드 로고는 채용 홈페이지 헤더 외에도 공고 및 지원서 작성 페이지에 동일하게 표시됩니다.

(2) 채용 홈페이지 전용 로고

채용 홈페이지에만 사용할 별도 로고 이미지를 직접 업로드합니다. 브랜드 로고와 다른 이미지를 헤더에 사용하고 싶을 때 선택합니다.

• 로고 이미지 권장 등록 사이즈 : 140px * 36px (4:1)

브랜드 로고 및 채용 홈페이지 전용 로고 각각에 링크를 연결할 수 있습니다.

각 로고를 클릭하면 링크 설정 옵션이 표시됩니다.

링크는 페이지, 외부 URL, 또는 섹션과 연결할 수 있습니다.

업로드된 채용 홈페이지 로고의 표시 크기를 조절합니다.

• 슬라이더 또는 직접 입력으로 10% ~ 100% 사이에서 크기를 조정할 수 있습니다.

• 로고 크기 조절은 로고의 비율을 유지한 채 확대/축소됩니다.

• 100%는 원본 이미지의 최대 크기(140px *36px)로 표시됩니다.

헤더에 표시되는 메뉴, 드롭다운, 로그인 버튼, 언어 선택 버튼의 디자인을 설정합니다.

헤더에 표시되는 메뉴, 드롭다운, 로그인 버튼, 언어 선택 버튼의 디자인을 각각 설정합니다. 각 항목에서 배경색 / 테두리색 / 모서리 값 / 폰트 / 색상을 설정할 수 있습니다.

1. 기본 메뉴 디자인: 헤더에 나열되는 메뉴 항목들의 디자인

2. 드롭다운 메뉴 디자인: 하위 메뉴(드롭다운) 영역의 디자인

3. 로그인 버튼 디자인: 헤더에 표시되는 로그인 버튼의 디자인

4. 언어 선택 버튼 디자인: 언어 전환 버튼의 디자인 (다국어 설정이 활성화된 경우에만 표시)