티스토리 스킨 만들기 (초보) - 14강. 트랙백과 댓글

트랙백,댓글 링크

skin.html에서 </s_tag_label>의 아래에 다음 소스를 입력합니다.
이제 style.css 에 아래 내용을 입력합니다. 글씨체와 크기, 색깔 등을 취향에 맞게 수정하세요. :)

트랙백

skin.html 에서 방금 작성한 actionTrail이 끝나는 </div> 아래에 다음 소스를 입력합니다. <s_tb_rep>부터 </s_tb_rep>까지가 리스트가 반복될 부분입니다.

style.css에 아래 내용을 입력합니다. 트랙백주소 복사 버튼은 관리자모드 - 스킨 - 화면출력 설정에서 하실 수 있습니다.

댓글 읽기

먼저 skin.html에서 <s_rp>의 아랫줄에 다음 소스를 입력합니다. [샵샵_rp_rep_class_샵샵] 치환자는 방명록에서와 마찬가지로
일반 글과 비밀글, 관리자가 쓴 글 등의 클래스를 나누어 구분하게 하는 치환자입니다.

위에서 말했듯이 댓글부분은 방명록과 같은 모양으로 만듭니다.

※ 위의 html 소스와 '방명록 읽기'의 html 소스를 비교하시면 치환자만 다른 것을 알 수 있을겁니다.
그리고 유심히 보시면 딱 한 군데 더 다른 부분을 알 수 있을텐데요,
위 소스에서 맨 위에 빨간색으로 표시해 둔 부분입니다.

'댓글 읽기' 부분의 전체를 감싸는 레이어의 class를 comlist로 지정해 준 것입니다.
'방명록 읽기'에서는 class가 아닌 'guestList'라는 id를 주었습니다.

지금까지 열심히 강의를 보셨다면 왜 댓글에서는 class, 방명록에서는 id를 지정했는지 감이 오실 겁니다.
4강에서 설명했듯이 id는 한 문서에 하나 밖에 있을 수 없으며, class는 문서의 여러 군데에 지정할 수 있답니다.
한 페이지에 한 개의 포스트만 나오게끔 한다면 댓글 부분에서도 class가 아닌 id를 사용하면 되지만
그렇지 않은 경우도 많기 때문에 class를 사용한 것입니다. :)

자. 정리하면 '방명록 읽기'와 '댓글 읽기'의 다른 부분은 각각의 치환자와 전체를 감싸는 레이어의 이름입니다.
이 중 style.css에 영향을 미치는 것은 치환자가 아닌 레이어 이름 뿐이지요.

모양은 css에서 결정한다는 것을 아시죠? 방명록과 댓글은 모양이 같으니 css의 속성도 동일합니다.
8강에서 같은 속성을 지닌 선택자는 콤마(,)로 묶을 수 있다는 것을 배우셨습니다.
고로 style.css에서 댓글에 대한 속성을 따로 입력하지 않고, 간단하게 방명록 선택자 옆에 콤마를 붙여 댓글 선택자 이름만 쓰면 된답니다!
기쁘지 않나요? 저는 이럴 때 쾌감을 느낍니다. ㅋㅋㅋㅋㅋ

먼저 천천히 따라해보세요.
style.css에서 아래 내용을 찾아보세요. 방명록에서의 id="guestList" 는 댓글에서 class="comlist" 이죠.
#guestList 를 .comlist 로 바꿔 주면 댓글읽기의 css는 해결이 되는 것입니다.

방명록 선택자 옆에 얌전하게 댓글의 선택자를 입력하면 아래와 같이 됩니다.
방법을 아시겠죠?
이렇게 모두 하나씩 추가하면 아래와 같이 됩니다. .comlist 이하의 부분이 방명록과 다른 곳은 진하게 표시한 부분인데,
티스토리에서 자동으로 생성되는 '글 종류에 따른 클래스' 입니다.
hiddenComment(로그아웃했을 때 비밀글 대신 표시되는 글)는 댓글과 방명록의 클래스가 동일합니다.

댓글 쓰기

skin.html에서 댓글 읽기 부분이 끝나는 </s_rp_container> 아래에 다음 소스를 입력합니다.
style.css에서 #guestWrite를 찾아 그 아랫줄부터 다음과 같이 바꿔줍니다.
댓글도 방명록 처럼 쓰기 부분을 상단에 위치시키고 싶다면 skin.html에서 위치만 바꾸면 됩니다. ^^