블로그 목차 꾸미기 색,라인 넣기 (css활용)

" 초보블로거들을 위한 팁! css를 활용하여
텍스트 입력기에 없는 나만의 포스트 꾸미기 첫번째 팁"

초보 블로거들을 위하여 포스트 꾸미는 방법을 소개해 드리려고 합니다.
물론 티스토리, 네이버 등 블로그 텍스트입력기에 기본적으로
아주 쉽게 글씨를 꾸미거나 설정할 수 있는 기능들이 있습니다만,
거기에 더해서 약간의 독특함을 만들 수 있는 방법들을 안내드립니다.

예시 ) 제목 글 앞에  라인 넣기

타이틀 앞에 라인으로 포인트주기

타이틀 앞에 라인으로 포인트주기

타이틀 앞에 라인으로 포인트주기

타이틀 앞에 라인으로 포인트주기

<style>
.sample_title_4 {
color:#FF0000 ;
font-weight:400 ;
padding:5px 10px;
display:inline-block;
border-left:5px solid #FF0000;
}
</style>

<h3 class="sample_title_4">타이틀 앞에 라인으로 포인트주기</h3>

<4번째 빨간색 샘플의 예시 코드입니다>

. sample_title_4라는 class 명으로 css를 만들어주고
h3태그 코드에 class="sample_title_4"로 넣어주었습니다.

1. color:#FF0000 ;
-> 글자 색입니다. #FF0000은 Red의 원색입니다.

2. font-weight:400 ;
-> 글자의 두께입니다 "100~900까지" 100 단위로 적어주시면 됩니다. (폰트에 따라 다름)

3. padding:5px 10px;
->글자의 상하좌우 여백입니다. 순서는 상하 px 좌우 px입니다.

4. display:inline-block;
->이걸 넣지 않으면 글자의 배경색을 넣었을 경우 가로길이가 100%로 인식되니 반드시 넣어주세요.

5. border-left:5px solid #FF0000;
-> 가장 중요한 왼쪽 라인을 넣는 코드입니다. 순서는 "선두께px solid #선색 ;"입니다.

6. background-color: #ffffff ;
-> 배경색을 넣고 싶으시다면 이 코드도 같이 넣어주세요!

추가 팁. border-bottom:1px solid #FF0000;
-> 왼쪽에 두꺼운 라인을 넣고, 아래에 얇은 선을 넣어 꾸며 줄 수 도 있습니다 ! 입력순서는 "선두께px & solid & #선색 ;" 입니다.