티스토리 css 활용 제목에 밑줄 넣기 밑줄 색상 바꾸는 쉬운 방법

티스토리 블로그 제목에 색상이 있는 밑줄을 설정하여 놓으시면 방문자들이 내 블로그를 방문하였을때 가독성을 더욱 높여주는 효과가 있습니다. 

그리하여 이번에는 h2, h3, h4 태그에 컬러를 넣어 밑줄을 생성하는 방법에 대하여 풀어보고자 합니다.

아마도 원고를 쓰시면서 엄청나게 정성을 들이시는 분들에게 유용한 정보가 될듯합니다.

---

---

1. 제목글 아래에 밑줄 설정하는 방법을 알기전 알아야 하는 내용

 

블로그의 글을 쓰실때 제목1, 제목2, 제목3이 있습니다.

 

<각 제목에 해당하는 html 코드>

 

제목 1 = h2

제목 2 = h3

제목 3 = h4

---

---

2.제목 밑줄 설정을 하기 위한 경로 가이드

 

나의 블로그에 로그인하신 후 블로그 관리를 들어갑니다.

목록에서 "꾸미ㅣ -> 스킨 편집 --> "html 편집"  클릭하여줍니다.

"html / css / 파일 업로드" 메뉴에서 "css" 메뉴에 들어갑니다.

css 설정을 위한 화면

왼쪽 사진에서와 같이 " 12번째 줄 entry content 영역을 드래그하여주고 "ctrl + f 를 이용하여 검색합니다. 

("ctrl + f 와 엔터 두번을 눌러주시면 오른쪽 사진에 나와있는 위치로 이동합니다.")

h태그를 수정할 부분이 나오는 것이죠.

---

---

3. css에서 제목 밑에 코드 넣을 위치 

 

.entry - content h2 {

clear : both;

margin : 29px 0 22px;

font-size : 1.5em;

line -height : 1.5;

color : #000;

}

 

h2태그 (제목1)에 밑줄 설정 코드를 넣겠습니다. (h3에다가 넣어도 되고, 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   15px;

border - color : #005500;

background-color : #fff;

padding : 7px;

}

 

아래쪽에 텍스트 파일을 "color : #000; 밑, 중괄호 위"에 코드를 넣으셨다면 완료 되신것입니다.

블로그 글을 작성할때 밑줄 설정이 되있는지 확인이 안되기 때문에, 글 작성 시 제목 1(h2)로 글 쓰고 미리보기로 확인해보세요.

제목밑줄설정 코드.txt

0.00MB

 

 

 

북클럽의 스킨이 아닌 다른 스킨을 사용 하시는 분이 있으시다면 경로 안내에서 알려드린것 처럼 "entry content"를 "ctrl + f"로 검색하셔서 "h1, h2, h3, h4"와 "font-size"가 있으시다면 제가 올려드린 첨부파일 안에 코드를 " 중괄호 끝나느 부분의 위"에 넣으시면 됩니다.

---

---

4. 제목 밑줄 컬러 변경하는 요령

네이버에서 색상팔레트를 검색하시면 됩니다.

border-color: #005500; -'#005500' 부분을 수정하셔서 컬러를 변경할 수 있습니다.

 

네이버에 색상 팔레트를 검색하셔서 자기가 원하는 컬러를 고르신 후 조회하셔서 색상 코드를 입력해주시면 됩니다.

---

---

5. 블로그에서 제목 부분이 제대로 적용 안되는 경우

 

css에서 끝부분이 ' ; ' 으로 구분되어있는지 체크

h2에서 '} (중괄호 끝부분)' 위쪽에 코드를 넣었는지 체크

---

 

만약에 이렇게도 안되시면 답글 남겨주시면 자세히 알려드리겠습니다~!

 

감사합니다.