티스토리 HTML·CSS 커스터마이징 기초 완전 정복 가이드

티스토리 블로그 디자인, 이제는 내 손으로 바꿔보세요

티스토리 블로그를 처음 시작하거나, 기본 스킨에 만족하지 못하고 내 스타일로 꾸미고 싶은 분들을 위한
기초 HTML·CSS 커스터마이징 안내입니다. 이 글에서는 커스터마이징이 가능한 구조와 시작 방법, 기본 코드의
의미와 적용 방식까지 초보자 눈높이에 맞춰 설명드립니다. 디자이너가 아니어도 가능합니다. 단계별로 익히면
누구나 직접 꾸민 블로그를 만들 수 있어요.

HTML과 CSS, 티스토리에서 어떻게 활용되나요?

HTML은 블로그 콘텐츠와 구조를 담당하고, CSS는 그 콘텐츠의 색상·크기·배치 같은 디자인을
결정합니다. 티스토리는 기본 스킨 내에 HTML/CSS 편집 기능을 제공해 커스터마이징이 가능합니다.
HTML은 "뼈대", CSS는 "옷"이라 생각하면 이해가 쉬워요.

커스터마이징 시작 전 알아야 할 티스토리 구조

HTML과 CSS 수정을 위해선 티스토리의 구조를 이해해야 합니다. 대표적인 구성은 다음과 같습니다.

구성 요소 설명

skin.html	전체 레이아웃 구조를 담당
style.css	글꼴, 색상, 여백 등을 정의
script.js	동적인 요소(슬라이드 등) 기능

관리자 페이지 → 꾸미기 → 스킨 편집을 누르면 HTML과 CSS를 수정할 수 있습니다.

커스터마이징 필수 개념: 클래스와 아이디

HTML에서 특정 요소에 디자인을 적용하려면 클래스(.class), 아이디(#id)를 이해해야 합니다.
이 두 가지는 CSS에서 요소를 선택할 때 사용하는 기준입니다.

선택자 예시 의미

.post-title	class가 post-title인 요소에 적용
#header-menu	id가 header-menu인 요소에 적용

CSS에 적용할 때는 선택자에 따라 "." 또는 "#" 기호를 붙입니다.

티스토리 기본 구조 분석하기

처음엔 HTML을 전부 이해하려 하지 말고, 주요 영역부터 파악하세요.

예:

<div id="content">
  <div class="post">
    <h1 class="post-title">제목</h1>
    <div class="post-content">내용</div>
  </div>
</div>

위 구조에서 "제목"은 post-title 클래스가 적용되어 있고, 이 클래스에 CSS를 연결하면
글 제목의 크기, 색상 등을 변경할 수 있습니다.

자주 사용하는 CSS 스타일 문법

기초적인 CSS 속성만으로도 분위기를 확 바꿀 수 있어요.

속성명 설명 예시

color	글자색	color: red;
font-size	글자 크기	font-size: 18px;
background	배경색	background: #f0f0f0;
margin	바깥 여백	margin: 10px 0;

실제로 티스토리 스킨에 적용해보며 차이를 확인해보는 것이 가장 빠릅니다.

반응형 웹을 위한 뷰포트와 미디어쿼리 이해

티스토리는 모바일에서도 사용자가 많이 방문합니다. 모바일 대응을 위해선 미디어쿼리를 사용해야 합니다.
예를 들어 화면 너비가 768px 이하일 때 글자 크기를 줄이려면 이렇게 작성합니다.

@media (max-width: 768px) {
  .post-title {
    font-size: 16px;
  }
}

이런 방식으로 모바일에서도 깔끔한 블로그를 만들 수 있어요.

직접 수정해보는 미션: 글 제목 색상 바꾸기

HTML:

<h1 class="post-title">글 제목입니다</h1>

CSS:

.post-title {
  color: blue;
}

스킨 편집기에서 style.css에 위 코드를 추가하면, 모든 글의 제목이 파란색으로 변경됩니다.
이처럼 간단한 시도부터 시작하면 금세 감을 익힐 수 있습니다.

실수 방지를 위한 커스터마이징 팁

수정 전 스킨을 백업하는 것이 필수입니다.
또한 하나의 요소를 수정했다면 "미리보기"로 확인하고 적용하세요.
코드를 잘못 입력하면 전체 디자인이 깨질 수 있기 때문에 주의가 필요합니다.

에드센스 승인됨