티스토리 블로그를 시작하시거나 이용하시는 분들은 html과 css에 대해서 많이 들어보셨을 겁니다. 블로그를 예쁘게 꾸미는데 html과 css를 조금만 응용해도 얼마든지 내가 원하는 방향에 가깝게 예쁘게 꾸밀 수가 있습니다. 저 역시 티스토리 블로그 운영이 처음이고 초보자여서 가장 기초적이고 쉬운 설명으로 이해가 가기 쉽게 포스팅을 하려고 합니다.

HTML

HTML과 CSS는 프로그래밍 언어의 한 종류입니다. 그러나 프로그래밍 언어라고 하기보다는 페이지 기술 언어라 정의하는 편이 더 이해가 되겠습니다.

HTML(Hyper Text Marup Language/하이퍼 텍스트 마크업 언어)의 약자이며 웹사이트의 '콘텐츠'를 작성할 때 기본이되는 페이지 기술 언어입니다.

말 그대로 이용자께서 보고계시는 크롬이나 인터넷익스플로러 등의 웹페이지의 디자인이나 레이아웃을 기술하기 위한 것이며 페이지에 표시할 요소나 구조 등을 기술할 수가 있습니다.

HTML의 특징은 파일명이 .html이며 메모장과 같은 텍스트를 입력할 수 있는 기본적인 텍스트 편집 프로그램에 원하는 소스를 작성한 후 티스토리 블로그-스킨편집-html편집-html에 입력하여 바로 적용시키고 확인할 수가 있습니다.

CSS

CSS(Cascading Style Sheet/종속형 스타일 시트)의 약자이며 '스타일 시트'를 기술할 때 사용하는 언어입니다.

HTML보다 더 괜찮은 디자인으로 사용할 수가 있으며 역시 메모장과 같은 텍스트 편집 프로그램에 소스를 입력한 후 마찬가지로 html편집-CSS부분에 입력하여 바로 확인할 수 있습니다. 파일 확장명은 .CSS입니다.

HTML이 기본뼈대라면, CSS는 좀 더 디테일하게 꾸밀 수가 있습니다.

HTML과 CSS의 차이

좀 더 이해가 가기위해서 동그라미를 구현하였을 때의 차이점을 비교하겠습니다.

<div style="width:100px;height:100px;border:1pt
 solid #1DDB16;border-radius:50px;
filter:alpha(opacity=30);opacity:0.3;
background:#1DDB16;"></div>

HTML 부분
<div id="circle1">
</div>

CSS 부분
.circle1 {
background-color:#86efef;
width:150px;
height:150px;
border-radius:75px;
margin:0 auto;
vertical-align:middle;
line-height:150px;

정리하자면 HTML은 콘텐츠의 구조와 의미를 정의하며, CSS는 스타일과 레이아웃을 지정합니다. CSS를 사용하여 콘텐츠의 글꼴, 색상, 크기 및 간격의 변경, 애니메이션 및 기타 효과를 추가할 수 있습니다.

티스토리에서 HTML과 CSS는 소제목이나 인용구를 활용하여 글쓰기에 가독성을 높이는데 조금 더 도움이 될 수 있으며, 전문가가 아니더라도 활용을 한다면 충분히 글을 포스팅할 수 있다고 생각이 됩니다.

서식만들기

먼저, 관리자 모드로 접속한 후 왼쪽 메뉴-서식관리로 들어갑니다.

서식관리-서식쓰기를 합니다.

새로운 글쓰기 기본모드에서 HTML모드로 전환 합니다.

제목을 [소제목 서식] 처럼, 편한대로 정한 후 아래 입력칸에 첨부된 HTML 소스를 입력하신 후 저장하시면 됩니다.

활용하기

이제 새로 글을 쓰실 때 적당한 위치에서 글쓰기 메뉴 화면 우측-기본모드 왼쪽 점 3개 부분을 클릭하여 서식을 선택하신 후에 저장해 두었던 [소제목 서식]을 입력하시면 됩니다. 

우선 첨부된 TXT파일 내용의 소스를 복사하시어 활용하시면 됩니다.

<h3 style="box-sizing: border-box; font-family: Nanum+Gothic, sans-serif; 
border-width: 0px 0px 2px 10px;      // 왼쪽 두께 부분 //
word-spacing: 3px; border-bottom-style: solid; 
border-bottom-color: #000000;      // 아래 라인 색 부분 //
padding: 3px 5px; border-left-style: solid; 
border-left-color: #55555b;           // 왼쪽 선 색 부분 //
margin: 5px 0px; letter-spacing: 1px; line-height: 1.5; 
border-image: initial;"><span> 
<span style="font-size: 21px;">서식 만들기</span></span></h3>

border-width 0px 0px 2px 10px 부분에서

왼쪽 두께부분 10px 부분을 25px 정도로 두었을 때의 모습입니다.

border-bottom-color 부분에서

아래 라인 색 부분을 변경할 때 모습입니다. HTML 색상표에서 원하시는 색상을 고르시어 [#000000] 부분을 드래그 하여 입력하면 됩니다.

border-left-color 부분에서

왼쪽 제목 옆라인 색 변경 모습입니다.

txt파일 내용의 소스를 복사하시어 마음껏 활용하시면 됩니다!!