티스토리 꾸미기(코드 블럭, 접은글 등등)

티스토리의 디자인을 하나씩 바꾸는 것에 재미가 들어서 여러 부분을 자잘하게 수정했었는데, CSS나 HTML의 어디를 잘못 건드렸는지 홈 화면의 블로그 스킨이 깨져서 결국 스킨을 초기화를 하였습니다... 그러고 나서 다시 세팅을 하려고 했는데 어떤 것을 어떻게 수정했는지 기록해 놓지 않아 다시 적용하는 데 많은 시간이 소요되었습니다. 앞으로는 스킨을 수정하면서 변경 사항을 여기에 정리해 두려고 합니다.

 

 

 

들어가기 전에

한번 날리면서 깨달은 팁은 스타일을 적용시킬 범위를 잘 선정해야 한다는 것이다.

스타일을 바꾸고 싶은 범위를 확실하게 선정해서 범위를 최소한으로 하자

 

Ex) h2 태그를 변경하고 싶을 경우

 

잘못된 예

h2 { font-size: 40px;}

• 범위가 너무 넓기 때문에 본문밖에 요소들까지 변경되어 깨질 확률이 높다.

 

옳은 예

.area_view h2 { font-size: 40px;}

• 본문 안에 있는 h2태그만 수정한다.

---

 

 

글자 크기 변경

제목에서의 변경사항

• blod 속성 추가
• 글자 크기 증가

제목 1,2,3의 글자가 작아 보여서 크기를 키우고 제목의 경우 항상 blod로 사용하기 때문에 아예 디폴트로 blod 스타이을 적용 하였습니다.

 

font-weight: bold 값 추가 -> 글자 굵게

  .area_view h1,
  .area_view h2,
  .area_view h3,
  .area_view h4 {
    font-size: 20px;
    font-weight: bold;
  }

 

font-size 값 증가 -> 글자 크기 키움

#article-view h2[data-ke-size] {
  font-size: 1.82em;
  line-height: 1.46;
}

#article-view h3[data-ke-size] {
  font-size: 1.64em;
  line-height: 1.48;
}

#article-view h4[data-ke-size] {
  font-size: 1.45em;
  line-height: 1.55;
}

 

 

접은 글(더 보기 버튼) 변경

기본으로 제공해 주는 접은 글이 눈에 잘 띄지 않아서 변경하였다.

커스텀한 접은 글 더 보기 버튼

/* 접은 글 */
#article-view div[data-ke-type='moreLess'] .moreless-content {
  display: none;
  padding: 10px 20px; /* 글 내부 여백 */
  background-color: rgba(229, 229, 229, 0);
}

#article-view div[data-ke-type='moreLess'].open .moreless-content {
  display: block;
}

#article-view div[data-ke-type='moreLess'] .btn-toggle-moreless {
  color: #333;
  font-size: 16px;
  line-height: 26px;
  font-family: Pretendard-Regular, sans-serif;
  cursor: pointer;
  text-decoration: none;
  padding: 5px;
  background-color: #faf39c;
}

div[data-ke-type='moreLess'].open .btn-toggle-moreless:before {
    content: '▲ '; /* 표기할 내용 */
}

div[data-ke-type='moreLess']:not(.open) .btn-toggle-moreless:before {
    content: '▼ '; /* 표기할 내용 */
}

 

코드블록 변경

코드 블록에서의 변경사항

• 코드블록 테마 변경
• 라운드값을 추가
• 상단 margin값 감소 

 

코드 블럭의 태마 변경은 해당 글에 정리해 놓았습니다.

[기타] 티스토리 코드블럭 테마 변경 방법

 

 

코드블록(pre 태그)에 경우 contents_style에 전체적으로 margin이 걸려있어서 먼저 contents_style 하위에서 pre를 제외하고 pre태그 안에 margin값 추가하였습니다.

 

.contents_style>*:not(pre) {
  margin: 20px 0 0 0;
}

#article-view pre code.hljs {
  font-size: 14px;
  margin: 5px auto 5px; /* margin 설정 */
  padding: 20px;
  border-radius: 5px; /* 라운드 값 추가 */
  font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
  border: solid 1px #ebebeb;
  line-height: 1.71;
  overflow: auto;
}

 

 

드래그 시 색상 변경

글의 가독성을 높여줍니다.  CSS편집창에 아래코드를 추가해 주면 끝입니다

 

::selection {
  background-color: #838ef635;
}

 

 

 

U 태그 커스텀 (글자 강조, 형광펜)

티스토리에서 기본으로 제공해 주는 하이라이트 기능이 마음에 들지 않아서 사용하지 않는 밑줄(underline) U태그를 커스텀하여 원하는 스타일로 변경하였다.

 

.tt_article_useless_p_margin > p > u {
    padding: .2em .4em;
    text-decoration: none;
    border-radius: 3px;
    /* font-weight: bold;  */
    background-color: rgba(248, 205, 77, 0.7);
  }

 

• .tt_article_useless_p_margin > p > u 의 경우 <p> 테그의 직속 자식인 <u> 테그만 적용이된다.
• <p> 태그 아래의 모든 <u> 태그(직속이 아니여도)에 적용하고 싶으면 아래와 같이 변경하면 된다.

.tt_article_useless_p_margin > p u {

}