[SASS/SCSS] 티스토리 본문 스타일

스킨 개발을 위한 본문 스타일 정리입니다.

티스토리 스킨에서 포스트 본문은

반응형

스킨 개발을 위한 본문 스타일 정리입니다.

티스토리 스킨에서 포스트 본문은 로 불러오는데요. HTML편집으로 작성하지 않은 이상 클래스나 아이디등 속성이 비어있는 상태입니다. 저는 티스토리의 마크다운 편집기를 주로 이용하기 때문에 스킨에서 본문 스타일을 하나하나 찾아서 지정하느라 애먹었습니다.

지금 스킨도 마음에 안들어 갈아엎는 참에 마크다운을 기준 하는 본문 스타일 정리를 한번 해야겠다고 마음먹었습니다.

포스트 본문 내용의 구조

<div class="tt_article_useless_p_margin">
  <!--
      작성한 본문 내용
  <p>...</p>
  <h1>...</h1>
  -->

  <div class="container_postbtn #post_button_group">
    <!-- 기능 버튼과 CCL 표시 등 -->
  </div>
  <div class="tt-plugin tt-share-entry-with-sns ...">
    <!-- SNS 공유 버튼 -->
  </div>
  <div class="another_category another_category_color_gray">
    <!-- 카테고리의 다른 글 -->
  </div>
</div>

클래스 tt_article_useless_p_margin는 테마 스타일시트에서 padding이나 margin으로 준 문단의 위아래 여백을 !important까지 써가며 지워버리는 클래스로 마크다운 에디터로 쓰는 경우 자동으로 붙는 모양입니다.

스킨을 만들면서 스타일을 작성할 때 힘들었던 부분은 글 내용이 별도의 태그안에 들어가 있는 것이 아니라 기능 버튼이나 공유 버튼, 카테고리의 다른 글이 있는 표까지 같은 계층에 있다는 것이었습니다. 아아아아...

jQuery 소스코드

저는 문단의 위아래 여백을 쓸 생각이라 tt_article_useless_p_margin를 제거해야 할 필요가 있었습니다.

$('.tt_article_useless_p_margin').each((i, elem) => {
    $(elem).attr('class', 'tt_article');
});

이 스크립트를 실행하기 전에 jQuery를 먼저 불러와야 합니다. 소스는 tt_article_useless_p_margin클래스를 tt_article바꿔서 문단 간격을 조절할 수 있게 되었습니다.

SCSS 소스코드

앞 단락에서 발생한 문제로 인해 CSS로 만들다간 중노동을 피할수 없게 되었습니다. SASS를 활용하여 노가다를 줄이는 방법을 선택했습니다. 예외가 발생하는 경우를 체크해서 계속 업데이트 하도록 하겠습니다.

/**
 * Tistory 글 본문 스타일
 * 제작: soma0sd (https://soma0sd.tistory.com/)
 * 버전: 0.0.1 (2019.05.02)
 * 라이선스: MIT
 *
 * 티스토리 본문 글 스타일
 * .tt_article_useless_p_margin을 .tt_article 변경해야 작동
 */

/*
 * 인라인 요소
 */
.tt_article {
  & > p strong {
    // 문단 내 굵은 글씨
  }
  & > p code,
  & > ul code,
  & > ol code {
    // 본문 인라인 코드
  }
  & > p a,
  & > ul a,
  & > ol a {
    // 본문 링크
  }
}

/*
 * 블록 요소
 */
.tt_article {
  & > h1 {
    // 제목 1
  }
  & > h2 {
    // 제목 2
  }
  & > h3 {
    // 제목 3
  }
  & > h4 {
    // 제목 4
  }
  & > p {
    // 문단
  }
  & > blockquote {
    // 인용구
  }
  & > table,
  & > blockquote table {
    // 표
    th {
      // 항목 이름
    }
    td {
      // 항목
    }
  }
  & > ul {
    // 리스트
    ul {
      // 하위 리스트
    }
  }
  & > ol {
    // 번호가 있는 리스트
    ol {
      // 하위 리스트
    }
  }
  & > pre > code {
    // 소스코드 블록
  }
}

/*
 * 미디어 요소
 */
