어포스트 배포 스킨 옵션 설정 안내

* 스킨 옵션 설정 중 공통적인 스킨 옵션들을 설정하는 방법을 안내하는 글이며, 스킨에 따라 옵션 설정 값은 다를 수 있습니다. 스킨별 특징 옵션들은 각 스킨 설명 글에 별도로 안내가 됩니다.

배포하는 스킨들은 스킨편집기에서 스킨 옵션 설정을 통해 스킨 레이아웃을 다양하게 변경할 수 있습니다.

 스킨에 따라 표시되는 옵션 항목들은 다를 수 있으며, 표시되지 않는 옵션 항목은 해당 스킨에서 사용할 수 없는 옵션입니다.

 스킨 옵션은 그룹 단위로 구분되어  해당 영역, 또는 용도에 따라 나누어져 있으므로 해당 그룹에서 필요한 옵션 항목을 찾으면 됩니다.

* 이미지를 클릭하면 옵션 항목들을 자세히 볼 수 있습니다.

레이아웃

• 사이드바 표시/위치 - 사이드바 없는 1단, 2단 왼쪽 사이드바, 2단 오른쪽 사이드바를 선택할 수 있습니다. 사이드바 없는 1단 레이아웃은 모바일 메뉴 형태로 상단에 메뉴 아이콘과 검색 아이콘이 고정으로 표시됩니다.
• 카테고리 위치 - 카테고리를 가로 탑메뉴, 또는 사이드바에 세로로 배치합니다.
• 커버 배너 위치 - 커버 슬라이드 배너 위치를 컨텐츠 영역, 또는 헤더 영역에 위치시킬 수 있습니다. 헤더 영역에 위치시킬 경우 좌우 영역을 모두 채우는 풀페이지 배너로 표시됩니다.
• 컨텐츠, 사이드바 영역 테두리 여백주기(20px) - 컨텐츠 영역과 사이드바 영역의 내용과 테두리 사이에 20px의 여백을 줍니다. 배경 이미지를 사용할 경우 내용이 영역을 모두 차지하기 때문에 보기 않좋아지는 경우를 위한 기능입니다.

공통/페이지

• 기본 글꼴 - 블로그에 사용할 글꼴을 선택합니다. 노토산스KR(돋움/고딕), 노토셰리프KR(바탕/명조), 나눔고딕(네이버), 나눔명조(네이버) 중 한가지를 선택할 수 있습니다. 전체 블로그에 적용됩니다.
• 스킨 배경 이미지 사용-body-bg.jpg - 블로그 전체 배경 이미지를 사용합니다. 배경 이미지는 화면 스크롤과 무관하게 고정으로 표시됩니다. 기본 배경 이미지 파일은 body-bg.jpg 입니다.
• 배경 이미지 파일명을 변경하려면 style.css 57행의 파일명을 변경하면 됩니다.
• 스킨 배경색 선택 - 컬러테이블에서 블로그 전체 배경색을 지정합니다.
• 하이라이트/테마 컬러 - 마우스 오버, 검색버튼 등 스킨에 사용되는 포인트 컬러 색상을 지정합니다.
• 짧은 날짜 사용(년월일) - "2019-07-01" 과 같이 짧은 날짜 포맷을 사용합니다. 블로그 전역으로 적용됩니다.
• 탑 스크롤 버튼 사용 - 화면 스크롤시 블로그 오른쪽 하단 끝에 화살표 아이콘이 표시되며, 클릭하면 블로그 최상단으로 자동으로 애니메이션 스크롤됩니다.
• 페이지 리스트, 탑스크롤 둥근모서리 - 페이지 이동 링크, 탑스크롤 아이콘의 테두리를 둥글게 표시합니다.

헤더

