티스토리 블로그 홈페이지형 만들기

🎯홈페이지형 블로그란?

일반적인 블로그 형태에서 벗어나 기업 홈페이지나 포트폴리오 사이트처럼 전문적이고 체계적으로 구성된 블로그를 말합니다.

📈 홈페이지형 블로그의 장점:
전문성과 신뢰도 향상
브랜딩 효과 극대화
사용자 경험(UX) 개선
검색 엔진 최적화(SEO) 향상
수익화 기회 증대

🛠️기본 설정 및 준비사항

1 스킨 선택 및 백업

기존 스킨을 백업하고, 커스터마이징이 용이한 스킨을 선택합니다.

2 HTML/CSS 편집 권한 확인

관리자 → 꾸미기 → HTML/CSS 편집에서 권한을 확인합니다.

3 사이트 구조 설계

메뉴 구성, 페이지 레이아웃, 콘텐츠 배치를 미리 계획합니다.

🎨홈페이지형 헤더 만들기

내비게이션 메뉴 구성

<!-- 홈페이지형 헤더 HTML --> <header class="homepage-header"> <div class="header-container"> <div class="logo-section"> <h1 class="site-title"> <a href="/">Your Brand Name</a> </h1> <p class="site-description">전문적인 정보를 제공하는 블로그</p> </div> <nav class="main-navigation"> <ul class="nav-menu"> <li><a href="/">홈</a></li> <li><a href="/category/blog">블로그</a></li> <li><a href="/category/portfolio">포트폴리오</a></li> <li><a href="/category/about">소개</a></li> <li><a href="/category/contact">연락처</a></li> </ul> </nav> </div> </header>

헤더 스타일링 CSS

/* 홈페이지형 헤더 CSS */ .homepage-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; } .header-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .logo-section { color: white; } .site-title { font-size: 2rem; font-weight: 700; margin: 0; } .site-title a { color: white; text-decoration: none; } .site-description { font-size: 0.9rem; opacity: 0.8; margin: 5px 0 0 0; } .nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 30px; } .nav-menu a { color: white; text-decoration: none; font-weight: 500; padding: 10px 15px; border-radius: 5px; transition: all 0.3s ease; } .nav-menu a:hover { background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); } /* 모바일 반응형 */ @media (max-width: 768px) { .header-container { flex-direction: column; gap: 20px; } .nav-menu { gap: 15px; flex-wrap: wrap; justify-content: center; } }

🏡메인 페이지 레이아웃 구성

히어로 섹션 만들기

<!-- 메인 히어로 섹션 --> <section class="hero-section"> <div class="hero-content"> <h1 class="hero-title">전문적인 정보와 인사이트를 제공합니다</h1> <p class="hero-description"> 최신 트렌드와 실용적인 팁을 통해 여러분의 성장을 돕겠습니다. </p> <div class="hero-buttons"> <a href="/category/popular" class="btn btn-primary">인기 글 보기</a> <a href="/category/latest" class="btn btn-secondary">최신 글 보기</a> </div> </div> <div class="hero-image"> <img src="hero-image.jpg" alt="메인 이미지"> </div> </section>

히어로 섹션 스타일링

