9. 스킨 옵션 - 메인

메인은 크게 두 가지 기능으로 구분됩니다. 사용자가 선택한 글들을 보여주는 커버 기능과 최근 글들을 보여주는 기본 기능이 있습니다. 커버 기능은 다른 글에서 소개하려고 합니다. 이 글은 흔히 우리가 알고 있는 기본적인 메인에서 제공하는 기능을 소개합니다.

설정하기

메인 관련 기능은 '블로그관리 > 꾸미기 > 스킨 편집'의 스킨 옵션을 통해 쉽게 설정 가능합니다. 지원하는 기능은 썸네일 비율, 배치 방식, 캡션 정렬, 배치 확장, 페이징 방식, 타일 그리드, 공지사항 슬라이더입니다.

썸네일 비율

화면비율은 영상물의 표준 출력 비율을 말합니다. 꽤 많은 화면비율이 있지만, 스킨에서 제공하는 화면비율은 다섯 가지입니다.

원본이미지 비율을 변경없이 나타냅니다.
3:235mm 필름이나 DSLR 사진기가 해당 비율을 지원합니다.
4:3아날로그 화면비율입니다. 와이드 영상이 대세를 이루기 전 주로 사용된 화면비율입니다.
16:9와이드 화면비율입니다. 현재 모니터 및 TV 기본 화면비율입니다.
1:1중형 필름 카메라에서 사용한 화면비율입니다.

배치 방식

배치 방식은 인덱스 페이지와 연관이 있습니다. 인덱스 페이지는 흔히 메인 화면이나 검색 결과가 나타나는 곳입니다. 다채로운 효과를 위해 탕비수다 이마고 스킨은 인덱스 페이지 및 글에서 Masonry 자바스크립트 그리드 레이아웃 라이브러리를 사용하고 있습니다. 인덱스 페이지에는 네 가지 배치 방식을 설정할 수 있습니다.

이미지이미지가 텍스트보다 앞으로 배치되는 방식입니다. 마우스를 올리면 텍스트가 나타납니다.
텍스트이미지 위에 텍스트가 배치되는 방식입니다. 마우스를 올리면 텍스트 정보가 사라지고 이미지가 선명하게 나타납니다.
이미지와 텍스트이미지 아래에 텍스트가 배치되는 방식입니다. 위 두 방식과는 달리 설명 글도 함께 나타납니다.
박스박스 형식으로 배치되는 방식으로 제목, 이미지, 설명 글 순으로 나타납니다.

캡션 정렬

인덱스 페이지 배치 방식이 텍스트 우선 배치 방식(font-text)일 때 캡션 정렬을 통해 캡션 위치를 변경할 수 있습니다.

중앙캡션이 중앙에 위치하며 텍스트는 가운데 정렬 방식입니다.
아래캡션이 하단에 위치하며 텍스트는 왼쪽 정렬 방식입니다.

배치 확장

기본 배치

확장 배치

기본적으로 인덱스 페이지의 한 행에 배치되는 수는 세 개입니다. 배치 확장을 설정하면 기본 배치 수에 한 개 더 추가되어 출력됩니다.

페이징 방식

결과를 불러오는 방식 가운데 대표적인 것은 페이징 방식입니다. 그외 스크롤 또는 버튼을 통해 결과를 불러오는 방식을 변경할 수 있습니다.

버튼더보기 버튼을 통해 다음 결과를 불러옵니다.
스크롤마우스 스크롤을 통해 다음 결과를 불러옵니다.
페이징페이징으로 다음 결과를 불러옵니다.

타일 그리드

이미지 우선 타일 그리드텍스트 우선 타일 그리드

타일 그리드를 설정하면 기존 인덱스 페이지 배치 방식과 다른 모습을 볼 수 있습니다. 해당 기능을 올바르게 사용하기 위해서 화면출력 수를 조정할 필요가 있습니다. ‘관리센터 > 꾸미기 > 스킨 편집 > 기본 설정’에서 홈 화면 글수와 글 목록 글수를 8개로 변경해야합니다.

타일 그리드는 인덱스 페이지 설정을 상속합니다. 다만, 모든 항목을 상속하지는 않으며 배치 방식 가운데 이미지와 텍스트, 캡션 정렬 설정을 유지합니다. 따라서 타일 그리드를 선택하고 텍스트를 우선적으로 보여주고 싶다면, 배치 방식 가운데 텍스트를 설정하면 원하는 결과를 얻을 수 있습니다.

공지사항 슬라이더

텍스트 타입의 공지사항 슬라이더입니다. 공지사항 슬라이더를 활성화하면 메뉴와 페이지 타이틀 영역 사이에 공지사항에 목록이 슬라이더 형식으로 노출됩니다. 해당 기능은 단독으로 작동하지 않으며 첫 번째 사이드바와 두 번째 사이드바에 배치한 공지사항 위젯과 관련이 있습니다. 해당 기능을 사용하기 위해서는 반드시 두 개의 사이드바 가운데 적어도 한 개의 사이드바에 공지사항 위젯을 배치해야합니다. 다만, 사이드바 공개 여부와는 상관없이 작동합니다. 즉, 첫 번째 사이드바에 공지사항 위젯을 배치한 상태에서 첫 번째 사이드바를 사용하지 않더라도 공지사항 슬라이더는 작동이 가능합니다.

이미지 맵

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    '설명서' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 6개 입니다.

    *

    *