11. 스킨 옵션 - 글

스킨 옵션에서 제공하는 글에 관련된 기능이 참 많습니다. 사용자가 자주 쓰는 기능을 CSS 변경 없이 마우스 클릭만으로 사용할 수 있도록 만들었습니다. 여러분이 보고 있는 이 영역이 바로 글에 해당됩니다.

설정하기

글 관련 기능은 '블로그관리 > 꾸미기 > 스킨 편집'의 스킨 옵션을 통해 쉽게 설정 가능합니다. 지원하는 기능은 줄바꿈, 양쪽 정렬, 이전다음글, 이미지 맵, 와이드 이미지, 사진 자막 정렬, 강제 확대 이미지, 그리드 이미지, 반응형 동영상, 저자 정보 그리고 댓글 방식입니다.

줄바꿈

줄바꿈 옵션은 기본과 유지 옵션을 선택할 수 있습니다. 어떤 기준으로 줄바꿈을 결정할지 결정해보세요.

기본본문 어울림에 중점을 두고 줄바꿈이 발생합니다. 즉 글 위주로 줄바꿈이 형성됩니다.
유지단어를 최대한 유지하며 줄바꿈이 발생합니다.

양쪽 정렬

글 내용이 일정하게 유지됩니다. 단, 사용자가 일부 단락에 왼쪽 혹은 오른쪽 정렬을 지정한 경우, 사용자 정의가 우선됩니다.

이전다음글

이전다음글은 티스토리에서 정식으로 지원하는 기능은 아니며 스킨에서 JavaScript의 Ajax 통신으로 제공하는 기능입니다.

텍스트글의 제목이 양쪽으로 배치되어 노출됩니다.
썸네일글에 해당하는 대표이미지가 나타나며 그 위에 제목이 출력됩니다.

이미지 맵

본문에서 사용된 이미지를 한 곳에 모아 볼 수 있는 기능입니다. 이미지 맵에서 이미지를 클릭하면 본문 내 해당 이미지 위치로 이동합니다. 본문에서 이미지를 클릭하면 이미지 맵으로 다시 돌아옵니다.

이미지 맵이 궁금하다면 “이미지 맵에 대해서” 글을 살펴보세요.

와이드 이미지

와이드 이미지는 글 가로 폭을 기준으로 그보다 작은 내용을 입력할 때 효과적입니다. 즉 넓은 글 가로 폭에 그 보다 작은 가로 폭의 이미지를 입력 후 글을 그대로 출력하면 레이아웃이 맞지 않아 애를 먹습니다. 간단한 해결 방법은 글을 중앙 정렬해 보여주는 방식입니다. 그러나 글이 길 경우 임의로 줄 바꿈을 통해 글을 작성해야 하는 어려움이 있습니다. 이럴 경우 와이드 이미지를 설정하면 쉽게 원하는 결과를 얻을 수 있습니다.

큰 이미지를 사용하지 않아도 글 내용이 작아지므로 상대적으로 이미지가 크게 보이는 효과가 있습니다. 주의해야 할 점은 와이드 이미지 기능 사용시 이미지는 강제 중앙 정렬됩니다. 이는 이미지의 크기를 본문보다 강제로 크게 확대하기 때문에 발생하는 현상입니다.

125
126
127
128
129
130
131
<s_if_var_article-effect-wide-image>
<style>
  /* 와이드 이미지 */
  .article-desc { max-width: 728px; margin-left: auto; margin-right: auto }
  .comport { max-width: 728px }
</style>
</s_if_var_article-effect-wide-image>
cs

"블로그관리 > 꾸미기 > 스킨 편집 >html 편집"의 HTML 탭에서 볼 수 있는 와이드 이미지 설정 관련 내용입니다. 와이드 이미지를 설정하면 해당 CSS 정의가 활성화됩니다. 본문 및 본문 외 카테고리 관련 글과 같은 컴포넌트 가로 폭을 재조정합니다.

사진 자막 정렬

글에 첨부된 사진 자막 정렬 옵션입니다. 선택 옵션에 따라 텍스트가 정렬됩니다.

강제 확대 이미지

강제 확대 이미지 적용 전강제 확대 이미지 적용 후

글쓰기에서 이미지를 사용할 경우 이미지에는 너비와 높이에 해당되는 값이 자동으로 입력됩니다. 이때 기준이 되는 너비는 ‘블로그관리 > 콘텐츠 > 설정’에서 글쓰기 가로 폭에 설정한 값입니다. 여러 경우가 있지만 대개 글쓰기 가로 폭이 600px이라면 이미지도 600px의 너비로 설정됩니다. 이런 상태에서 블로그 글 너비를 700px으로 변경할 경우 이미지는 그대로 600px으로 노출됩니다

강제 확대 이미지를 설정하면 600px으로 설정된 이미지가 강제로 700px으로 노출됩니다. 물론, 실제 이미지가 600px이라면 700px으로 강제 확대되기 때문에 이미지 깨짐 현상이 발생합니다. 해당 기능은 첨부된 이미지가 글 가로 폭, 그러니까 700px과 같거나 클 경우에만 사용해야 제대로 작동합니다.

