⚠️ 주의사항: CSS 선택자의 정확한 사용을 위해 먼저 개발자 도구(F12)로 해당 요소의 클래스나 ID를 확인하는 것이 좋습니다. 티스토리 스킨마다 구조가 다르기 때문입니다.
📝 HTML 추가 삽입 활용법
HTML 추가 삽입 기능은 CSS뿐만 아니라 JavaScript, 메타태그, 구조적 요소 등 다양한 내용을 추가할 수 있는 강력한 도구입니다.
삽입 위치
주요 용도
예시
상단 삽입 (</head> 태그 직전)
CSS 스타일, 메타태그, 웹폰트, 분석 코드
<style>...</style>, <link>, Google Analytics
하단 삽입 (</body> 태그 직전)
JavaScript, 채팅 위젯, 외부 스크립트
<script>...</script>, Facebook Pixel
외부 CSS 파일 연결하기
CSS 코드가 길어질 경우 외부 파일로 분리하여 관리하는 것이 좋습니다:
<!-- 상단 삽입에 추가 -->
<link rel="stylesheet" href="https://yourdomain.com/custom.css" />
💡 프로 Tip: 외부 CSS 파일을 사용하면 여러 블로그에서 동일한 스타일을 공유할 수 있고, 캐싱으로 인해 로딩 속도가 향상될 수 있습니다.
🎯 CSS 우선순위 이해하기
CSS 무수정 커스터마이징의 성공은 우선순위 이해에 달려 있습니다. 기본적으로 CSS는 다음과 같은 우선순위를 가집니다:
!important 선언
인라인 스타일 (HTML 태그 내 style 속성)
ID 선택자 (#header)
클래스 선택자 (.post-title), 속성 선택자, 가상 클래스
태그 선택器 (div, p, a)
상속된 스타일
HTML 추가 삽입으로 넣은 CSS는 기본 스킨 CSS보다 나중에 로드되므로, 동일한 선택자라면 추가 삽입 CSS가 우선 적용됩니다.
우선순위 높이는 실전 예제
/* 기본 스타일보다 우선 적용하는 방법 */
#header .inner { /* ID + 클래스 조합 */
background-color: #4c1d95 !important;
}
body #content .post-title a { /* 구체적인 선택자 */
font-size: 24px;
color: #2563eb;
}
/* 동일 선택자라면 HTML 추가 삽입 CSS가 자동 우선 */
.widget {
border: 2px solid #3b82f6;
border-radius: 12px;
}
✨ 실전 커스터마이징 예제
1. 헤더 배경 그라데이션으로 변경
#header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 25px 0;
}
#header h1 a {
color: white !important;
font-size: 28px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
⚠️ 중요: CSS 변경 후에는 반드시 다양한 브라우저(Chrome, Firefox, Safari)와 기기(데스크톱, 태블릿, 모바일)에서 테스트하세요.
❓ 자주 묻는 질문
티스토리 CSS 무수정 커스터마이징은 스킨의 기본 CSS 파일을 직접 수정하지 않고, HTML 추가 삽입 기능을 활용하여 <style> 태그나 외부 CSS 파일로 디자인을 변경하는 방법입니다. 이 방법의 장점은 스킨 업데이트 시에도 커스터마이징이 유지되고, 언제든 원래대로 되돌릴 수 있다는 것입니다.
티스토리 관리자 → 스킨 편집 → HTML 편집 → HTML 추가 삽입 메뉴에서 설정할 수 있습니다. 여기서 상단 삽입은 </head> 태그 직전에, 하단 삽입은 </body> 태그 직전에 코드가 삽입됩니다. CSS 코드는 상단 삽입에 <style> 태그로 감싸서 넣으면 됩니다.
CSS 우선순위는 인라인 스타일 > HTML 추가 삽입 > 스킨 기본 CSS 순으로 적용됩니다. 따라서 HTML 추가 삽입으로 넣한 CSS는 기본 스킨 CSS보다 우선순위가 높아 덮어씌워집니다. 더 강한 우선순위가 필요하다면 !important를 사용할 수 있습니다.
상단 삽입에 <link rel="stylesheet" href="CSS파일URL" /> 코드를 추가하면 됩니다. CSS 파일은 웹에 공개적으로 접근 가능한 URL이어야 합니다. GitHub, GitLab, 또는 자신의 웹호스팅을 이용해 CSS 파일을 호스팅할 수 있습니다.
미디어 쿼리를 사용하여 특정 화면 크기에서만 CSS가 적용되도록 할 수 있습니다. 예를 들어: @media (max-width: 768px) { /* 모바일용 CSS */ }
🎉 축하합니다! 이제 티스토리 CSS 무수정 커스터마이징의 모든 것을掌握하셨습니다. 지금 바로 관리자 페이지에 접속하여 여러분의 블로그를 개성 있게 꾸며보세요!
