블록 사용

블록 종류
1~4단 레이아웃 구성에서 사용할 수 있는 블록은 아래와 같습니다.
1~4단 레이아웃 모두에서 사용 가능한 블록 : 텍스트, 버튼, 이미지, 구분선, 여백
2단 레이아웃까지만 사용 가능한 블록 : 동영상, 아코디언
1단 레이아웃에서만 사용 가능한 블록 : 채용 공고, 배너, 슬라이드, 전광판, 단계, 지도
​
블록별 사용 방법 안내
1~4단 레이아웃 모두에서 사용 가능한 블록
텍스트
버튼
이미지
구분선
여백
텍스트 블록 사용 시에는 아래 설정이 가능합니다.
텍스트 스타일 : 제목 1, 2, 3 / 본문 1, 2
글꼴 : 프리텐다드, 본고딕, 지마켓 산스, 배민 한나체 Pro, 나눔스퀘어 네오, 나눔명조
폰트 사이즈 : 14 / 15 / 18 / 20 / 24 / 34 / 38 / 48 / 56
정렬 : 왼쪽, 가운데, 오른쪽
텍스트 링크 설정
굵게, 기울임꼴, 밑줄, 취소선, 글자색, 배경색
글머리 기호 설정
​
설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
배경 : 배경 유무 선택
여백 : 배경의 여백 크기 설정 (내부 상하/좌우 여백 사이즈 설정 가능)
모서리 : 모서리 곡률 설정
배경 색상
텍스트 스타일 설정 후 폰트 사이즈 변경 방식으로 사용하는 것을 추천합니다. 폰트 사이즈 변경 후 텍스트 스타일을 바꾸면 텍스트 스타일의 기본 사이즈가 적용됩니다. 
제목 스타일은 굵게(Bold)로만 설정됩니다. 
텍스트 스타일은 SEO 설정에 영향을 줍니다. 
폰트 사이즈는 모바일 환경에서 일정한 규칙에 따라 사이즈가 변경되거나 유지됩니다. 
데스크탑 환경
모바일 환경
56
38(변환)
48
34(변환)
38
30(변환)
34
26(변환)
28
24(변환)
24
22(변환)
20
20(유지)
18
18(유지)
15
15(유지)
14
14(유지)
버튼 블록은 항목 명을 나타낼 때, 혹은 링크를 연결하여 특정 페이지나 URL로 이동시킬 때 활용합니다. 버튼 설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
버튼 배경 색상 설정
버튼 모양 설정 : 사각형, 라운드형
버튼 크기 : 크게, 보통, 작게
링크 설정 : 페이지, URL, 섹션 / 새 창으로 열기 여부 설정
글자 색상
레이아웃 내 버튼 위치 : 왼쪽, 가운데, 오른쪽, 채우기
버튼에 텍스트 양이 많으면 … 표시로 생략되어 나타날 수 있습니다.
이미지 블록에 첨부할 이미지는 3:2 비율을 권장하며 jpeg, png, gif 유형의 이미지 업로드를 권장합니다. 이미지 설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
이미지 정렬 : 왼쪽, 가운데, 오른쪽
크기 : 기본값 100%
모서리 : 4개 모서리 동시에 곡률 설정 혹은 각 모서리 개별 곡률 설정 가능
마스킹 : 라운드형, 사각형(비율에 따라 1:1, 3:2, 2:1 3종)
이미지 삽입 시에는 추천 비율을 제공하지만, 커스텀 비율로도 업로드할 수 있습니다. (이미지 자르기 기능)
이미지 크기 설정의 퍼센트는 레이아웃 크기에 대비한 비율입니다. [이미지 크기 : 레이아웃 크기]의 비율은 모바일 환경에서도 그대로 반영됩니다.
이미지에 링크를 삽입할 수 있습니다.
이미지 블록 마우스 오버 기능 안내
모바일 환경에서는 마우스 오버 기능이 실행되지 않습니다.
이미지 블록을 선택하여 마우스 오버 액션 추가를 클릭합니다. 
(위 이미지처럼 기본 이미지는 이미 추가되어 있는 상태를 가정하여 설명합니다)
1.마우스 오버버튼을 클릭합니다. 마우스 오버 시 노출될 이미지를 설정할 수 있게 됩니다.
2.이미지 수정을 클릭하여 마우스 오버 시 노출될 이미지를 추가합니다.
3.마우스 오버 설정 버튼을 클릭하여 이미지 확대 정도와 그림자 효과를 설정합니다.
4.우측 상단에 위치하고 있는 미리보기 버튼을 클릭하여 마우스 오버 효과가 잘 적용되었는지 확인합니다.
나인하이어 팀처럼 마우스 오버 효과 구성하기
​
기본 이미지가 블러처리되면서 텍스트가 덮히는 마우스 오버 효과를 만드는 방법을 소개합니다. 이 방법은 디자인 툴 사용이 필요합니다. 대부분의 디자인 툴에서 가능한 방법이니 차근차근 따라와 주세요.
1.먼저, 기본 이미지와 마우스 오버용 이미지를 준비합니다.
a. 배경이 될 기본 이미지를 준비합니다. (이 이미지는 가공 없이 추출합니다)
b. 이미지를 복사하여 두 개로 만듭니다.
c. 복사된 이미지에 블러를 적용합니다.
- 포토샵 기준 : 필터 → 흐림효과 → 가우시안 흐림 효과
- 피그마 기준 : Effects → Layer blur
d. 블러를 적용한 이미지 위에 텍스트를 올립니다.
2.텍스트가 올려진 이미지를 추출합니다.
기본 이미지와 마우스 오버용 이미지가 준비되었습니다.
3.두 이미지를 업로드합니다.
a. 이미지 블록 생성 후 기본 이미지를 먼저 업로드합니다.
b. 이미지 블록 선택 후 마우스 오버 추가 버튼을 클릭합니다.
c. 이어서 마우스 오버 클릭, 이미지 수정 클릭 후 마우스 오버용 이미지를 업로드합니다.
4.미리보기를 클릭하여 효과를 확인합니다.
세로로 나열된 디자인 요소들을 시각적으로 나눠주는 구분선 블록입니다. 설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
선 두께 : 얇은 선, 보통 선, 굵은 선
선 색상
높이 : 낮게, 보통, 높게, 커스텀 (구분선이 차지하는 세로 영역의 높이)
세로로 나열된 디자인 요소들 사이에 여백을 추가합니다. 
설정을 클릭하여 여백이 차지하는 세로 영역의 높이를 설정할 수 있습니다. 
여백 높이는 낮게 / 보통 / 높게 중 하나를 선택하거나 커스텀 사이즈로 설정할 수 있습니다.
​
2단 레이아웃까지만 사용 가능한 블록
동영상
아코디언
동영상은 16:9 비율을 권장합니다. 
설정을 클릭하여 링크 주소를 입력하는 방식으로 동영상을 첨부합니다. 
설정을 통해 동영상을 레이아웃에 맞추거나 여백을 채우는 방식으로 구성할 수 있습니다.
토글 방식으로 주제와 세부 내용을 공유하는 아코디언 블록입니다. 
주로 ‘자주 묻는 질문(FAQ)’을 구성할 때 사용합니다. 
설정을 클릭하여 아래와 같은 설정을 할 수 있습니다. 
콘텐츠 설정 : 콘텐츠 순서 변경, 콘텐츠 추가/삭제 
검색 기능 사용 : ON/OFF 가능 (해당 블록 내에서 텍스트 검색 여부)
​
1단 레이아웃에서만 사용 가능한 블록
채용 공고
배너
슬라이드
전광판
단계
지도
나인하이어에서 생성한 채용 목록을 불러옵니다. 
설정을 클릭하여 아래와 같은 설정을 할 수 있습니다. 
필터 구성 
필터로 제공할 항목 선택 (직군, 소속, 고용 형태, 관리 태그) 
노출할 고용 형태, 경력 사항 설정 
관리 태그 기본 상태 설정 
기본 정렬 설정 : 최신순, 오래된 순, 마감일 가까운 순, 채용명 오름차순(ㄱ~ㅎ), 채용명 내림차순(ㅎ~ㄱ) 중 선택
한 페이지 최대 목록 수 : 10개, 15개, 20개, 25개, 50개, 100개 중 선택
배너 이미지를 추가합니다. 권장 사이즈는 1920px * 560px이며 jpeg, png, gif 파일 유형을 권장합니다. 
설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
오버레이 : 배너 이미지 위로 덮이는 오버레이 색상 및 투명도 설정
텍스트 추가 : 배너 이미지 위에 텍스트 작성 배너 블록에서 텍스트의 폰트 사이즈는 모바일 환경에서 자동 조정됩니다.
배너 블록을 사용하실 때 유의점과 추천 사용 방법을 꼭 확인해 주세요.
배너 블록 내 텍스트 모바일 최적화
배너 텍스트가 모바일 환경에서 지나치게 큰 상태로 표시되지 않도록 배너 텍스트에 한하여 모바일 환경에서 폰트 사이즈가 자동으로 조정됩니다.
데스크톱 환경
모바일 환경
56
38
48
34
38
30
34
26
28
24
24
22
20
20(유지)
18
18(유지)
15
15(유지)
14
14(유지)
배너 블록 이미지 사용 유의사항
​배너 블록 사용 유의 사항 내용을 참고해 주세요.
여러 이미지를 가로 방향의 슬라이드 형식으로 보여주고 싶을 때 사용하는 블록입니다. 
이미지와 이미지 아래 텍스트(설명글)이 기본 구성입니다. 설정을 클릭하여 설명글 사용 여부를 설정할 수 있으며 슬라이드 이미지의 순서를 변경하거나 슬라이드를 추가할 수 있습니다. (최대 10개 슬라이드)
슬라이드 블록에 추가하는 이미지에는 링크를 삽입할 수 있습니다.
(영상)
콘텐츠가 왼쪽 혹은 오른쪽으로 자동으로 움직이는 배너인 전광판 블록입니다. 
블록 안에 최대 10개의 콘텐츠를 추가할 수 있으며, 이미지 혹은 텍스트 타입 중 선택하여 구성합니다.
설정된 전광판 블록은 배포 혹은 미리보기에서 자동으로 움직이며, 마우스 오버 시 애니메이션이 멈춥니다. 전광판 블록에 링크를 설정할 수 있습니다. (개별 이미지나 텍스트가 아닌 전광판 전체에 링크 설정)
채용 절차 등을 시각적으로 표현할 때 사용할 수 있는 단계 블록입니다. 
각 단계의 제목과 설명글이 기본 구성입니다. 
설정을 클릭하여 아래와 같은 설정을 할 수 있습니다. 
단계 추가 : 단계를 추가하거나 삭제할 수 있습니다. (삭제 시 가장 오른쪽 단계부터 삭제, 삭제 시 작성된 텍스트 데이터는 사라짐) 
설명글 사용 : ON/OFF 가능 
디자인 : 라운드형, 사각형 
배경 색상 
글자 색상
 화살표 색상
근무 장소를 안내하기 위해 사용할 수 있는 지도 블록입니다. 
설정을 클릭하여 장소를 추가/수정/제거하거나 마커 색상을 변경할 수 있습니다. 

장소 추가 시 [주소 검색] 후에는 검색된 장소의 장소 명을 입력해야 합니다. 
또한 세부 주소는 수정할 수 있습니다. 
​
단, 마커 위치는 주소 검색 시에 고정되며 변경이 불가능합니다.