이제부터 본격적으로 티에디션으로 첫화면 꾸미기를 해봅시다. 제 블로그 첫페이지 티에디션은 갤러리형으로 되어 있습니다. 리스트형이나 타이틀형은 이미지를 좋아하는 저에게 그렇게 큰 매력을 느끼지 못했습니다. 그래서 리스트형이나 타이틀형을 원하시는 분들은 궂이 이 포스팅을 구독할 필요는 없습니다. 자세한 내용은 여기를 클릭하면 보실 수 있습니다.
· 티에디션도 코딩할 수 있다?
네. 티에디션도 코딩을 할 수 있습니다. 하지만 티에디션 역시 티스토리 블로그처럼 고유 치환자가 있습니다. 즉, 웹퍼블리싱 능력이 갖춰지더라도 티스토리 블로그 치환자 또는 티에디션 치환자를 모르면 티스토리 블로그 스킨을 제작한다는 것은 불가능에 가깝습니다. 제가 직접해보았는데 기본적인 웹퍼블리싱 코딩은 티스토리 치환자의 우선순위에서 밀리기 때문에 팅겨납니다. 쉽게 말해서 '웹퍼블리싱 능력 + 티스토리 치환자'를 완벽히 이해해야한다는 뜻입니다. 하지만 티스토리 스킨 초보자에게 그런 능력을 어느 세월에 키우겠습니까? 웹퍼블리싱도 최소 3개월 이상 걸리는데 말이죠. 이 포스팅을 잘 따라오시면 충분히 구현할 수 있습니다. 큰 틀은 [Ctrl + c], [Ctrl + v]로 끝이나는 것이니까요.
티에디션 티환자
스킨 치환자와 같은 용도로 티에디션에도 다양한 치환자가 존재합니다. 티에디션에서 사용할 수 있는 치환자 목록은 아래와 같습니다. 스킨 치환자처럼 html 소스 안에 입력하여 사용합니다.
: 아이템 id값(서버에서 정하는 값)
: 입력한 아이템 타이틀
: tt-last 클래스로 치환, margin-right: 0;과 동일한 효과
: tt-clear 클래스로 치환, clear: both;와 동일한 효과
/29: 글의 url
[FastBoot]07.티에디션 꾸미기 Vol.1: 글의 제목
: 사용자가 편집한 글의 제목
이제부터 본격적으로 티에디션으로 첫화면 꾸미기를 해봅시다. 제 블로그 첫페이지 티에디션은 갤러리형으로 되어 있습니다. 리스트형이나 타이틀형은 이미지를 좋아하는 저에게 그렇게 큰 매력을 느끼지 못했습니다. 그래서 리스트형이나 타이틀형을 원하시는 분들은 궂이 이 포스팅을 구독할 필요는 없습니다. 자세한 내용은 여기를 클릭하면 보실 수 있습니다.
· 티에디션도 코딩할 수 있다?
네. 티에디션도 코딩을 할 수 있습니다. 하지만 티에디션 역시 티스토리 블로그처럼 고유 치환자가 있습니다. 즉, 웹퍼블리싱 능력이 갖춰지더라도 티스토리 블로그 치환자 또는 티에디션 치환자를 모르면 티스토리 블로그 스킨을 제작한다는 것은 불가능에 가깝습니다. 제가 직접해보았는데 기본적인 웹퍼블리싱 코딩은 티스토리 치환자의 우선순위에서 밀리기 때문에 팅겨납니다. 쉽게 말해서 '웹퍼블리싱 능력 + 티스토리 치환자'를 완벽히 이해해야한다는 뜻입니다. 하지만 티스토리 스킨 초보자에게 그런 능력을 어느 세월에 키우겠습니까? 웹퍼블리싱도 최소 3개월 이상 걸리는데 말이죠. 이 포스팅을 잘 따라오시면 충분히 구현할 수 있습니다. 큰 틀은 [Ctrl + c], [Ctrl + v]로 끝이나는 것이니까요.
티에디션 티환자
스킨 치환자와 같은 용도로 티에디션에도 다양한 치환자가 존재합니다. 티에디션에서 사용할 수 있는 치환자 목록은 아래와 같습니다. 스킨 치환자처럼 html 소스 안에 입력하여 사용합니다.
: 아이템 id값(서버에서 정하는 값)
: 입력한 아이템 타이틀
: tt-last 클래스로 치환, margin-right: 0;과 동일한 효과
: tt-clear 클래스로 치환, clear: both;와 동일한 효과
: 글의 url
: 글의 제목
: 사용자가 편집한 글의 제목
: 글의 내용
: 사용자가 편집한 글의 내용
: 카테고리의 url
: 카테고리 이름
: 글 작성자 이름
: 글이 작성된 날짜
: 글의 댓글 수
: 섬네일을 중앙 정렬하기 위한 margin 값
: 섬네일의 비율
: 섬네일 url의 호스트 부분
: 섬네일 url의 이미지 사이즈 부분
: 섬네일 url의 해시값 부분
자, 일단 티스토리 블로그 티에디션에 들어가보겠습니다.
기본적으로 티에디션이 적용된 티스토리 블로그는 우측 상단에 '티에디션' 버튼이 있습니다. 저번시간에 티에디션을 적용하는 방법을 포스팅 했으니 이 과정은 넘어가겠습니다.
'티에디션' 버튼을 누르면 다음과 같은 화면이 나오는데요. 왼쪽 티에디션 리모콘이 비활성화 되어있죠? 이유는 티에디션을 활성화할 부분이 없어서 그렇습니다. 위 이미지 빨간 테두리 안에 '+'를 눌러주세요.
활성화 된 티에디션이 나타나 보이죠? 중간에 '아이템을 선택하세요.'라는 문구와 함께 말이죠. 자 여기서 중요한 것은 왼쪽 티에디션 리모콘에 '아이템 → 목록형'에 들어가셔서 아무 아이템을 선택하시면 됩니다. 여기서 TIP은 '목록형'입니다.
특히 티에디션 리모콘 상단 메뉴에 '디자인'에서 '글제목'을 보시면 글자수를 조정할 수 있습니다. 이 글자수는 후에 수정이 안되기 때문에 반드시 지금 설정하고 가세요. 저는 50자를 썼습니다.
HTML 버튼을 클릭하면 다음과 같은 화면이 나오는데요. 안에 식별할 수 없는? 코드들이 있습니다. 뭐 사실 웹퍼블리싱 능력이 있다면 대략적으로 해석은 가능합니다. 티에디션 치환자와 번갈아봐야하는 번거로움이 있지만요. 여튼 저희는 HTML 안에 있는 코드들을 모두 삭제해줍니다. 그 다음 위에서 다운받은 'FastBoot 티에디션 HTML 소스.txt' 를 복사해서 붙여넣기만 하면 끝입니다.
그리고 마무리, 티에디션 리모콘에 있는 '적용'을 누르고 티에디션 맨 위 상단 오른쪽 '적용하기'를 누르면 자신의 블로그에 FastBoot 반응형 티에디션이 적용되는 것입니다.
카테고리는 티에디션에서 '글선택'에 클릭하여 자신이 보여주고자 하는 카테고리 또는 특정 글을 선택해주시면 끝입니다. 이로써 티스토리 블로그 FastBoot 티에디션 반응형 첫화면 꾸미기 Vol.1을 마치도록 하겠습니다. 가능하다면 카테고리 색상과 글자 크기를 조정하는 방법도 포스팅하겠습니다. 이렇게 되면 복잡한 HTML과 CSS를 겪어야하니 저도 마음의 준비를 하고 포스팅하겠습니다. 감사합니다:)
HTML 버튼을 클릭하면 다음과 같은 화면이 나오는데요. 안에 식별할 수 없는? 코드들이 있습니다. 뭐 사실 웹퍼블리싱 능력이 있다면 대략적으로 해석은 가능합니다. 티에디션 치환자와 번갈아봐야하는 번거로움이 있지만요. 여튼 저희는 HTML 안에 있는 코드들을 모두 삭제해줍니다. 그 다음 위에서 다운받은 'FastBoot 티에디션 HTML 소스.txt' 를 복사해서 붙여넣기만 하면 끝입니다.
그리고 마무리, 티에디션 리모콘에 있는 '적용'을 누르고 티에디션 맨 위 상단 오른쪽 '적용하기'를 누르면 자신의 블로그에 FastBoot 반응형 티에디션이 적용되는 것입니다.
카테고리는 티에디션에서 '글선택'에 클릭하여 자신이 보여주고자 하는 카테고리 또는 특정 글을 선택해주시면 끝입니다. 이로써 티스토리 블로그 FastBoot 티에디션 반응형 첫화면 꾸미기 Vol.1을 마치도록 하겠습니다. 가능하다면 카테고리 색상과 글자 크기를 조정하는 방법도 포스팅하겠습니다. 이렇게 되면 복잡한 HTML과 CSS를 겪어야하니 저도 마음의 준비를 하고 포스팅하겠습니다. 감사합니다:)
FastBoot 티에디션 HTML 소스.txt' 를 복사해서 붙여넣기만 하면 끝입니다. 
