[티스토리 스킨] #2. 딘치(Dinch)에서 포스트 스타일 설정하기

포스트 스타일

티스토리 스킨 브런치(Brunch)에서 제공하는 포스트 스타일은 총 세가지입니다.

심플 - 이미지없이 제목과 부제목으로 구성된 깔끔한 배치
http://appwriter.tistory.com/107

부분 패럴렉스 - 이미지가 상단에 부분적으로 들어간 스타일
http://appwriter.tistory.com/104

스크린 - 이미지가 화면을 가득메우는 스타일
http://appwriter.tistory.com/105

스타일 적용하기

포스트 스타일을 적용하려면 글을 쓸때 HTML모드를 사용해야 합니다. HTML모드는 글쓰기 에디터에서 오른쪽 상단에 있습니다. 모드 전환 뒤 HTML을 다음과 같이 입력합니다.

HTML모드는 글쓰기 에디터에 오른쪽 상단에서 찾을 수 있다.


<div class="brunch" 
  data-role="layout" data-type="screen" 
  data-image="__URL__" 
  style="display:none;">
  배경이미지
</div>

코드만 봐서는 당연히 뭐가 뭔지 알수가 없습니다. 하나하나씩 설명하도록 하겠습니다.

class="brunch"

브런치 스킨에서 제공하는 레이아웃을 적용하도록 하기 위함입니다. 해당 클래스가 없으면 레이아웃이 적용되지 않습니다.

data-role="layout"

해당 HTML코드가 레이아웃을 설정하기 위한것이라고 알립니다. 여기서 어떤 레이아웃을 정할 것인지는 바로 다음에서 정합니다.

data-type="screen"

포스트 스타일을 스크린모드로 진행하겠다는 이야기입니다. 각각 레이아웃별로 키워드가 있는데 적용하고 싶은 스타일에 따라 다르게 입력해야 합니다. 심플모드는 simple, 부분 패럴렉스는 parallax, 스크린모드는 screen입니다.

data-image="__URL__"

적용하고 싶은 이미지의 주소를 __URL__ 란에 넣어야합니다. 

style="display:none;"

해당 태그를 보이지 않도록 지정하겠다는 이야기입니다. 기본적으로 설정관련 태그는 안보이도록 지정되어있는데 별도로 다시 지정하는 이유는, 나중에 스킨을 바꾸게 될 때 Brunch 클래스가 안보이도록 적용되어 있지 않은경우, 글에 그대로 남게됩니다. 따라서 만약의 경우를 대비해 미리미리 스타일을 지정해두는 것이 좋습니다.

data-height="__NUMBER__"

패럴렉스모드에 한해 높이를 제공합니다. 부분 이미지의 높이를 조절할 수 있으며 __NUMBER__ 부분에 420, 320 과 같은 임의의 값을 입력하시기 바랍니다.


magazine티스토리 스킨
앱작가
전생했더니 개발자였던 건에 관하여
신나게 놀고먹고있는 24살 백수 개발자. 티스토리를 위한 티도리 프레임워크(https://tidory.com)를 개발했다.
댓글