tistory CSS 변경

현재 tistory 스킨 중에서 Odyssey 스킨을 사용하고 있는데, 스킨 때문인건지 몇 가지 마음에 안 드는 스타일이 있어서 CSS를 조금 수정해보았다.

 

---

참고로 tistory HTML/CSS 편집은

1. 관리 페이지 > (꾸미기 섹션) 스킨 편집 클릭

2. (우측 패널) 스킨 편집 창 > (썸네일 아래) html 편집 클릭

3. (우측 패널) HTML / CSS 클릭

하면 각각 html 및 css를 편집할 수 있다.

---

 

리스트 간격

리스트의 줄간격이 좁고, 아래 깊이로 들어갈 때 너무 많이 띄어진다.

 

현재 리스트 스타일

다음과 같이 변경

• li 줄간격: 24px → 30px
• ul top 마진: 18px → 4px

변경한 이후로

• 줄 간격이
• 늘어나고
  • 더 깊이 들어갈 때
    • 덜 띄어지게

바뀌었다.

 

 

제목 크기

제목1, 2, 3의 폰트 크기가 비슷해서 구분이 잘 안 된다. (특히 제목2와 3)

 

다음과 같이 변경

• 제목1: 24px → 28px
• 제목2: 20px → 22px
• 제목3: 18px 유지

변경한 이후로

제목 크기가 (제목1)

조금 더 (제목2)

구분이 (제목3)

잘 되게 바뀌었다.

 

 

코드 블럭

인라인 코드 블럭이 일반 텍스트와 구분이 잘 안 되어서 배경색 등을 추가하였다.

 

이제 인라인 코드 블럭도 블럭스럽게 생겨졌다.

 

또한, 자체 제공되는 코드 블럭의 패딩이 다소 넓은데, pre 태그의 패딩이 20px으로 설정되어 있어서 그렇다.

 

패딩을 줄이기 위해 pre 안 code 태그에 -10px 마진을 주었다.

(여기에 code 태그에 추가한 인라인 코드 블럭 스타일 원상복구 내용도 추가함)

변경한 이후로

코드 블럭

의 패딩이 이전보다 좁게 바뀌었다.