ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 티스토리 테마 수정
    기타 2019.09.11 12:48

    오랜만의 비 기술 카테고리 글.

    티스토리로 옮긴 후 Letter 테마를 선택해서 쓰고 있는데, 군데군데 마음에 들지 않는 곳이 있어서 소소하게 css 파일 수정을 해보았다.

    1. tag list

    tag list의 콤마 (,) 위치가 오른쪽 단어에 가까이 붙는 것을 수정했다.

    before
    after

     .area_view_content .area_tag .tag_content a {
       display: inline-block;
    -  margin-right: 10px;
    +  margin-left: 8px;
       font-size: 16px;
       color: #929292;
     }

    2. 카테고리 내 다른 글 목록

    포스트 밑에 붙는 다른 글 목록에 불필요한 박스 라인을 제거했다. current 같이 css 파일에서 편집할 수 없는 요소가 있어서 상대적으로 편집하기 어려웠다.

    before
    after

     .article_view table {
    -  border: 1px solid #dadce0;
       border-collapse: collapse;
     }
    
     .article_view table tr th,
     .article_view table tr td {
       padding: 7px;
    -  border-left: 1px solid #dadce0;
     }
    
     .article_view table tr {
    -  border-bottom: 1px solid #dadce0;
     }

    3. unnumbered list 여백 수정

    <ul>로 들어가는 리스트에서 하위 리스트의 경우 아래 요소에 더 바싹 붙는 점이 마음에 안들어서 상단 18px만 있던 여백을 상하단 10px 균등 간격으로 재배치했다.

    before
    after

     .article_view ul {
    -  margin-top: 18px;
    +  margin-top: 10px;
    +  margin-bottom: 10px;
     }

    4. inline code 양식 추가

    텍스트 중에 들어가는 <code>에 대해서는 monospace만 적용되고 아예 아무런 css 설정이 없어서 다른 테마를 참고 삼아 새로 추가했다.

    before
    after

    +.article_view code {
    +  padding: 2px 4px;
    +  color: #c7254e;
    +  font-size: 80%;
    +  background: #f9f2f4;
    +  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    +  border-radius: 4px;
    +}

    부작용으로 inline code 뿐 아니라 code block까지 통째로 바뀌어 버리는 문제가 생겼는데 (덕분에 블로그가 핑크핑크하다), 웹 개발에 전문적인 수준이 아니다보니 원인을 분석하는데 시간이 필요할 것 같다. css는 정말 어렵다.

    '기타' 카테고리의 다른 글

    티스토리 테마 수정  (0) 2019.09.11

    TAG

    댓글 0

Designed by Tistory.