티스토리 블로그를 시작하시거나 이용하시는 분들은 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과 CSS를 활용하여 레이아웃을 내 스타일대로 꾸밀 수 있다는 장점이 있습니다. 초반에 블로그를 시작할 때 어떤 블로그를 이용할까 고민하다가 티스토리 블로그를 선택하게 된 이유 중의 하나이기도 합니다.

HTML과 CSS를 잘 몰라도 조금만 검색하여 활용만하면 기존의 것도 내 스타일대로 조금은 바꿀 수 있다는 것입니다.

텍스트 상자가 필요한 이유

글을 쓸 때 거창하게 소설처럼 쓰지 않더라도 서론 본론 결론으로 나누어 쓰게 되는데 보통 [텍스트 상자가 필요한 이유] 처럼 서식을 활용한 소제목을 쓰게 됩니다. 그러나 소제목안의 글 내용도 분류하는 경우가 있는데 그럴 때 단순히 숫자 1. 2. 3. 이라던가 a. b. c. 처럼 뭔가 단순하게 하는 것보다는 그래도 글상자를 활용하게 되면 덜 밋밋하게 됩니다.

소스와 이용방법

우선 html의 소스는 다음과 같습니다.  우선 아래의 첨부파일을 받으시면 됩니다. 내용을 복사하여 블로그관리-서식쓰기-서식으로 저장하시면 되는데, 소스를 서식으로 저장할 때는 글쓰기 모드를 html로 변환시켜 저장하셔야 합니다.

<div class="note1">
<p>여기다 글을 쓰세요</p>
</div>

다음은 css의 소스입니다. 역시 첨부된 파일을 별도로 받으시면 됩니다. 소스의 내용을 복사하여 블로그관리-html편집-CSS탭에 빈 공간을 확보하여 입력-저장하시면 됩니다.  CSS내용 중 @font-face } 밑에 빈 공간에 입력하셔야 하는데, 만약 @font-face가 없으면 최상단 내용 중 @charset "utf-8"; 보다 밑에 빈 공간 {   } 부분을 피하고 입력하셔야 합니다.

.note1 {         //note1이란 이름을 변경하셔도 됩니다.
    position:relative;
    background:#B2CCFF;
    width:300px;
    max-width: 100%;
    text-align: center;
    padding: 12px;
    color:black;
    }

.note1:before {  //note1부분도 동일한 이름으로 변경하셔야 합니다.
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0; 
    border-style:solid;
    border-color: #FFFFFF #FFFFFF #0054FF #0054FF; 
    background: #0054FF; 
    display:block; width:0;   
}

활용 예제

먼저 블로그 관리자모드-스킨편집-html편집-css탭으로 이동하셔서 빈 공간을 확보하시면 됩니다.

빈 공간을 확보 후 css 소스를 입력 후 확인을 누르시면 됩니다.

새로운 글쓰기로 들어가신 후 - html모드로 변환하여 html 소스를 입력 후 글 쓰는 부분에 원하는 문구를 입력하신 후 완료를 누르시면 됩니다.

소스 입력 후의 화면

사용하시는 스킨과 폰트에 따라 달라보일 수가 있으며, 반응형으로 만들어져서 디바이스 화면에 따라 사이즈가 달라 보일 수 있습니다.

서식만들기

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

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

새로운 글쓰기 기본모드에서 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파일 내용의 소스를 복사하시어 마음껏 활용하시면 됩니다!!