미넴 스킨에서 h2 h3 h4 밑줄과 색상 CSS HTML 수정 편집 하기

미넴 스킨에서 h2 h3 h4 밑줄과 색상 CSS HTML 수정 편집 하기

최근 이용 중인 미넴 스킨은 이미지 alt 자동 작성, TOC 자동 작성 등 원하는 다양한 기능이 포함되어있는 무료 티스토리 스킨입니다. 업데이트도 빠르고 피드백도 빠르기 때문에 무료 스킨임에도 유료 스킨처럼 만족도가 높은데요. 미넴스킨 2.5.8 버전의 본문의 제목 태그인 h2, h3, h4 디자인을 변경해보고 싶었습니다.

👉미넴 스킨 2.5.8 버전 다운받는 곳 바로가기

미넴 스킨 h2, h3, h4 수정 편집할 곳 위치 찾기와 변경

보통 스타일을 변경하려면 css를 수정하는 것이 일반적입니다. 그러나 티스토리 편집창의 css를 여기 저기 찾아봐도 h2, h3, h4 부분을 css 찾을 수 없었습니다.

html에서 h2, h3, h4 수정 편집할 곳을 찾을 수 있었습니다. html에서 별도로 속성을 지정하고 있었습니다.

티스토리 스킨 편집에서 [html]을 선택한다

.content-article h2을 html에서 검색합니다. 원본 html 기준으로 약 413줄 즈음에 있습니다.

원본 (수정 전)

.content-article h2 {border-left: ff 16px solid !important;border-bottom: 4px solid ff !important;}
.content-article h3 {border-left: cc 12px solid !important;border-bottom: 3px solid cc !important;}
.content-article h4 {border-left: 88 8px solid !important;border-bottom: 2px solid 88 !important;}

위와 같은 곳을 찾으실 수 있는데요.

본문에 해당하는 .content-article h2 /.content-article h3 / .content-article h4에서 h2, h3, h4의 속성을 {} 안에 지정하고 있습니다.

h2 h3 h4 옆줄과 밑줄 변경하기

▲ h2 h3 h4 옆줄과 밑줄

border-left	왼쪽 외곽선
border-bottom	아래 외곽선

여기서 h2는 티스토리 에디터에서 제목1에 해당하며 h3은 제목2, h4는 제목3입니다.

h2 기준으로 border-left 옆에 다음과 같이 나열되어있습니다. border-left의 속성 값입니다.

border-left: ff 16px solid !important;

ff	선의 색, 색상코드
16px	선의 두께
solid	border-style (선의 형태)
!important;	최우선 적용

여기서 옆의 선을 아예 없애고 싶다면, border-left: ff 16px solid !important; 이 부분을 아예 삭제하시면 됩니다. 색상만 바꾸고 싶다면 색상 코드 부분을 수정하시면 되고, 두께를 수정하고 싶다면 16px의 수치를 변경하면 됩니다. 선의 형태를 변경하고 싶다면 solid를 수정하시면 됩니다.

그 외 요소 색 = ##_var_etc-color_##

ff 이 부분은 스킨 편집 페이지에서 그 외 요소 색상 값을 선택할 때마다 반영하여 변경되는 부분이기 때문에 이 곳을 수정하여 색상코드를 작성하면 추후에 그 외 요소 색 변경시 반영되지 않고, html에 수정한 색상 코드 색상으로 고정됩니다.

border-bottom는 제목의 밑줄 속성 값을 말합니다.

border-bottom: 4px solid ff !important;

4px	밑줄 선의 두께
solid	border-style (선의 형태)
ff	선의 색, 색상코드
!important;	최우선 적용

밑줄도 원하는 부분을 수정, 삭제하여 변경할 수 있습니다.

선의 형태는 점선, 2줄 등 여러 가지 형태가 있는데요. 테두리 선의 형태는 이전글을 참고하시면 도움이 되실 것입니다.

수정 후

.content-article h2 { border-bottom: 4px solid ff !important;}
.content-article h3 { border-bottom: 2px solid cc !important;}
.content-article h4 {border-bottom: 2px solid 88 !important;}

제목의 옆 줄을 없애고 밑줄만 남겨두었습니다.

▲ 제목 h태그의 옆 줄을 없앤 결과물

h2처럼 h3, h4 부분도 같은 방식으로 수정할 수 있습니다. border 스타일을 수정하여 제목 테두리를 변경하였는데요. 스킨을 디자인을 수정하면서 같은 고민을 하고 계신 분께 도움이 되셨길 바랍니다.