[티스토리 팁] 문단제목을 클래스로 지정하여 한꺼번에 관리하기

2011. 09. 30에 추가한 내용.
여러번 테스트 해 본 결과 RSS와 모바일 접속시 CSS출력이 안되는 단점 때문에 부제목 대신 다른 곳에 활용하기로 했다. 이 점 아래 내용을 적용시에 참고 바란다.

예전부터 문단제목이 눈에 잘 띄지 않는 듯하여 손을 보려고 했으나 시간이 없어 하지 못했는데 스킨을 바꾸면서 짬을 내어 수정해 보기로 했다. 그렇게 작업하다 생긴 질문이.... "문단 제목을 언제 다 바꾸지?"였다.

현재 공개로 되어 있는 글이 약 430개 정도인데 그 글을 다 수정하는 것도 문제였지만 나중에 다시 바꾸게 될 것을 생각하니 머리가 아팠다.

그래서 생각한 것이 style에서 class로 지정하는 방법이다. (예전에는 이걸 왜 생각 못했지;;;) 여러 블로거들의 블로그를 참조하여 가장 눈에 잘 띄는 문단 제목 형식을 따왔는데 다음과 같은 모양이다.

중요한 것은 Style로 지정함에 따라 혹시 나중에 제목 형식을 바꿀 일이 생기게 되더라도 간편하게 Style에서 수정하면 블로그의 문단제목이 한꺼번에 바뀌게 된다는 것이다.

오늘은 이 방법에 대해 간단히 설명해보기로 한다. 요즘에는 블로그질이 힘들지만 나중에 나도 까먹을까봐(;;;) 정리해서 올려본다. 부디 초보 블로거 혹은 티스토리 입문자들에게 도움이 되기를 바라는 바이다. 더불어 아래 방법은 다양하게 응용될 수 있을것으로 생각된다. (문단 제목 말고도) 응용 및 수정은 이 글을 보는 분들의 재량에 맡기기로 하고 설명에 들어가보자.

1. 서식 만들기
우선 해야할 일은 문단 제목의 모양을 만드는 일이다. 필자와 같이 만들고 싶다면 다음과 같은 코드를 서식으로 지정해주기를 바란다. 서식을 만드는 방법은 아주 간단한데 글쓰기에서 위쪽에 서식을 눌러준후 작성하면 된다.

제목 서식이라는 이름으로 서식을 만들었는데 내용은 아주 간단하다. 이렇게 간단한 이유는 스타일을 따로 분리하여 지정했기 때문이다. 코드는 따로 첨부파일로 만들어 두었으니 클릭하여 사용하시길... (서식 지정은 반드시 Html모드로 들어가서 해야한다.)

서식.txt

위에서 보면 class의 이름은 아무렇게나 해도 상관이 없다. 다만 중요한 것은 위 클래스의 이름과 아래서 지정할 Style.css의 클래스 이름이 같아야 한다는 것이다. (다르면 그냥 본문처럼 출력된다.) 또한 중요한 것은 이 클래스 이름은 한번 지정한 후에 절대 바꾸는 일이 없어야 한다는 것이다. 이는 마지막 주의사항에서 따로 설명한다.

Html모드를 빠져나오면 다음과 같이 보인다.

글쓰기 창 내에서는 Style이 지정되지 않기 때문인다. 실제로 글을 작성할때도 아래와 같은 화면이 나온다. 이 부분도 아래에서 따로 설명한다.

저장하고 글목록의 서식으로 들어가면 다음과 같이 '서식'으로 지정되어 있는 것을 볼 수 있다. 서식으로 만드는 이유는 위에도 잠깐 밝혔지만 크게 두가지 이유에서이다. 첫째는 미리 만들어 둔 제목모양을 편하기 불러오기 위함이고 둘째는 앞으로 혹시 있을지 모르는 서식 변경을 한번에 하기 위해서다.

2. Style.css에서 스타일 지정해주기
Style에서 제목을 어떻게 만들 것인지를 지정해 준다. 필자의 모양말고 따로 만들고 싶으신 분들은 style= 부분만 따로 떼어서 CSS코드로 만들어 주셔도 된다. 스킨 - HTML/CSS편집의 메뉴에서 아래 Style.css의 편집창 맨 마지막에 아래 코드를 삽입해주도록 하자.

