티스토리 소제목1 CSS 스타일 변경 코드 안내 (with 친효스킨)
안녕하세요. 친절한효자손입니다. 모처럼 CSS 부분을 만져봤습니다. 저는 글을 쓸 때 소제목을 적극 이용하는 편입니다. 소제목은 말그대로 글 내에서의 작은 단락에 대한 제목입니다. 기승전결이 필요한 긴 글의 경우 가독성 및 분위기 전환을 알릴 수 있는 간단한 방법이 바로 소제목을 사용하는 것입니다. 이 부분부터는 이러한 주제가 시작된다는것을 알려주는 것입니다.
저는 제목2, 제목3 스타일을 가장 많이 사용합니다. 하지만 좀처럼 제목1은 사용하지 않고 있습니다. 사실 본문 소제목의 깊이가 많아야 2단계로 끝나는 경우가 대부분이기 때문입니다. 만약 3단 깊이의 소제목을 사용하려면 차라리 글을 나누는것이 훨씬 유리할 것입니다. 아무튼 제목1의 기능이 그냥 방치되고 있는 느낌이라 차라리 이것을 잘 살릴 수 있는 방법이 없을까를 고심했고 기존 소제목 스타일과 다른 하나의 스타일을 더 만들면 좋겠다는 결론에 도달했습니다. 최종적으로 완성된 각 소제목별 스타일은 다음과 같습니다.
제목1
제목2
제목3
어떤가요? 각 제목 스타일마다 차이가 분명하게 보이시나요? 개인적으로는 이제 조금 만족스럽습니다. 참고로 위의 스타일은 친효스킨을 기준으로 제작되었습니다. 타스킨에서도 사용 가능하도록 CSS 선택자를 조절했지만 다른 요소의 영향으로 형태가 이상하게 출력될 수 있습니다. 이 점 참고해 주시기 바랍니다.
CSS 세팅
먼저 아래의 첨부파일을 다운로드 받습니다.
받은 텍스트 문서를 열어보시면 다음의 CSS 코드가 들어있을 것입니다.
.article h2 {
position: relative;
padding: 10px 15px;
margin-left: 40px;
color: #fff;
background-color: #555;
z-index: 0;
}
.article h2::before,
.article h2::after {
position: absolute;
display: block;
top: 0;
content: "";
height: 100%;
background-color: #555;
z-index: 1;
}
.article h2::before {
left: -40px;
width: 10px;
}
.article h2::after {
left: -25px;
width: 20px;
}여기에서는 선택자의 경로가 참 중요합니다. .article은 현재 친효스킨에서 사용중인 본문을 감싸는 div 태그의 클래스명입니다. 타스킨의 경우는 어떤 식으로 본문 치환자를 감싸고 있는지 모릅니다. 스킨을 모두 한번씩 써보고 싶지만 그럴 만한 기력도, 관심도 없기 때문에 만약 타스킨 사용자분들 중에서 제목1 스타일을 본문의 모습으로 변경하고 싶으시면 댓글을 남겨주시기 바랍니다. 확인 후 답변 드리겠습니다. 참고로 친효스킨은 이 경로대로 진행하면 됩니다. 코드를 모두 복사 후 티스토리 스킨 편집 > HTML 편집 > CSS 탭에 들어가시어 빈 공간을 확보 후 그대로 붙여넣기 합니다. 그리고 저장합니다.
사용법
무척 간단합니다. CSS 세팅이 끝났으면 이제 티스토리 글쓰기 모드로 들어옵니다. 그리고 글을 신나게 작성합니다. 이제 소제목을 적고 해당 텍스트에 커서를 놓거나 블록을 지정합니다.
「이것은 소제목1 스타일」
위의 텍스트를 예로 들자면 소제목으로 사용할 문장이니 블록 지정 또는 커서를 텍스트에 걸어둡니다. 저는 블록을 지정하는 방식으로 진행하겠습니다.
1번처럼 블록 지정이 완료되었으니 2번의 본문2 메뉴를 누르고 3번의 제목1을 선택하면 끝입니다. 완전 쉽지요? 그러면 결과는 아래처럼 됩니다.
이것은 소제목1 스타일
티스토리 글쓰기 모드에서는 텍스트의 크기가 살짝 커지는것을 확인하실 수 있으며 왼쪽 하단의 미리보기 버튼을 눌러보시면 제대로 적용이 된 소제목 스타일을 만나보실 수 있으실 겁니다.
당부말씀
누군가가 시작을 했는지는 모르겠지만 구글 SEO에 h1 태그가 좋다느니, h2를 써야 한다느니 이런 이야기가 상당히 퍼져있는 상태입니다. 결론부터 말씀드리면 딱히 상관 없습니다. 그렇게 따지면 모든 텍스트를 h태그에 담아내면 검색 확률이 더욱 증가할 것입니다. 구글의 알고리즘은 그렇게 단순하지 않다는 것입니다. 그러니 소제목 스타일을 너무 남발하지 않으셨으면 좋겠습니다. 가독성을 급격히 떨어뜨립니다. 뭐든지 적시적소가 최곱니다. 적당한 위치에 적당히 사용하는것이 베스트라는 뜻입니다. 끝.
