"티스토리 블로그 HTML & CSS 완벽 가이드 (심화편)"
기본적인 HTML과 CSS를 익혔다면 이제는 한 단계 더 나아가 블로그를 더욱 전문적이고 매력적으로 꾸미는 방법을 알아볼 차례입니다. 이번 심화 과정에서는 티스토리 스킨 수정, 클래스와 ID 활용법, 반응형 웹 디자인 적용 등 고급 활용법을 실전 중심으로 소개해드릴게요. 💻✨
✅ 클래스와 ID의 차이점 이해하기
🔑 클래스(class)란?
- 여러 요소에 같은 스타일을 적용할 때 사용
<p class="highlight">이건 하이라이트된 문장입니다.</p>.highlight { background-color: yellow; font-weight: bold; }
🔐 ID(id)란?
-
- 하나의 특정 요소에 유일한 스타일을 적용할 때 사용
<div id="notice">공지사항입니다</div>#notice { color: red; font-size: 18px; }
💡 클래스는 반복 사용 가능, ID는 한 번만 사용해야 합니다.
✅ 티스토리 스킨 구조 이해하기
📁 주요 파일
-
- index.xml: 전체 페이지 레이아웃 담당
- style.css: CSS 스타일 정의 파일
- skin.html: 헤더/푸터, 글 리스트 구조 설정
🧱 커스터마이징 예시
-
- 상단 메뉴 색상 바꾸기
#header .menu { background-color: #333; color: #fff; }- 포스트 썸네일 크기 조절
.article .thumbnail { width: 100%; height: auto; }
✅ 반응형 디자인 적용하기 (모바일 최적화)
📱 미디어 쿼리(Media Query)란?
디바이스 너비에 따라 다른 스타일을 적용할 수 있는 CSS 기능
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
.menu {
display: none;
}
}- 모바일에서는 메뉴를 숨기고, 글자 크기를 줄이는 방식으로 적용
✅ 모바일 썸네일 줄 맞춤 팁
.post-item {
display: flex;
flex-direction: column;
align-items: center;
}✅ 구글 폰트 & 외부 리소스 활용
🔗 구글 폰트 적용하기
🖼 아이콘 넣기 (Font Awesome)
✅ HTML & CSS 디버깅 팁
🔍 크롬 개발자 도구(F12)
- 요소 검사로 클래스명 확인 및 실시간 스타일 수정 가능
- 반응형 테스트도 가능
⚠️ 오류 해결 시 체크리스트
- 닫는 태그 빠짐 여부
- 클래스/ID 이름 철자 오류
- 중복된 CSS 선언 여부
✅ 마무리 요약
- 클래스/ID를 구분해서 정확히 활용하면 스킨 커스터마이징이 쉬워져요.
- 반응형 웹은 필수! 모바일 사용자까지 고려한 디자인이 필요합니다.
- 구글 폰트, 외부 아이콘 등의 리소스 활용으로 더 세련된 블로그 완성 가능!
HTML과 CSS는 익히면 익힐수록 자유도가 올라갑니다. 지금까지 배운 내용을 토대로 직접 블로그의 스킨을 수정해보고, 나만의 시그니처 스타일을 만들어보세요. 💪 티스토리는 충분히 강력한 도구입니다. 단지, 그걸 어떻게 쓰느냐가 관건일 뿐이죠!