친효스킨! 본문 머리글 (소제목) 스타일 변경 방법

친효스킨 커스텀 강좌 입니다. 이번 내용은 본문의 소제목으로서 역할을 하는 머리글에 대해서 수정하는 내용 입니다. 친효스킨에는 최대한 사용자가 수정을 용이하게 할 수 있도록 주석을 꼼꼼히 입력했습니다. 따라서 해당 내용에 대해서 대략적으로 검색하면 금방 찾을 수 있을 겁니다. "본문 소제목" 이라고 CSS에서 검색하시면 아래의 부분을 찾을 수 있습니다.

 

친효스킨 선택자

/* 본문 소제목 */
#contents .article h1,
#contents .article h2,
#contents .article h3,
#contents .article h4,
#contents .article h5,
#contents .article h6 {
    padding: 2px 5px 4px;
    margin: 20px 0;
    border-bottom: 3px solid #555;
    border-left: 15px solid #555;
    color: #555;
    line-height: 1.2;
}

#contents .article h1 {
    font-size: 1.5em;
}

#contents .article h2 {
    font-size: 1.3em;
}

#contents .article h3 {
    font-size: 1.1em;
}

#contents .article h4 {
    font-size: 0.9em;
}

#contents .article h5 {
    font-size: 0.7em;
}

#contents .article h6 {
    font-size: 0.5em;
}

이 부분 입니다. 만약 본문의 소제목을 구성하는 선 부분을 지우거나 변경하고 싶으시면 border 관련된 매소드를 수정하시면 될 겁니다. border-bottom은 아래쪽 선, border-left는 왼쪽 선 입니다. 나열 순서는 두께 / 선 스타일 / 색상 입니다. 나머지 매소드에 대해서 다시 한 번 정리해 보겠습니다.

 

padding: 상px 좌/우px 하px; ▶ 공간 늘리기

margin: 상/하px 좌/우px; ▶ 여백 늘리기

border-bottom: 선두께px 선스타일 선색상; ▶ 소제목 왼쪽 선 두께 및 스타일, 컬러 지정

border-reft: 선두께px 선스타일 선색상; ▶ 소제목 아래쪽 선 두께 및 스타일, 컬러 지정

color: 폰트색상; ▶ 소제목 폰트 색상 지정

line-height: 폰트세로크기; ▶ 소제목 폰트 세로 크기 지정 (폰트는 그대로고 위, 아래 여백이 늘어나게 됨)

font-size: 폰트크기; ▶ 소제목 폰트 크기 지정 (em 대신 px도 가능)

 

그리고 #contents .article h1 부터 마크업 되어 있는 것은 바로 각 h태그의 폰트 크기를 정의합니다. 단위는 보시는 것 처럼 em을 사용합니다. h5와 h6는 글쓰기 에디터에서 지원하지는 않지만 수동으로 입력하시는 분들이 계실수도 있어서 세팅해 두었습니다. h1이 가장 큰 폰트 크기 입니다.

 

타스킨 선택자

친효스킨 외의 타스킨 경우는 CSS 선택자만 변경하시면 됩니다. 선택자라 함은 #contents .article h숫자 이 부분입니다. 선택자는 스킨마다 HTML 구조가 다르기에 만약 소제목 스타일을 현재 사용중인 스킨에 적용을 원하시면 댓글로 문의주시기 바랍니다. 모든 스킨에 대한 HTML 구조를 확인할 수 없기 때문입니다. 끝.