style.css에_들어갈_내용.txt

처음에는 table로 만들었으나 문단제목의 글자수에 따라 줄내림 현상이 있어 span으로 바꾸었다. 즉, 글자수에 따라 적절히 음영부분의 길이가 늘어난다.

코드 설명

/* 제목 서식 클래스 지정 \*/
/* by yourjune. http://yourjune.tistory.com/55 \*/

.june_sub1 {
border-bottom: #003366 2px solid margin-bottom: 8px
}

.june_sub2 {
padding-bottom: 3px; padding-left: 10px; padding-right: 30px; background: #003366 ; color: #fff; font-size: 16px; font-weight: bold; padding-top: 5px
}

june_sub1은 문단제목의 아래쪽의 밑줄을 위한 div의 class 스타일이다. 및줄의 색깔을 바꾸고 싶으면 색상코드를 바꾸면 된다. 마지막의 margin은 본문과의 간격이다.

june_sub2는 실제로 글이 들어갈 부분의 span class 스타일이다. PADDING은 여백을 뜻하는 것으로 상하좌우 적당히 맞춰주면 된다. Background는 배경(음영)의 색깔이다. Font-Size는 글자 크기를 말하는 것으로 자신의 블로그에 맞게 잘 맞춰주면 된다. Font-weight는 글자를 굵게 할 것인지를 정하는 것인데 필요없다면 지워도 된다.

글쓰기에 적용하는 방법
위 과정을 다 거쳤으면 글쓰기창에서 간편하게 오른쪽의 서식을 불러내는 것으로 사용이 가능하다.

오른쪽의 "제목 서식" 눌러보자. 그럼 다음과 같은 글만 덩그러이 나올것이다.

제목이 들어가는 부분
내용이 들어가는 부분

이는 위에서도 적었듯이 글쓰기 창내에서는 스타일 지정이 안되기 때문이고 실제로는 잘 보인다. 혹시 글쓰기창을 나가서도 잘 보이지 않는다면 클래스 이름이 서로 맞지 않는지 확인해보길 바란다.

잘되는지 확인되었다면 앞으로 서식을 불러내어 문단제목을 지정하면 된다.


주의할 점
이 방법은 한번에 여러글의 본문제목을 지정해준다는 장점이 있지만 약간 불편한 점도 있고 주의할 점도 있다. 알아보자.

1. 제목을 적을때 "제목이 들어가는 부분"을 모두 지우지 말고 제목을 적을 것.

제목이 들어가는 부분
내용이 들어가는 부분

위와 같은 부분에서 "제목이 들어간 부분"을 모두 삭제하게 되면 div나 span의 내용이 삭제되버려서 스타일 지정이 안되는 경우가 있다. 그러므로 제목을 적을때는 위 글의 뒷부분에 적고 앞을 지우는 방식으로 하는 것이 좋다. "제목이 들어간 부분"이 너무 길다면 "제목"정도로 줄여도 좋다. (설명을 위해 길게 적음)

2. 글쓰기 창에서는 안보이는 점 주의
위에서 여러번 밝혔듯이 글쓰기 창안에서는 스타일이 적용된 것을 볼 수 없다. 이를 잘 감안하여 글쓰기를 해야 하고 최종 포스팅 전에 제대로 출력하고 있는지를 확인하길 바란다. (당연한 일이지만)

3. Style지정 주의
위 방법은 style.css에서 스타일을 지정하는 방법을 사용하고 있기 때문에 해당부분의 코드가 삭제되거나 클래스 이름이 바뀌면 그동안 적었던 모든 문단제목이 그냥 본문처럼 보이게 되는 단점을 가지고 있다. 특히나 스킨을 바꾸어 지정하거나 편집할 때 해당 코드를 삭제하거나 클래스 이름을 바꾸지 않도록 주의해야 한다. 추가적으로는 모바일 웹페이지에서는 CSS적용이 안되는 문제가 있다. 이 부분은 조금 더 고민해 봐야겠다.