.tt_article {
  & > figure {
    // 그림 상자
    span > img {
      // 이미지
    }
    figcaption {
      // 이미지 캡션
    }
  }
}

반응형

로 불러오는데요. HTML편집으로 작성하지 않은 이상 클래스나 아이디등 속성이 비어있는 상태입니다. 저는 티스토리의 마크다운 편집기를 주로 이용하기 때문에 스킨에서 본문 스타일을 하나하나 찾아서 지정하느라 애먹었습니다.

지금 스킨도 마음에 안들어 갈아엎는 참에 마크다운을 기준 하는 본문 스타일 정리를 한번 해야겠다고 마음먹었습니다.

포스트 본문 내용의 구조

<div class="tt_article_useless_p_margin">
  <!--
      작성한 본문 내용
  <p>...</p>
  <h1>...</h1>
  -->

  <div class="container_postbtn #post_button_group">
    <!-- 기능 버튼과 CCL 표시 등 -->
  </div>
  <div class="tt-plugin tt-share-entry-with-sns ...">
    <!-- SNS 공유 버튼 -->
  </div>
  <div class="another_category another_category_color_gray">
    <!-- 카테고리의 다른 글 -->
  </div>
</div>

클래스 tt_article_useless_p_margin는 테마 스타일시트에서 padding이나 margin으로 준 문단의 위아래 여백을 !important까지 써가며 지워버리는 클래스로 마크다운 에디터로 쓰는 경우 자동으로 붙는 모양입니다.

스킨을 만들면서 스타일을 작성할 때 힘들었던 부분은 글 내용이 별도의 태그안에 들어가 있는 것이 아니라 기능 버튼이나 공유 버튼, 카테고리의 다른 글이 있는 표까지 같은 계층에 있다는 것이었습니다. 아아아아...

jQuery 소스코드

저는 문단의 위아래 여백을 쓸 생각이라 tt_article_useless_p_margin를 제거해야 할 필요가 있었습니다.

$('.tt_article_useless_p_margin').each((i, elem) => {
    $(elem).attr('class', 'tt_article');
});

이 스크립트를 실행하기 전에 jQuery를 먼저 불러와야 합니다. 소스는 tt_article_useless_p_margin클래스를 tt_article바꿔서 문단 간격을 조절할 수 있게 되었습니다.

SCSS 소스코드

앞 단락에서 발생한 문제로 인해 CSS로 만들다간 중노동을 피할수 없게 되었습니다. SASS를 활용하여 노가다를 줄이는 방법을 선택했습니다. 예외가 발생하는 경우를 체크해서 계속 업데이트 하도록 하겠습니다.

/**
 * Tistory 글 본문 스타일
 * 제작: soma0sd (https://soma0sd.tistory.com/)
 * 버전: 0.0.1 (2019.05.02)
 * 라이선스: MIT
 *
 * 티스토리 본문 글 스타일
 * .tt_article_useless_p_margin을 .tt_article 변경해야 작동
 */

/*
 * 인라인 요소
 */
.tt_article {
  & > p strong {
    // 문단 내 굵은 글씨
  }
  & > p code,
  & > ul code,
  & > ol code {
    // 본문 인라인 코드
  }
  & > p a,
  & > ul a,
  & > ol a {
    // 본문 링크
  }
}

/*
 * 블록 요소
 */
.tt_article {
  & > h1 {
    // 제목 1
  }
  & > h2 {
    // 제목 2
  }
  & > h3 {
    // 제목 3
  }
  & > h4 {
    // 제목 4
  }
  & > p {
    // 문단
  }
  & > blockquote {
    // 인용구
  }
  & > table,
  & > blockquote table {
    // 표
    th {
      // 항목 이름
    }
    td {
      // 항목
    }
  }
  & > ul {
    // 리스트
    ul {
      // 하위 리스트
    }
  }
  & > ol {
    // 번호가 있는 리스트
    ol {
      // 하위 리스트
    }
  }
  & > pre > code {
    // 소스코드 블록
  }
}

/*
 * 미디어 요소
 */
.tt_article {
  & > figure {
    // 그림 상자
    span > img {
      // 이미지
    }
    figcaption {
      // 이미지 캡션
    }
  }
}