친절한효자손 취미생활

친효스킨 커스텀 강좌 입니다. 이번 내용은 본문의 소제목으로서 역할을 하는 머리글에 대해서 수정하는 내용 입니다. 친효스킨에는 최대한 사용자가 수정을 용이하게 할 수 있도록 주석을 꼼꼼히 입력했습니다. 따라서 해당 내용에 대해서 대략적으로 검색하면 금방 찾을 수 있을 겁니다. "본문 소제목" 이라고 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이 가장 큰 폰트 크기 입니다. 끝.

 

 

 

당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. 안녕하세요 효자손님~!
    질문이 하나 있습니다!
    썸네일로 설정하신 이미지가 본문에서는 안보이는데 혹시 썸네일을 숨기는 방법에 대해서도 알려주실 수 있으신가요?
    2020.05.27 09:17 신고
    • 안녕하세요, https://rgy0409.tistory.com/2628 이 글을 참고하시면 됩니다.
      2020.05.27 13:36 신고
  2. 글 확인하였는데 친효님께서는 현재 구에디터로 글을 작성하시나요?
    구 에디터로 오른쪽 메뉴에 파일첨부 기능을 이용하신다는 말씀이시죠?
    2020.05.27 17:52 신고
    • 네. 구형은 오른쪽에서, 신형은 글 완료 시 나오는 썸네일 창에서 편집하면 됩니다.
      2020.05.27 18:08 신고
  3. 어디서 본게있었는데
    신규 에디터에서 작성후 편집은 검색결과에 반영이 안된다는 글이 있었는데요.
    친효님께서 말씀해주시는걸 보면 꼭 그런것만도 아닌가보네요. 답변 감사드립니다.
    2020.05.27 18:26 신고