티스토리 블로그 만들기(소제목 꾸미기)

반응형

블로그에 글을 쓰다 보면 내용은 잘 정리해서 쓴 거 같은데 뭔가 밋밋하고 눈에 안 들어오는 느낌이 들 때가 있습니다.

아마도 그 이유는 단조로운 하얀 바탕에 검정글씨만 있어서 일 것입니다. 눈에 잘 들어오는 글의 공통점은 소제목이 한눈에 들어온다는 점 일 것입니다. 이렇게 잘 읽히는 글을 위한 소제목 꾸미는 방법에 대해 알려드리겠습니다.

 

소제목 꾸미기 코드

이렇게 소제목을 꾸미기 쉽게 편집기에서 기능을 제공해주면 좋겠지만 이런 기능이 없기 때문에 html 코드를 통해 소제목을 꾸며주어야 합니다. html 코드라고 하니 어려울 것 같지만 전혀 어렵지 않으니 순서대로 따라 해주시기만 하면 누구나 하실 수 있으니 걱정하지 않으셔도 됩니다..

 

먼저 소제목을 꾸미기 위한 html 코드를 알려드리도록 하겠습니다.

[html 코드]
<span style="background: #F6F6F6; border-left: 0.5em solid #688FF4; padding: 0.5em; font-weight: bold;"> 소제목 꾸미기 코드 </span>

 

뭔가 굉장히 복잡하고 피하고 싶은 기분이 드실 수도 있지만 끝까지 글을 읽어보시면 어렵지 않다는 것을 알게되실겁니다.

 

 

소제목 꾸미기 방법

지금부터는 소제목을 꾸미는 방법에 대해 본격적으로 설명드리겠습니다.

기본모드에서 html모드로 바꿔준 후에 앞에서 알려드린 html코드를 붙여넣기 합니다. 붙여넣기가 안되신다면 공부하는 셈 치고 따라서 타이핑해 보셔도 좋습니다.

다시 html모드에서 기본모드로 돌아와 보면 소제목 꾸미기가 되어있을 것입니다.

 

정리해서 다시 알려드리면 다음과 같습니다.

[소제목 꾸미기 방법]
1. 소제목 꾸미기 html 코드를 복사한다.
2. 글 편집창을 기본모드에서 html모드로 바꾼다.
3. 붙여넣기하고 기본모드로 돌아온다.

 

그런데 매번 복사 붙여넣기 하는 것도 번거로우니 원할 때마다 두고두고 가져다 쓰는 방법을 알려드리겠습니다.

서식기능을 활용한 방법으로 먼저 티스토리에 로그인하여 블로그관리 화면으로 들어가 줍니다.

왼쪽 콘텐츠 - 서식 관리 메뉴로 들어가 서식 쓰기를 하여 html코드를 서식으로 저장합니다. 이렇게 해두면 글을 쓰다가 소제목을 쓰고 싶은 곳에서 서식으로 불러와 사용하실 수 있습니다.

 

함께 보기 좋은 글 : 티스토리 블로그 만들기:가이드(이미지, 광고)

티스토리 블로그 만들기:가이드(이미지, 광고)

소제목 꾸미기 응용

앞서 소제목 꾸미는 방법을 알아보았는데 사람마다 취향이 다르기 때문에 알려드린 html 코드로 만들어지는 디자인이 마음에 들지 않을 수 있습니다. 그래서 이번에는 다양하게 응용해서 커스텀하는 방법을 알려드리도록 하겠습니다.

 

응용 방법을 알려드리기 전에 html 코드에 대한 분석부터 해야 응용이 가능하니 알려드린 코드를 가지고 설명을 먼저 드리겠습니다.

<span style="background: #F6F6F6; border-left: 0.5em solid #688FF4; padding: 0.5em; font-weight: bold;"> 소제목 꾸미기 코드 </span>

 

html 코드는 태그와 속성으로 구성되어 있는데 여기에서 <span>은 태그이고 style은 속성에 해당합니다. 소제목 꾸미기 응용을 하려면 속성에 들어가 있는 값에 대해 알아야 합니다.

• background : 배경색을 설정하는 속성 값입니다.
• border-left : 왼쪽 파란색이 들어간 부분의 두께를 지정하는 속성 값입니다.
• solid : 왼쪽 띠 색을 변경할 수 있는 속성 값입니다.
• padding : 글 바깥 간격 두께를 지정하는 속성 값입니다.
• font-weight : 글자 굵기를 지정하는 속성 값입니다.

만약 여러분이 이 속성 값을 변경하여 다음 코드처럼 응용한다면 이렇게 소제목을 꾸밀 수도 있습니다.

<span style="background: #FAF4C0; border-left: 2em solid #D1B2FF; padding: 0.5em; font-weight: bold;"> 소제목 꾸미기 응용 </span>

코드에서는 색상을 16진수의 RGB 코드로 나타내는데 원하는 색상의 RGB 코드는 아래 링크로 이동하시면 쉽게 찾을 수 있습니다.

RGB 색상표

rgb 색상표 : 네이버 통합검색