• 좁은 헤더 높이 사용 - 헤더 영역 높이를 160px 로 작게합니다. 카테고리를 탑메뉴로 표시할 경우 44px가 더해져 204px가 됩니다.
  
  
• 헤더 배경 이미지 사용-header-bg.jpg - 헤더 영역에 배경 이미지를 표시합니다. 커버 슬라이드를 헤더에 표시할 경우 블로그 메인 페이지에서는 배경 이미지가 보이지 않으며, 나머지 블로그 페이지에서는 표시됩니다.
  
  헤더 이미지를 사용하지 않을 경우 헤더 영역은 블로그 배경색, 또는 블로그 전체 배경 이미지로 빈 영역으로 남게됩니다.
  
  
• 전체 너비 헤더 - 헤더 영역을 풀페이지로 좌우를 채워서 표시합니다. 풀페이지 헤더가 아닐 경우 건텐츠 영역 좌우 너비 만큼만 헤더 영역이 표시되고 나머지는 여백으로 채워집니다.
  
  
• 블로그 타이틀 색상 선택 - 블로그 타이틀 텍스트 색상을 지정합니다.
  
  
• 타이틀 대체 이미지 - 블로그 타이틀을 대체하는 이미지를 업로드 합니다. 업로드된 이미지는 블로그 타이틀 텍스트를 대체해서 표시됩니다.
  
  
• 검색 입력 펼침 - 검색바를 펼쳐서 표시합니다. 사이드바가 없는 1단 레이아웃을 사용할 경우에만 옵션이 적용됩니다. 검색 입력 펼침을 사용하게 되면 오른쪽 상단 끝에 표시되는 검색 아이콘을 대신해서 검색바가 펼쳐져 검색 입력 필드가 표시되는 상태로 고정됩니다.
  
  
• 헤더 오버레이 표시 - 헤더 영역에 오버레이 이미지를 표시합니다. 오버레이 이미지가 있는 스킨에만 적용되며, 오버레이 이미지가 없을 경우 오버레이 이미지는 표시되지 않습니다.
  
  헤더 영역이 본문 영역과 자연스럽게 연결하거나 효과를 주기 위한 용도로 사용되는 특별한 이미지이며, 오버레이 이미지를 대체할 경우 원본과 크기가 달라지면 오버레이 이미지 배치가 깨질 수 있으므로, 이 경우 CSS 수정까지 함께 해야 합니다.

사이드바

• 사이드바 최근글, 인기글 썸네일 표시 - 사이드바 최근글, 인기글 왼쪽에 썸네일 이미지를 표시해줍니다. 이미지 로딩량이 늘어나기 때문에 가볍게 글을 포스팅하는 블로그에서는 추천하지 않습니다.
• 프로필 표시 - 사이드바 프로필 영역을 표시합니다.
• 프로필 이미지 크기 - 프로필 아이콘 크기를 선택합니다. 작게, 중간크기, 크게 3가지를 선택할 수 있으며, 작게는 원형, 중간크기는 둥근사각, 크게는 사각형으로 프로필 크기에 따라 테두리 모양이 달라집니다.
• SNS 아이콘 보기 - SNS 아이콘 영역을 표시합니다. SNS URL 입력이 되어 있어서 아이콘 보기를 켜지 않으면 SNS 아이콘 영역이 표시되지 않습니다.
• 새창(탭)에 SNS 링크 열기 - 기본 설정은 SNS 아이콘 클릭시 현재 창에 SNS 링크 URL이 표시됩니다. 옵션을 켜면 새탭, 또는 새창에 SNS URL 링크가 표시됩니다.
• SNS 아이콘은 총 5가지가 지원됩니다.
  • Pinterest URL
  • Facebook URL
  • Twitter URL
  • Instagram URL
  • Youtube URL

커버

