소제목만들기, 티스토리에서 멋있게 - jquery와 CSS사용

내가 이 블로그에 소제목을 어떻게 했는가에 질문을 받아 설명하려고 한다. CSS와 jquery를 사용하므로 어려울 것 같아 설명하지 않으려 했으나 물어보는 사람이 있어서 설명해야 할 것 같아 적는다. 아래와 같은 것을 하는 법을 알아야 하는데 티스토리를 해 본  사람은 에디터에 있기 때문에 알 것이다. 단 모서리를 둥글게 한 것과 그림자를 하는 것은 없다. 각진 모서리를 둥글게 한 것은 jquery와 CSS3를 사용했고, 글상자에 그림자가 생기게 한 것은 CSS3를 사용해서 어렵다. 그리고 그림자는 익스플로러(IE) 6,7,8,9에서는 안 보인다. IE는 골치아파.....

자유롭게 수정하여 사용하실 수 있습니다. 단, 제작자 표기는 유지하셔야 하며, 수정한 스킨의 재배포 시에는 원 제작자에게 알려주셔야 합니다. 이 스킨은 용의자(http://yongja.tistory.com)님의 Plain 스킨을 수정하여 만든 스킨입니다.

위 둥근 것과 그림자를 뺀 글상자를 만드는데 어렵게 jquery,CSS를 이용하는 것이 아니라 티스토리 에디터의 아래 그림에서 볼 수 있는 글상자를 이용해서 간단하다. 내가 네이버 블로그를 하다가 티스토리로 이사왔을 때  티스토리 에디터에 글상자가 있어 상당히 편했다. 글상자의 소스를 본 사람은 알겠지만 table(테이블) 태그를 이용하지 않고 div 태그를 이용했다. 나는 코딩할 때 table(테이블) 태그를 이용하지 않고 div로 한다. 예로 이 페이지에 있는 애드센스도 div를 이용했다.

 - 무료로 팩스 10장보내기 :엔팩스 - 

이제 본격적으로 어떻게 하는지 설명하는데 미리보기는 바로 아래처럼 하는 것에 대한 설명이다. 이것은 티스토리에서 글상자를 이용하지 않았다면 어려울 것이고, 글상자를 자주 사용한다면 쉬울 것이다.

소제목 적기 

먼저 글의 소제목을 적는다. 특별한 것이 없고 그냥 소제목이 될 글을 적습니다. 글자 크기,글자색 등을 지정하는 것이 아니다. 나는 편집할 때 글자크기와 글자색을 지정한다.

소제목이 속한 줄 선택

아래 그림처럼 소제목앞에서 마우스를 누른 상태에서 소제목 마지막까지 드래그를 하여 선택하여 아래 그림처럼 소제목이 있는 줄을 선택한다. 나는 소제목만이 아니라 줄전체를 선택한다. 소제목만 선택해도 될 때가 있다. 나도 자세한 것은 모르고 내가 하는 식이 이렇다는 것이다.

소제목을 글상자에 넣기

그 다음 에디터의 글상자 아이콘을 선택하여 원하는 박스가 되도록 한 후 배경색,테투리 등을 정하여 아래 확인 버튼을 누른다. 위에서 티스토리 에디터에서 글상자 아이콘을 알 것이고, 아래 그림은 가에 옅은 파란색 사각형 박스의 아이콘이다. 아래 그림에서 직접 선택을 한다면 배경색,테두리색,테투리굵기를 직접 설정할 수 있는데 간단 선택을 이용하면 쉽다. 직접선택이든 간단선택이든 원하는 것을 선택한다. 

소제목 꾸미기 - 글자크기,굵기,색상

위 글상자를 설정한 후 보면 아래 그림처럼 글자영역만 선택됩니다. 나머지 할 것은 소제목 꾸미기로 글자 크기/굵기/색상을 지정하면 끝납니다.  나는 위에서 소제목을 굵기를 굵게 하고 크기는 11pt로 색은 짙은 파란색으로 했다.

 - 무료로 팩스 10장보내기 :엔팩스 - 

 

더하고 싶다면 

소제목을 둥글게 한 것은 CSS3와 jQuery를 사용한 것이다. 위에서 설명한 것까지 하는 것에 만족한다면 jqeury와 CSS로 둥글게 하는 것은 알 필요없다. CSS나 jquery를 사용하는 것은 멋있는데 문제는 어렵다는 것을 알았으면 한다. 나는 글상자의 각진 모서리를 jquery와 css로 둥글게 했다. 우선 jquery로 둥글게 했는데 하는 것은 2012/09/09 - 모서리 둥글게,jquery로 둥근 모서리 만들기를 보기 바란다. 참고로 jqurey로 둥글게 한 것은 브라우저에 상관없이 둥글게 보인다. css가 아닌 jquery로 둥글게 해서 익스플로러 6,7,8에서도 둥글게 보인다.  

둥글게 하는 스크립트와 충돌시는 CSS3 이용

jquery로 모서리를 둥글게 하는 스크립트와 다른 스크립트와 충돌이 일어나서 모서리가 둥글게 하는 것이 안 됐을 때는 css3의 둥글게 하는 속성을 지원하는 브라우저에서는 둥글게 되도록 했다. 2012/09/02 - 라이트박스(lightbox) 적용중 - 채은,채윤,채현는 둥글게 하는 jquery가 안 되는데 css3로 둥글게 했다.  그 페이지에서는 익스플로러 6,7,8에서는 둥글게 된 것을 보지 못한다. 익스플로러 9/10,크롬(Chrome),사파리(Safari),파이어폭스(Firefox) 등 css3의 모서리를 둥글게 하는 속성을 지원하는 브라우저는 둥글게 된 것이 보인다. 최근 브라우저는 ㅓuery없이도 css만으로 동굴게 된다고 알기 바란다. 항상 문제는 익스플로러(IE)이다.

단 익스플로러 9에서는 여기에 적용한 CSS를 완벽히 지원하지 않아 그림자가 안 보인다. 아래 그림은 나의 블로그에 설치한 구글 애널리틱스로 본 익스플로러 통계로 7,8 사용자가 많다는 것을 알 수 있다. 나만이 아닌 다른 사람의 통계도 아래와 비슷하다. 우리나라에서 사용자가 많은 익스플로러(IE)....참고로 방문수가 3만명이 넘고 최근 한 달의 통계니 통계의 신뢰도에는 큰 문제가 없을 것 같다. 그리고 브라우저는 익스플로러(internet explorer,ie)이다.

 - 무료로 팩스 10장보내기 :엔팩스 - 

 

또한 스마트폰 브라우저는 모두 CSS의 둥글게 하는 것을 모두 지원하므로 모바일 페이지에 CSS를 적용하여 각진 모서리를 둥글게 했다. 2012/10/29 - 모바일 페이지에 스크립트,CSS적용을 보면 모바일 페이지에서는 티스토리 스킨의 HTML/CSS는 적용이 안 된다.

이 글에 대한 내 생각은 아래와 같다. 익스플로러때문에 많은 조건이 생기고 어려워진다. 우리나라에서는 익스플로러(IE) 7,8 점유율이 높으니 무시하기는 어렵고...외국 사람을 대상으로 한다면 익스플로러 7,8은 가볍게 무시할 수 있는데....

• 익스플로러 6,7,8에서도 글상자의 각진 모서리가 둥글게 하고 싶다면 jquery를 사용해라.jquery로 글상자를 둥글게 하는 것에 대한 링크는 글에 있다. 없다고 한다면 정독을 안 한 것이다.
• 익스플로러 9/10,크롬,사파리,파이어폭스 등과 모바일 브라우저에서 둥글게 보이고 싶다면 CSS를 사용해라. CSS 소스는 http://css3pie.com/에서 배울 수 있고, 그 페이지는 영어 페이지이다.
• 위 두 개를 만족하고 스크립트 충돌로 jquery가 안됐을 때는 내가 하는 식으로 jquery와 CSS를 같이 사용해라