사진을 첨부하는 방법이 궁금하다면 “와이드, 그리드 이미지에 대해서” 글을 살펴보세요.

그리드 이미지

이미지를 정렬할 때 ‘글쓰기 > 파일보관함’ 아래에 있는 ‘선택한 파일을 글의 중앙에 정렬’을 사용하면 해당 기능이 적용됩니다. 가로 사진에서는 큰 효과를 보기 어렵지만, 세로 사진도 함께 정렬된 경우 다양한 배치를 할 수 있습니다. “와이드, 그리드 이미지에 대해서” 글을 살펴보면 좋습니다.

그리드 이미지 효과는 아래와 같은 구조로 되어 있을 경우에만 적용할 수 있습니다. 즉, ‘table > tbody > tr > td  > span.imageblock’와 같이 table 아래 순차적으로 tbody, tr, td 그리고 imageblock 정의를 갖는 span 태그가 존재해야합니다. 그렇지 않은 경우, grid-image 효과는 작동하지 않습니다. 아래 구조는 브라우저에서 소스보기를 통해 확인할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<p style="text-align: center;">
  <table cellspacing="5" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td>
          <span class="imageblock" style="display:inline-block;width:415px;height:auto;max-width:100%">
            <span data-url="https://t1.daumcdn.net/cfile/tistory/226CF43A57391BB524?original" data-lightbox="lightbox">
              <img src="https://t1.daumcdn.net/cfile/tistory/226CF43A57391BB524" style="cursor: pointer;max-width:100%;height:auto" width="415" height="276" filename="hot-air-1373167_1280.jpg" filemime="image/jpeg" />
            </span>
          </span>
        </td>
        <td>
          <span class="imageblock" style="display:inline-block;width:415px;height:auto;max-width:100%">
            <span data-url="https://t1.daumcdn.net/cfile/tistory/211B8C395739380B0A?original" data-lightbox="lightbox">
              <img src="https://t1.daumcdn.net/cfile/tistory/211B8C395739380B0A" style="cursor: pointer;max-width:100%;height:auto" width="415" height="622" filename="muslima-1331992_1280.jpg" filemime="image/jpeg" />
            </span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</p>
cs

반응형 동영상

본문에 삽입된 동영상의 경우 본문 너비에 따라 자동 확대 또는 축소되고 있습니다. 그러나 반응형에 대응하지 못하는 서비스도 있기 때문에 모든 서비스보다 몇몇 서비스만 해당 기능을 지원하고 있습니다. 현재 지원되는 서비스는 유튜브와 비메오 그리고 다음 tv팟입니다.

저자 정보

블로그 설정에서 입력한 대표이미지, 블로그 설명을 출력 그리고 설정한 소셜 링크를 출력합니다. 프로필 이미지 설정이 궁금하다면 티스토리 공지사항에서 소개하는 "[업데이트] 프로필 이미지 설정 안내"를 살펴보세요.

댓글 방식

기본적으로 티스토리에서 제공하는 댓글을 선택할 수 있습니다. 만약 제3자가 제공하는 디스커스나 라이브리 댓글을 원할 경우 선택한 댓글 방식에 해당하는 설정후 이용할 수 있습니다. 물론, 해당 댓글 방식을 이용하려면 각 서비스에 가입이 필요할지 모릅니다.

댓글 방식 - 디스커스 - 서비스 단축명

본인이 개설한 디스커스 서비스 단축명(shortname)을 입력 후 댓글 방식을 디스커스로 설정하면 페이지 아래에 디스커스 소셜 댓글이 출력됩니다. 디스커스의 page.url과 page.identifier 값은 글의 캐노니컬(canonical) 값으로 설정됩니다.

댓글 방식 - 라이브리 - 서비스 아이디

본인이 개설한 라이브리 서비스 아이디(uid)를 입력 후 댓글 방식을 라이브리로 설정하면 페이지 아래에 라이브리 소셜 댓글이 출력됩니다. 라이브리의 refer 값은 글의 캐노니컬(canonical) 값으로 설정됩니다.

글이 정의된 곳

100
101
102
103
104
105
106
107
108
<s_not_var_first-sidebar-use>
<style>
  /* 원 페이지 모드 너비 */
  .pagetitle-wrapper .maxlimit { max-width: 837px; margin-left: auto; margin-right: auto }
  #tt-body-page .holder, #tt-body-guestbook .holder { max-width: 837px }
  .article-desc { max-width: 837px; margin-left: auto; margin-right: auto }
  .comport { max-width: 837px }
</style>
</s_not_var_first-sidebar-use>
cs

탕비수다 이마고 스킨은 기본적으로 원 페이지 모드로 제공됩니다. 여기서 원 페이지와 글은 같은 개념으로 사용하고 있습니다. 사이드바1를 사용하지 않는다면 해당 정의가 적용되어 글 가로 폭이 적용됩니다.

이미지 맵

롤랑존

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

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

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

    *

    *