티스토리에서 CSS 코드 사용하기 (h태그 활용)

티스토리 편집기에는 h태그를 사용할  수 있도록 아주 편리한 기능이 제공 됩니다. 웹브라우저에서만 쓸 수있고, 다른 블로그에서도 제공하는 기능이라서 티스토리만의 장점은 될수 없지만요.

아무튼 CSS코드를 추가해서 h태그를 활용하게되면, 포스팅을 할때 글의 구조에 따라서 큰제목과 소제목 등 글의 제목부분의 디자인을 쉽고편하게 지정할 수 있는데, 제가 공부했던 내용을 공유하겠습니다.

1. 편집해야할 CSS코드 위치 확인하기

HTML편집기로 가서을 해서 CSS탭을 열어줍니다.

CSS코드의 구조는 사용하는 스킨의 종류에따라 차이가 있어서 이 글만 보고 똑같이 따라할 수는 없습니다. 코드들을 찬찬히 보시고 해당되는 부분이 어디인지 확인을 해 주어야 합니다. 먼저 CSS코드의 전체적인 구성이 어떻게 되어 있는지 감을 잡아야 하는데요. HTML의 구조를 이해하면 도움이 됩니다. 

출처: https://www.w3schools.com/html/html_layout.asp

웹페이지가 있다면 페이지 각 위치별로 HTML5에서 정의하고있는 명칭을 보여주고 있습니다. 여기서 우리가 손대고자 하는 부분은 바로 "article" 부분입니다. 티스토리에 포스팅하는 글이 표시되는 부분입니다.

티스토리의 CSS코드를 보시면 화면의 어느부분에 해당하는 스타일인지 주석을 달아두어서 그래도 쉽게 찾을 수 있는데요. 

제가 사용하고 있는 스킨인 "Square"를 기준으로 보면 "contents"라는 주석(위 그림에서 78행)이 바로 HTML5에서 "article"에 해당하는 코드입니다. 그리고 "contents"라는 영역 안에서도 크게 head(84~90행)와 body(92~96행)로 구분되는 것을 알수 있는데 누가봐도 body가 관련이 있는 부분인것을 알수 있겠네요.

 

2. CSS코드 수정하기

찾아낸 코드 각 영역에 지정되어 있는 CSS 스타일 코드를 원하는 스타일로 변경하고 저장해 주기만 하면 모든 필요작업이 완료됩니다. 앞에서 HTML문서 규격에서 참고했던 문서 영역별로 저는 다음과 같이 스타일을 변경해서 적용하였습니다. 

2.1. section (.area_title .tit_post)

.area_title .tit_post{
	padding:5px 0 10px; 
    font-weight:normal; 
    font-size:24px; 
    line-height:43px; 
    color:#222}

섹션에 적용할 스타일 미리보기

 

2.2 article (.area_view)

2.2.1 본문

.area_view p {
	font-size:16px; 
    line-height:27px; 
    margin:0 
    auto 22px}

본문에 적용할 스타일 미리보기

 

2.2.2 h1 (머리말 1)

.area_view h1 { 
	background-color: lightblue; 
    font-size:22px; 
    line-height:40px; 
    margin-top: 15px; 
    margin-bottom: 10px;  
    border-left: 5px solid orange; 
    border-top: 1px solid; }

h1에 적용할 스타일 미리보기

 

2.2.3. h2 (머리말 2)

.area_view h2 { 
	font-size:20px; 
    line-height:30px; 
    margin-top: 10px;  
    border-bottom: 1px dotted; }

h2에 적용할 스타일 미리보기

 

1.2.4. h3 (머리말 3)

.area_view h3 { font-size:18px; line-height:20px; }

h3에 적용할 스타일 미리보기

 

1.2.5. h4 (머리말 4)

.area_view h4 { font-size:16px; line-height:20px; }

h4에 적용할 스타일 미리보기

 

 3. CSS코드 사용법

이제 모든 사전준비는 끝났습니다. 지금부터는 편하게 글을 쓰기만 하면 미리 지정한 스타일대로 블로그의 포스팅이 만들어 지는걸 보실 수 있는데요. 참고로, 이 CSS코드는 글을 쓰고있는 편집기 창에서는 그 스타일이 미리보기되지 않습니다. 글을 저장한 후 최종상태이거나 작성중 미리보기창을 새로 열었을 경우에만 사용자 CSS스타일이 적용된 모습을 확인할 수 있습니다.

편집기에서 글을 쓸때는 편하게 글을 쓰면서 본문이면 단축키 Ctrl+0을 그리고 중간중간 소제목이면 Ctrl+1, Ctrl+2 등을 눌러서 머리글로 지정해 주면 알아서 h태크가 입혀집니다. 

이제는 폰트를 수정하고 배경에 색을 입히고 등등 귀찮은 작업이 CSS코드에 적용해 놓은 코드가 모든 h태그에 일괄로 자동으로 적용이 됩니다.

참 편리하네요. ^^

4. CSS 속성별 예제

여기서부터는 제가 적용해둔 CSS코드에 대한 기록입니다. 

워낙 가끔 필요할 때만 찾아보고 수정하기 때문에 문법도 기억못하겠고 어떤 기능이 있는지도 모르겠고해서 어떤 세팅으로 해 두었는지 나중에 다시 볼 요량으로 모아둡니다.

출처: https://www.w3schools.com/css/

4.1. 배경색

{ background-color: lightblue; }

4.2. 외곽선

{

   border-top-style: dotted;

   border-right-style: solid;

   border-bottom-style: dotted;

   border-left-style: 5px solid blue;

}

{

    border-style: solid;

    border-width: 2px 10px 4px 20px;

}

<경계선에 사용할 수 있는 속성들>

dotted - 점선

dashed - -선

solid - 굵은선

double - 이중선

groove - 3D 구루브선 (경계색상값 필요)

ridge - 3D 물결선 (경계색상값 필요)

inset - 3D 내삽선 (경계색상값 필요)

outset - 3D 외삽선 (경계색상값 필요)

none - 경계선 없음

hidden - 경계선 숨기기

4.3. text-decoration

윗줄:    { text-decoration: overline; }

취소선: { text-decoration: line-through; }

밑줄:    { text-decoration: underline; }

4.4. 첨자

위첨자:    { text-transform: uppercase; }

아래첨자: { text-transform: lowercase; }

대문자:    { text-transform: capitalize; }

4.5. 들여쓰기

{ text-indent: 50px; }

4.6. 줄간격

{ line-height: 0.8; }

{ line-height: 1.8; }

4.7. 글자색

{ color: red; }

{ color: #00ff00; }

{ color: rgb(0,0,255); }

4.8. 그림자

{ text-shadow: 2px 2px #ff0000; }

 

끝!