본문 바로가기
IT

티스토리 css 제목 꾸미기

by sundancekidd 2024. 2. 16.

테스토리 css 제목 꾸미기

티스토리 css로 제목 꾸미기를 하면서 저장용으로 기록합니다.
(※ "제목1"은 h2입니다.)

제목1 티스토리 CSS 수정 ----→ .entry-content h2

제목2 티스토리 CSS 수정 ----------→ .entry-content h3

제목3 티스토리 CSS 수정 -------------------→ .entry-content h4  --- 이건 지웠습니다.

.entry-content h2 {
  clear: both;
  margin: 29px 0 22px;
  font-size: 1.5em;
  line-height: 1.5;
  color: #000;
  /*꾸미기*/
  border-style: solid;
  border-width : 0px 0px 1px 14px;
  border-color: #CDCDCD;
  background-color: #FFF;
  padding: 6px;
}

.entry-content h3 {
  clear: both;
  margin: 29px 0 22px;
  font-size: 1.3125em;
  line-height: 1.5;
  color: #000;
  /*꾸미기*/
  border-style: solid;
  border-width : 0px 0px 0px 7px;
  border-color: #CDCDCD;
  background-color: #FFF;
  padding: 6px;
}

/* 반영 안함
.entry-content h4 {
  clear: both;
  margin: 29px 0 22px;
  font-weight: 400;
  font-size: 1.125em;
  line-height: 1.5;
  color: #000;
  border-style: solid;
  border-width : 0px 0px 0px 5px;
  border-color: #CDCDCD;
  background-color: #FFF;
  padding: 6px;
}
*/

※ 참고로, google chrome에서 F12를 눌러 웹페이지 개발자 도구로 들어가면, 아래 그림처럼 마우스를 over한 영역에 대한 정보를 확인할 수 있습니다.

티스토리-h2-css-크롬-개발자모드
본문에서 "제목1 ~~~"을 누르니, 제목1이 h2로 나타납니다.