• 커버 슬라이더 타입 선택 - 커버 슬라이더 애니메이션 타입을 선택합니다. 슬라이드 방식으로 좌우, 페이드인아웃 방식으로 좌우 를 선택할 수 있습니다.
• 커버슬라이드 교체 시간(초) - 커버 슬라이드가 교체되는 주기를 초단위로 입력합니다. 소숫점 이하 자릿수도 사용 가능합니다. 0을 입력하면 슬라이드가 변경되지 않고 첫번째 슬라이드에서 멈춰 있게 됩니다.
• 커버 슬라이더 이미지 어둡게(글자가 잘보이게 함) : 커버 슬라이드 이미지 앞에 반투명 검정색 필터를 적용해 이미지가 약간 어둡게 보이도록 합니다. 슬라이드 제목이나 블로그 타이틀 등을 밝은색(흰색) 으로 했을 때 글자가 잘 보이도록 해주는 효과가 있습니다.
• 썸네일 리스트 더보기 버튼으로 썸네일 링크 - 썸네일 리스트 링크를 별도의 "더보기" 버튼으로 표시할지, 아니면 썸네일 이미지와 제목을 클릭할 수 있게 할지를 선택합니다.
• 썸네일 리스트 내용 미리보기 표시 - 썸네일 리스트의 내용 미리보기를 표시할지를 선택합니다. 이미지 배너 형태로 심플하게 썸네일 리스트를 표시할 경우 이 옵션을 끄면 됩니다.

글목록

• 글목록타입 - 글 목록을 가로로 긴 리스트 타입으로 표시할지, 썸네일 리스트 형태로 표시할지를 선택합니다.
• 썸네일 리스트 형태로 표시할 경우 한줄에 표시되는 글 갯수는 데스크탑 모드에서는 3개, 타블렛 모드에서는 2개, 모바일에서는 1개입니다.
• 페이징 타입 - 글목록 페이지를 이동하는 방식을 선택합니다. 현재 페이지 하단에 다음 페이지 목록을 덧붙이는 "더보기", 이전/다음 페이지 링크만 표시하는 "이전/다음", 페이지 숫자 목록을 표시하는 "페이지목록" 중 한가지를 선택할 수 있습니다.
• 공통/페이지-페이지 리스트, 탑스크롤 둥근모서리 항목에서 테두리를 사각형, 또는 원형으로 선택할 수 있습니다.
• 글 미리보기 내용 출력 - 글 미리보기 내용을 출력합니다. 출력 줄수는 4줄입니다.
• 글 목록 날짜 출력 - 글 목록의 날짜를 표시합니다. 날짜 표시 포맷은 공통/페이지-짧은 날짜 사용(년월일 - 2017-07-01) 을 끄면 시분초까지 표시(2019)되며, 켜면 년월일까지만 표시됩니다.
• 썸네일 이미지 빈 영역 자리 차지 - 썸네일 이미지가 없을 경우 이미지 영역 크기만큼 빈공간으로 남겨두고 이미지 없음 아이콘을 표시합니다. 옵션을 끄면 이미지 영역이 완전히 사라져 자리 차지를 하지 않으며, 글 제목과, 글 내용 미리보기만 표시됩니다.

글내용

• 글보기 검정색 글자색상 강제 적용 - 글 내용 영역의 글만 강제로 검정색으로 글자색상을 지정합니다. 글 내용을 돋보이게 하길 원하는 경우 사용할 수 있습니다.

푸터

• 푸터 이미지 표시 - 푸터 영역에 업로드한 푸터 이미지를 표시합니다. 이미지는 가운데 정렬되며, 표시 순서는 푸터 이미지-푸터 텍스트, 블로그 메뉴 입니다.
• 푸터 텍스트 표시 - 입력한 내용을 푸터 영역에 표시합니다. 푸터 이미지가 있을 경우 푸터 이미지 밑에 가운데 정렬로 표시됩니다. 저작권 표시나, 사이트 관련된 정보등을 표시하는데 사용합니다.
• 블로그 메뉴 표시 - 푸터 영역 블로그 메뉴를 표시합니다.

모바일화면

• 헤더 영역 미사용 - 헤더 영역을 감추고, 블로그 타이틀과 모바일 메뉴 호출 아이콘을 한줄로 표시해 차지하는 공간을 최소로 줄여줍니다.
• 커버 슬라이드 높이 축소(400px->290px) - 커버 슬라이드를 표시할 경우 커버 슬라이드 높이(400px)를 모바일 화면에서는 290px로 줄여줍니다.