티스토리 예쁘게 글작성하는 팁 #2 '글제목 꾸미기(밑줄넣기)'

1. 글제목을 꾸미기를 해야하는 이유

가독성 : 확실한 제목구분은 보는 사람을 편하게 합니다.

구성 : 내용을 짜임새 있게 작성하고 전달할 수 있습니다.

 

2. 제목1, 2, 3의 HTML 확인

 글작성에서 제목1, 2, 3으로 글제목을 작성하고 기본모드에서  HTML 모드로 변경 HTML코드를 확인해 보면 h2, h3, h4와 같이 표시되는 것을 확인할 수 있습니다.

• 제목1 => h2
• 제목2 => h3
• 제목3 => h4

 

3. 목표

 저희가 앞으로 할 것은 아래와 같습니다.

• 제목2 (h3) 를 사용 : 자동으로 "진하게, 밑줄" 적용
• 제목3 (h4) 를 사용 : 자동으로 "왼쪽 회색음영 줄 적용

 

4. 적용 방법

"블로그 설정 → 스킨변경 → HTML편집 → CSS" 으로 이동합니다.

위 그림에서 주황색 부분(기존) 부분에 빨간색 부분을 추가하여 적용합니다. (아래 TXT파일을 확인)

h3.txt

0.00MB

h4.txt

0.00MB

 

적용이 안될 경우 확인사항

• h2 뒤에 { 으로 시작하고 } 로 끝났는지 확인
• 속성 간에 ; 으로 모두 구분이 되어있는지 확인
• 그래도 적용이 안될 경우 속성값 뒤에 !important 를 붙인 속성은 우선하여 강제로 적용됩니다.

 

5. 적용 결과

• 글작성할때 제목2와 제목3을 사용하면 자동으로 밑줄과 왼쪽에 회색음영이 적용됩니다.
• 기존글도 모두 변경되어 표시됩니다.
• 블로그의 본문 외 다른 곳에 사용된 h2, h3, h4 도 변경되므로 적절히 사용합니다.

 

참고 : Padding 값 변경 시

참고 블로그

https://chaedy.tistory.com/182

https://muksteem.tistory.com/22