<--! 2023년 새로운 광고추가 -->

티스토리 블로그를 하다보면 본문 스타일을 바꾸게 되는 경우가 생기는데, 이때 주로 사용하는 방법은 느낌표를 붙인 important 명령어를 CSS에 삽입하는 방법입니다. 그래도 바뀌지 않는 일부 문단에 대해서는 제가 겪은 방법을 참고하여 도움이 되셨으면 합니다. 

블로그에 나눔고딕를 설정한 후 이전에 포스팅했던 글과 앞으로 작성하게 될 폰트스타일이 나눔고딕으로 설정되는 것을 확인했습니다. 그런데 글 쓰는 동안 포스팅내에서 설정했던 스타일의 일부 문단은, 조금전에 HTML에서 나눔고딕으로 설정한 것이 먹히지 않고 있습니다. 그래서 쿨럭님께 도움을 요청한 결과, 본문 안에서 소스 수정이 이루어졌다면 그것이 우선순위로 적용된다는 것을 확인했습니다. 이때까지 포스팅한 글은 100개 조금 넘는 정도로 신생 블로그 수준이지만, 블로그 스타일의 일관성이 없다는 것이 자꾸 신경이쓰여서 여러가지 고민과 도움을 요청하였습니다. 그 결과 CSS 에서 폰트 스타일 강제적용 명령어가 있다는 것을 알았습니다. 아래는 단비스님께서 알려주신 소스입니다. HTML/CSS 수정에서 CSS에 붙여넣기를 하면 어떠한 스타일보다 강력하게 적용이 된다는 것을 확인해보겠습니다.


블로그에 나눔고딕체를 적용했으나 글씨체가 일정하지 않고 자세히 보면 글자 줄간격도 다릅니다.

우선 위의 소스를 style.CSS 에 삽입하여 변화를 살펴보겠습니다.

글씨체가 한번에 바뀌는 것을 확인했습니다. 그리고 font-size 명령어 옆에 붙은 스타일 강제적용이라고 하는 important 명령어 덕분에 소제목의 크기까지 바뀝니다. 아무래도 글자 크기는 강제적용을 시키면 안 될것 같아 font-size 16px 명령어는 삭제해보기로 했습니다.

그래서 수정한 위의 소스를 다시 적용시켜보겠습니다.

소제목의 글자크기가 다시 원래의 모습으로 돌아왔습니다. 그리고 이번에는 !important 명령어가 line-height 에 붙어서 그런지 약간의 줄간격에 변화가 왔습니다. 사진을 클릭하여 확대해서 보면 줄간격이 일정해졌다는 것을 확인할 수 있습니다. 블로그를 오래 하셨거나 HTML을 잘하시는 분들은 이미 알고 계시겠지만, .article * { font-family: 'Nanum Gothic' !important; line-height:30px !important; } 에서 처럼 글씨체와 줄간격 뒤에 붙어있는 !important 처럼 각각에 붙여주어야 모두 적용되는 것을 확인했습니다. 

이 부분은 모든 스킨에서 적용되는 공통된 법칙인지는 모르겠는데, 제 스킨에서는 강제적용 명령어인 !important 을 각각에 삽입해야 효과를 볼 수 있었습니다.

그래서 이번에는 위의 소스를 style.CSS 에 삽입해보았습니다. 임폴턴트를 글씨체에도 적용하고, 줄간격에도 적용시켰습니다.

드디어 원하는 결과를 얻었습니다. 포스팅내에 있는 모든 글씨가 한번에 나눔고딕으로 바뀌었고, 줄간격이 일정하게 변했습니다.

이번에는 .article * { ~~~~~ } 뿐만 아니라, 댓글영역에도 스타일 강제적용이 되는지 알아보기 위해 .comment * { ~~~~~ } 을 삽입해봤는데 적용이 됩니다. 혹시나 저처럼 티스토리 블로그에서 헤매고 계시는 분들에게 도움이 되었으면 합니다.

추가로, 글씨 크기와 줄간격의 단위가 여러개 있습니다. px, pt, em 과 퍼센티지(%)로 조절하는 경우도 생깁니다. 각각의 단위환산을 하려고 한다면 여기 사이트에 들어가시면 알 수 있습니다. 티스토리 블로그를 운영하면서 본문 스타일이 바뀌어 일관성 있는 포스팅으로 만들고자 한다면, important 명령어를 사용하여 글씨체를 한번에 바꾸거나, 강제적용 시키고 싶은 부분을 일부만 적용하는 것도 괜찮은 방법인 것 같습니다. 혹시 더 간단히 설정할 수 있는 방법이 있다면 커멘트 부탁드립니다~ 


Posted by 전포
,