/* 히어로 섹션 CSS */ .hero-section { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 80px 0; max-width: 1200px; margin: 0 auto; align-items: center; } .hero-content { padding: 0 20px; } .hero-title { font-size: 3rem; font-weight: 700; color: #2d3748; margin-bottom: 20px; line-height: 1.2; } .hero-description { font-size: 1.2rem; color: #4a5568; margin-bottom: 30px; line-height: 1.6; } .hero-buttons { display: flex; gap: 20px; } .btn { padding: 15px 30px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; display: inline-block; } .btn-primary { background: linear-gradient(45deg, #667eea, #764ba2); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); } .btn-secondary { background: transparent; color: #667eea; border: 2px solid #667eea; } .btn-secondary:hover { background: #667eea; color: white; } .hero-image img { width: 100%; height: auto; border-radius: 15px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); } @media (max-width: 768px) { .hero-section { grid-template-columns: 1fr; text-align: center; padding: 40px 20px; } .hero-title { font-size: 2.2rem; } .hero-buttons { justify-content: center; flex-direction: column; align-items: center; } }

📑콘텐츠 섹션 구성

포스트 카드 스타일링

/* 포스트 섹션 CSS */ .popular-posts-section { padding: 80px 0; background: #f8f9fa; } .section-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .section-title { font-size: 2.5rem; font-weight: 700; text-align: center; margin-bottom: 50px; color: #2d3748; } .posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .post-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; } .post-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); } .post-image { position: relative; overflow: hidden; height: 200px; } .post-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .post-card:hover .post-image img { transform: scale(1.1); } .post-content { padding: 25px; } .post-category { background: linear-gradient(45deg, #667eea, #764ba2); color: white; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; display: inline-block; margin-bottom: 15px; } .post-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; } .post-title a { color: #2d3748; text-decoration: none; transition: color 0.3s ease; } .post-title a:hover { color: #667eea; } .post-excerpt { color: #4a5568; line-height: 1.6; margin-bottom: 15px; } .post-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: #718096; }

📱모바일 최적화

💡 모바일 우선 설계: 모든 요소가 모바일에서 완벽하게 작동하도록 설계하세요.

반응형 메뉴 (햄버거 메뉴)

/* 모바일 햄버거 메뉴 CSS */ .mobile-menu-toggle { display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; } @media (max-width: 768px) { .mobile-menu-toggle { display: block; } .nav-menu { position: absolute; top: 100%; left: 0; right: 0; background: rgba(102, 126, 234, 0.95); backdrop-filter: blur(10px); flex-direction: column; padding: 20px; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all 0.3s ease; } .nav-menu.active { transform: translateY(0); opacity: 1; visibility: visible; } .nav-menu li { margin: 10px 0; } .nav-menu a { display: block; padding: 15px; text-align: center; border-radius: 8px; } }

모바일 최적화 JavaScript

// 모바일 메뉴 토글 JavaScript document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.querySelector('.mobile-menu-toggle'); const navMenu = document.querySelector('.nav-menu'); menuToggle.addEventListener('click', function() { navMenu.classList.toggle('active'); }); // 메뉴 외부 클릭 시 메뉴 닫기 document.addEventListener('click', function(e) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { navMenu.classList.remove('active'); } }); });

⚡성능 최적화 팁

🖼️ 이미지 최적화

WebP 포맷 사용
적절한 크기로 리사이징
Lazy Loading 적용
CDN 활용

🚀 로딩 속도 개선

불필요한 플러그인 제거
CSS/JS 파일 압축
브라우저 캐싱 활용
중요 콘텐츠 우선 로딩

📊 SEO 최적화

구조화된 데이터 마크업
메타 태그 최적화
내부 링크 구조 개선
사이트맵 생성

🔧고급 커스터마이징

다크 모드 구현

/* 다크 모드 CSS */ :root { --bg-color: #ffffff; --text-color: #2d3748; --card-bg: #ffffff; --border-color: #e2e8f0; } [data-theme="dark"] { --bg-color: #1a202c; --text-color: #e2e8f0; --card-bg: #2d3748; --border-color: #4a5568; } body { background-color: var(--bg-color); color: var(--text-color); transition: all 0.3s ease; } .post-card { background: var(--card-bg); border: 1px solid var(--border-color); } /* 다크 모드 토글 버튼 */ .theme-toggle { background: none; border: none; color: var(--text-color); font-size: 1.2rem; cursor: pointer; padding: 10px; border-radius: 50%; transition: all 0.3s ease; } .theme-toggle:hover { background: rgba(255,255,255,0.1); }

스크롤 애니메이션

// 스크롤 애니메이션 JavaScript function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementTop < windowHeight * 0.8) { element.classList.add('animated'); } }); } window.addEventListener('scroll', animateOnScroll); // CSS 애니메이션 클래스 .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.6s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); }

✅체크리스트

⚠️ 적용 전 주의사항:

기존 스킨 백업 필수
테스트 블로그에서 먼저 적용
모바일에서 철저한 테스트
로딩 속도 확인

티스토리연구소

티스토리 블로그 홈페이지형 만들기

🏠 티스토리 블로그 홈페이지형 만들기

🎯홈페이지형 블로그란?

🛠️기본 설정 및 준비사항

🎨홈페이지형 헤더 만들기

내비게이션 메뉴 구성

헤더 스타일링 CSS

🏡메인 페이지 레이아웃 구성

히어로 섹션 만들기

히어로 섹션 스타일링

📑콘텐츠 섹션 구성

인기 글 섹션

포스트 카드 스타일링

📱모바일 최적화

반응형 메뉴 (햄버거 메뉴)

모바일 최적화 JavaScript

⚡성능 최적화 팁

🖼️ 이미지 최적화

🚀 로딩 속도 개선

📊 SEO 최적화

🔧고급 커스터마이징

다크 모드 구현

스크롤 애니메이션

✅체크리스트

📋 홈페이지형 블로그

티스토리툴바