1. 헤더 구조와 기본 설정
헤더는 아래 ①~⑤ 요소로 구성됩니다.
① 로고 - 좌상단에 고정 배치되는 회사 로고 이미지 (1개)
② 메뉴 버튼 - 헤더에 표시되는 메뉴 버튼 (추가/삭제 가능, 최대 7개)
③ 드롭다운 메뉴 - 메뉴 버튼 하단에 표시되는 하위 메뉴 (추가/삭제 가능, 메뉴별 최대 10개)
④ 로그인 버튼 - 로그인 기능이 있는 경우 표시되는 버튼 (1개)
⑤ 언어 선택 버튼 - 다국어 홈페이지를 사용할 경우 표시되는 버튼 (1개)
로고 이미지와 메뉴 버튼, 드롭다운 메뉴의 링크는 페이지, 외부 URL, 또는 섹션과 연결할 수 있습니다. 드롭다운 메뉴의 경우 메뉴 버튼을 최대 7개, 하위 항목을 최대 10개까지 연결할 수 있습니다.
2. 헤더 스타일 설정
헤더 스타일 설정 패널에서는 헤더의 배경 유형, 스크롤 상태 스타일, 메뉴 레이아웃 방식, 모바일 화면의 드로어 메뉴 스타일을 설정할 수 있습니다.
채용 홈페이지 빌더에서 [헤더] 영역을 클릭한 후, 우측에 나타나는 [헤더] 설정 버튼을 클릭하면 스타일 설정 화면이 열립니다.
1) 헤더 유형 선택
헤더 배경을 표시하는 방식을 선택합니다.
① 기본 상태: 기본 상태에서 표시할 헤더 스타일을 설정합니다.
② 헤더 유형 선택: 일반 헤더 또는 오버레이 헤더 중 선택합니다.
③ 스크롤 상태: 스크롤 시 적용될 스타일을 설정합니다.
④ 스크롤 상태 세부 설정: 각 헤더 유형별 스크롤 스타일 옵션을 세부 설정합니다.
일반 헤더와 오버레이 헤더 모두 기본 상태 스타일을 기준으로, 스크롤 시 변경될 스타일을 별도로 설정할 수 있습니다.
(1) 일반 헤더
헤더 영역에 배경색을 채울 수 있는 기본 유형입니다.
기본 상태
배경색: 색상 피커와 색상 코드로 헤더 배경색을 지정합니다.
구분 방식: 헤더와 본문 사이의 경계를 표시하는 방식을 선택합니다.
구분선: 헤더 하단에 얇은 선을 표시합니다.
그림자: 헤더에 아래 방향의 그림자를 표시합니다.
스크롤 상태
배경색: 스크롤 시 헤더 배경색을 별도로 지정할 수 있습니다.
구분 방식: 스크롤 시 헤더 하단의 경계 표시 방식을 별도로 설정합니다.
(2) 오버레이 헤더
헤더 배경을 투명하게 처리하여 본문 첫 번째 섹션 위에 헤더가 겹쳐 표시되는 유형입니다. 이미지나 영상 위에 헤더를 자연스럽게 배치할 때 활용할 수 있습니다.
기본 상태
배경색: 배경색과 투명도를 별도로 지정할 수 있습니다.
배경 블러: 헤더 아래 콘텐츠에 블러 처리 효과를 적용합니다.
스크롤 상태
배경색: 스크롤 시 헤더 배경색과 투명도를 별도로 지정할 수 있습니다.
배경 블러: 스크롤 시 배경 블러 적용 여부를 변경할 수 있습니다.
⚠️ 오버레이 헤더 사용 시, 헤더 배경이 없어 메뉴 텍스트 가독성이 낮아질 수 있습니다. 메뉴 글자색을 콘텐츠 배경과 충분히 대비되도록 설정하세요.
2) 메뉴 레이아웃
헤더 내 메뉴 항목의 가로 정렬 위치를 선택합니다.
왼쪽: 로고 옆 왼쪽 정렬
가운데: 헤더 중앙 정렬
오른쪽 (기본값): 헤더 우측 정렬
💡 메뉴 레이아웃 설정은 데스크톱 화면(너비 864px 이상)에서만 적용됩니다. 864px 미만의 모바일 화면에서는 드로어 메뉴로 자동 전환됩니다.
3) 모바일 드로어 화면 스타일
모바일 화면에서 메뉴 아이콘을 눌렀을 때 열리는 드로어(서랍형) 메뉴의 전체 배경 스타일을 선택합니다.
밝은 모드 (기본값): 흰색 계열의 밝은 배경
어두운 모드: 어두운 배경
3. 헤더 로고 설정
헤더에 표시할 로고 이미지와 크기를 설정해 보세요.
1) 로고 유형 선택
채용 홈페이지 헤더에 사용할 로고를 아래 두 가지 방식 중 선택할 수 있습니다.
(1) 워크스페이스 브랜드 로고
나인하이어 [관리] > [워크스페이스 설정] 에 등록된 브랜드 로고를 그대로 사용합니다. 브랜드 로고가 변경되면 채용 홈페이지 헤더의 로고도 자동으로 반영됩니다.
브랜드 로고는 채용 홈페이지 헤더 외에도 공고 및 지원서 작성 페이지에 동일하게 표시됩니다.
(2) 채용 홈페이지 전용 로고
채용 홈페이지에만 사용할 별도 로고 이미지를 직접 업로드합니다. 브랜드 로고와 다른 이미지를 헤더에 사용하고 싶을 때 선택합니다.
로고 이미지 권장 등록 사이즈 : 140px * 36px (4:1)
💡 브랜드 로고가 등록되어 있지 않거나 채용 홈페이지 전용 로고를 설정하지 않으면 로고 영역이 빈 값으로 표시됩니다. 헤더에 로고를 표시하려면 브랜드 로고를 등록하거나 채용 홈페이지 전용 로고를 설정하세요.
2) 로고 링크 설정
브랜드 로고 및 채용 홈페이지 전용 로고 각각에 링크를 연결할 수 있습니다.
각 로고를 클릭하면 링크 설정 옵션이 표시됩니다.
링크는 페이지, 외부 URL, 또는 섹션과 연결할 수 있습니다.
3) 채용 홈페이지 로고 크기 조절
업로드된 채용 홈페이지 로고의 표시 크기를 조절합니다.
슬라이더 또는 직접 입력으로 10% ~ 100% 사이에서 크기를 조정할 수 있습니다.
로고 크기 조절은 로고의 비율을 유지한 채 확대/축소됩니다.
100%는 원본 이미지의 최대 크기(140px *36px)로 표시됩니다.
💡 채용 홈페이지 전용 로고로 업로드한 이미지가 권장 크기(140px*36px) 비율과 다를 경우, 잘리거나 변형되지 않고 원본 비율 그대로 표시됩니다.
브랜드 로고는 워크스페이스에 설정한 그대로 반영되며, 채용 홈페이지에서 별도로 크기를 조절할 수 없습니다.
4. 헤더 메뉴 디자인 설정
헤더에 표시되는 메뉴, 드롭다운, 로그인 버튼, 언어 선택 버튼의 디자인을 설정합니다.
헤더에 표시되는 메뉴, 드롭다운, 로그인 버튼, 언어 선택 버튼의 디자인을 각각 설정합니다. 각 항목에서 배경색 / 테두리색 / 모서리 값 / 폰트 / 색상을 설정할 수 있습니다.
기본 메뉴 디자인: 헤더에 나열되는 메뉴 항목들의 디자인
드롭다운 메뉴 디자인: 하위 메뉴(드롭다운) 영역의 디자인
로그인 버튼 디자인: 헤더에 표시되는 로그인 버튼의 디자인
언어 선택 버튼 디자인: 언어 전환 버튼의 디자인 (다국어 설정이 활성화된 경우에만 표시)
💡 기본 메뉴/드롭다운 메뉴 버튼의 경우 설정한 디자인을 동일한 메뉴 유형에 전체 적용 할 수 있습니다.