티스토리 - 스타일링

완성된 공통스타일 코드

/* Custom Styles */
img {
	border-radius: 5px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);	
	margin: 10px 0 !important;
}

.entry-content p, span, a, td {
	font-size: 1.2rem !important;
}

.entry-content h1 {
	font-size: 1.8rem !important;
}

.entry-content h2 {
	font-size: 1.7rem !important;
}

.entry-content h3 {
	font-size: 1.6rem !important;
}

.entry-content h4 {
	font-size: 1.5rem !important;
}

code { /* Code Editor Styles */
  font-family: Consolas !important;
  font-size: 1rem !important;
  color: #fff !important;
  background-color: #2B1B17 !important;	
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);	
  margin: 10px 0 !important;
  border-radius: 5px;
}

 

구현 배경

티스토리에 포스트가 하나씩 늘다 보니 처음 시작할 때는 신경 쓰지 않았던 부분들이 눈에 들어오기 시작하더군요. 그중 가장 눈이 가는 건 역시 스타일링이었는데요. 편집할 때는 보기 좋았는데 저장된 결과물은 항상 마음에 들지 않더군요.

단순함이 좋아서 Poster라는 스킨을 사용 중인데 가장 맘에 들지 않는 것은 너무 작은 글씨였습니다.

또 본문 1이라는 같은 사이즈의 크기를 적용하더라도 완성본에서 보이는 글자의 크기는 들죽날 죽인 점도 마음에 들지 않았습니다 (아래 사진을 보면 같은 본문 1을 사용하여 만든 요소라도 하나는 <span> 태그로 다른 하나는 <p> 태그로 생성되고 사이즈도 희한하게 <span>이 더 크더군요). 다른 스킨을 시도해 보았지만 근본적인 문제는 해결되지 않더군요.

또 이미 포스트가 100개를 넘은 상황에 하나씩 다시 수정하는 것도 끌리는 대안은 아니라 소스 코드를 편집하여 공통된 스타일을 만들기로 했습니다.

공통 스타일 추가하기

관리자 페이지에 보면 좌측에 '스킨편집'이라는 기능이 있는데요. 해당 메뉴를 선택하면 스키편집 페이지로 이동합니다.

열린 화면에서 'html 편집'이라는 버튼을 누르고

'CSS'를 선택하고 본격 작업에 들어갑니다.

스타일 코드가 상당히 길고 기존에 스타일을 건드리는 건 일이 너무 많을 거 같아 새로 스타일을 적용하고 해당 스타일로 기존 스타일을 대체하는 방법으로 진행하였는데요.

먼저, 가장 눈에 거슬렸던 글자 크기 수정부터 들어갔습니다.

/* CSS Custom Styles */

p, span, a, td {
  font-size: 1.2rem !important;
}

'!portant'는 이미 적용된 스타일에 우선하여 해당 코드를 적용시켜 주는데요. 위 코드 적용으로 아래와 같이 글자의 크기가 다르게 나타나는 오류가 해결되었습니다 (다만, 해당 코드는 티스토리에서 제공하는 본문 구분에 따른 글자 크기를 대체하기 때문에 해당 기능을 계속 사용하고 싶은 경우 추천하지 않습니다).

또 글자의 크기로 적절히 커져서 훨씬 읽기 수월해졌네요.

다음으로 이미지가 글자와 너무 다닥다닥 붙는 것과 경계선이 없어 어디까지 이미지이고 어디까지가 글인지 구분이 어려운 점이 평소에 만에 들지 않았던 터라 이미지에 margin을 추가하는 작업과 테두리 작업에 들어갔습니다.

이미지 테두리는 보기 촌시러버서 그림자 효과를 선택했는데요.

img {
  border-radius: 5px;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);	
  margin: 10px 0 !important;
}

해당코드 추가 후 아래와 같이 글자와 이미지사이에 간극이 생기고 이미지 주변에 그림자 표과로 글과 확연히 구분이 가능해졌습니다.

개발 블로그다 보니 코드가 들어가는 경우가 많은데 티스토리에서 제공되는 코드 삽입기능은 편리하기는 하나 개발자가 선호하는 UI는 아니더군요 (또 위의 스타일 적용으로 일부 요소의 크기가 변해서 더욱 혐오스러워졌네요). 깃헙에서 지스트를 생성하고 외부 html로 넣는 방법도 있으나 해당 코드를 매번 깃에 등록하는 것도 만만찮은 일이라 그냥 스타일을 만들기로 결정했습니다.

일단 폰트부터 바꾸기로 하고 애용하는 VS Code로 가서 사용되는 폰트를 확인해 보니 'Consola'라는 귀여운 이름을 사용하길래 잽싸게 복사해서 붙여 넣고

개발자의 기본모드인 다크모드 배경을 추가한 뒤 이미지와 마찬가지로 모서리와 마진 효과를 추가하니

code {
  font-family: Consolas !important;
  font-size: 1rem !important;
  color: #fff !important;
  background-color: #2B1B17 !important;	
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);	
  margin: 10px 0 !important;
  border-radius: 5px;
}

훨씬 보기 좋아지더군요.

이상으로 티스토리 공통스타일을 추가하는 방법을 알아보았습니다.