티스토리 CSS에서 말머리에 박스 넣기

 기본으로 제공 되는 말머리 서식이 마음에 들지 않아서, HTML로 일일이 들어가서 수정해 왔다. 하지만 조금 검색 해보니 스킨 편집을 통해 말머리 서식을 변경할 수 있었다.

 우선 블로그 관리에서 스킨 편집 > HTML 편집을 클릭 한다.

 HTML / CSS / 파일 업로드 중 CSS를 클릭하고, CTRL + F를 누른다.

 검색 창이 나타나면 "article_view h1"을 입력한다. 스킨에 따라서는 entry-content 등 과 같이 정의한 이름이 다를 수 있다. 검색이 안되면, h1, h2, h3, h4 등으로 검색하여 font-size 등이 있는 곳이 있는지 확인 하자. 그리고 내용을 수정하고 글을 리프레시 했을 때 변경 되는지 확인하면 된다.

 article_view의 h1,h2,h3,h4는 구버전 글쓰기의 말머리1, 2, 3, 4를 의미한다. 신버전에서는 h2~4까지 제목 1~3을 의미한다.

 내가 사용한 스킨에는 article_view h1~h4가 2개씩 있었는데, 그 중 한개가 font-size 등이 미리 입력 되어 있어서, 그걸 수정했다. 왜 2개씩 있는지는 모르겠지만 뒷쪽에 있는 것이 최종적으로 적용 되는 듯 하다.

 다음은 말머리 3을 수정한 예시이다.

말머리3

.article_view h3 { 

font-size: 24px; 

line-height: 1.4; 

color: #000000;  

border-left: #B40404 10px solid;  

margin: 0px 0px 10px;  

letter-spacing: 0px;  

line-height: normal;  

font-stretch: normal;  

padding: 0px 0px 0px 10px; 

font-weight:normal 

}

•  font-size : 글자의 크기를 나타낸다.
•  line-height : 줄 높이를 의미한다. 글 간격이 좁아져 답답해 진다.
•  color : 글자의 색을 나타내며 #000000은 검정색이다.
•  border-left : 말머리의 붉은 직사각형을 설정한다. #B40404는 붉은 색을 나타내며, 10px는 사각형의 넓이를 나타낸다.
•  margin : 붉은 직사각형과 글 사이의 간격을 나타낸다. 순서대로 위, 왼쪽, 아래이다. 예시는 아래쪽으로만 10px의 간격을 두었다.
•  letter-spacing : 글자 사이의 간격이다. -를 주면 간격이 더 좁아지고, +를 주면 글자가 띄엄띄엄 나타난다.
•  line-height : 줄의 높이이다. 값을 100px와 같이 주면 줄의 높이가 커지고, 직사각형의 높이도 늘어난다.
•  padding : 위, 우, 아래, 좌 순서 대로 글자를 기준으로 빈공간을 넣어준다.
•  font-weight : 글자의 굵기를 나타낸다. 숫자로는 400이 normal이며, 클수록 굵어진다. bold, bolder, lighter, normal 등 단어로 입력해도 된다.

 신버전 에디터 보다 구버전 에디터가 좀 더 오류 없이 적용 되는 것 같다. 현재 작성한 글은 구버전 에디터를 사용하여 작성 되었다. font-stretch는 ultra-condensed, ultra-expanded와 같이 적으면 장평이 늘어난다고 하는데, 내가 했을 경우는 변화가 없었다.

 

 수정이 끝났으면, 스킨 편집을 저장한다. 사용은 말머리1, 2, 3, 4나 제목1, 2, 3을 글을 작성할 때 글꼴에서 적용하면 된다. 에디터 화면에서는 붉은 박스가 나타나지 않지만 미리보기나 발행 후에는 정상적으로 표현 된다.

  

 또한 원한다면 폰트 스타일도 지정가능 하며 font-style 또는 font-family 옵션을 추가해 주면 된다.

 

 웹의 생상 표준은 아래 사이트에서 확인하면 된다.

 

https://html-color-codes.info/Korean/