HTML & CSS로 티스토리 북클럽 스킨 블로그 로고 & 헤더 디자인하기

티스토리 블로그를 운영과 관련된 여러 포스팅 글을 보니 로고와 헤더(Header)는 블로그의 첫인상을 결정하는 중요한 요소라고 합니다. 북클럽 스킨을 사용하는 경우, 기본 제공되는 헤더 디자인이 깔끔하지만, 브랜드 개성을 살리기 위해 직접 커스터마이징 하는 것이 좋습니다. 이번 글에서는 HTML & CSS를 활용해 티스토리 블로그의 로고 및 헤더 디자인을 수정하는 방법을 북클럽 스킨을 기준으로 정리해 보았습니다.

1. 티스토리 블로그 로고 & 헤더 디자인의 중요성

로고와 헤더는 블로그의 아이덴티티를 표현하는 핵심 디자인 요소입니다. 방문자가 처음 블로그에 들어왔을 때 가장 먼저 보이는 영역이므로, 직관적이고 깔끔한 디자인을 유지하는 것이 중요합니다.

로고 & 헤더 디자인을 수정하는 이유

✅ 블로그 브랜드 아이덴티티 강화 – 고유한 로고 및 컬러 사용
✅ 사용자 경험(UX) 개선 – 탐색이 편리한 헤더 구조 제공
✅ SEO 최적화 – 검색엔진이 헤더 정보를 쉽게 인식하도록 구성
✅ 반응형 디자인 적용 – 모바일 & 태블릿에서도 보기 좋은 구조 유지

2. 티스토리 북클럽 스킨에서 로고 & 헤더 수정하기

북클럽 스킨의 기본 헤더는 심플한 스타일로 제공되지만, HTML & CSS를 수정하면 더욱 개성 있는 디자인을 적용할 수 있습니다.

1) HTML 스킨 편집 모드 진입 방법

1. 티스토리 관리자 페이지 접속
2. 꾸미기 → 스킨 편집 클릭
3. HTML 편집 버튼 선택
4. <header> 및 <nav> 태그를 찾아 수정

💡 수정 전 원본 백업 필수!

• 기존 코드를 저장해 두면 디자인이 깨졌을 때 복원 가능

3. 블로그 로고 변경하기

북클럽 스킨에서는 기본적으로 텍스트 형태의 블로그 제목이 헤더에 표시됩니다.
이를 이미지 로고로 변경하려면 HTML을 수정해야 합니다.

1) HTML 코드 수정 – 이미지 로고 삽입

아래 코드에서 텍스트 제목 대신 이미지 로고를 넣는 방식으로 변경할 수 있습니다.

✅ HTML 코드 – 로고 삽입

<header class="blog-header">
  <a href="/" class="logo">
    <img src="https://yourimage.com/logo.png" alt="블로그 로고">
  </a>
</header>

💡 설명:

• <a href="/"> → 로고 클릭 시 홈으로 이동하도록 설정
• <img src="로고 이미지 URL"> → 로고 이미지의 삽입 웹주소를 넣어주세요.
• alt="블로그 로고" → SEO 최적화를 위해 로고 설명 추가

2) CSS 코드 – 로고 크기 및 위치 조정

✅ CSS 코드 – 로고 크기 조절

.logo img {
  width: 180px;
  height: auto;
}

💡 활용 팁:

• width 값을 변경하여 로고 크기 조절
• height: auto;를 적용하면 비율이 깨지지 않도록 유지

✅ CSS 코드 – 로고 중앙 정렬

.blog-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #f8f9fa;
}

💡 적용 결과:

• 로고가 헤더의 중앙에 배치됨
• 배경 색상(background)을 변경하여 블로그 분위기에 맞출 수 있음

4. 헤더 디자인 수정하기

로고 외에도 헤더의 전체적인 디자인을 조정하여, 더 직관적인 탐색 구조를 만들 수 있습니다.

1) HTML 코드 수정 – 내비게이션 바 추가

✅ HTML 코드 – 헤더에 내비게이션 바 추가

<header class="blog-header">
  <a href="/" class="logo">
    <img src="https://yourimage.com/logo.png" alt="블로그 로고">
  </a>
  <nav class="blog-nav">
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/category/review">리뷰</a></li>
      <li><a href="/category/guide">가이드</a></li>
      <li><a href="/contact">문의하기</a></li>
    </ul>
  </nav>
</header>

💡 설명:

• <nav class="blog-nav"> → 헤더에 내비게이션 바 추가
• <ul> 리스트를 활용해 메뉴 구성

2) CSS 코드 – 네비게이션 바 스타일 수정

✅ CSS 코드 – 네비게이션 바 스타일 적용

.blog-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
}
.blog-nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 10px;
}
.blog-nav a:hover {
  color: #007bff;
}

💡 활용 팁:

• display: flex;를 사용해 가로형 메뉴 스타일 적용
• hover 효과를 추가하여 마우스를 올리면 색상이 변경되도록 설정

5. 반응형 헤더 디자인 적용

모바일에서도 로고와 헤더가 잘 보이도록 최적화해야 합니다.
CSS 미디어쿼리(Media Query)를 활용해 반응형 헤더를 적용할 수 있습니다.

✅ CSS 코드 – 모바일 최적화

@media screen and (max-width: 768px) {
  .blog-header {
    flex-direction: column;
    height: auto;
    padding: 10px 0;
  }
  .blog-nav ul {
    flex-direction: column;
    gap: 10px;
  }
}

💡 적용 결과:

• 모바일에서는 네비게이션 바가 세로로 표시
• 헤더 높이가 자동 조절되어 모바일 화면에서도 깔끔하게 보임

6. SEO & UX 최적화를 위한 헤더 디자인 팁

✅ SEO 최적화를 위해 로고 이미지에 alt 속성 추가
✅ 사용자 경험(UX)을 고려해 간결한 헤더 디자인 적용
✅ 메뉴를 4~5개로 구성하여 복잡하지 않게 유지
✅ 반응형 디자인을 적용하여 모바일에서도 최적화

마무리

이번 글에서는 HTML & CSS를 활용해 티스토리 블로그의 로고 및 헤더 디자인을 수정하는 방법을 정리해 보았습니다. 내일부터는 꽃샘추위로 추워진다고 하네요. 다들 옷 따뜻하게 입고 다니세요. 그럼 이만 줄입니다. 즐거운 하루되세요.

✅ HTML 코드 수정으로 이미지 로고 적용
✅ CSS를 활용해 로고 크기 & 위치 조정
✅ 내비게이션 바 추가 및 스타일 최적화
✅ 반응형 디자인 적용하여 모바일에서도 보기 좋게 수정
✅ SEO & UX를 고려한 디자인 최적화

 

• <1편> 티스토리 HTML 편집하는 방법 – 초보자 가이드
• <2편> 티스토리 HTML 커스터마이징 실전 팁 – 고급 활용법
• <3편> 티스토리 블로그 HTML 코드 삽입하는 3가지 방법 – 북클럽 스킨 기준
• <4편>; HTML 코드로 티스토리 커스텀 사이드바 추가 & 메뉴 수정하기 – 북클럽 스킨 기준
• <5편> HTML & CSS로 티스토리 글을 예쁘게 꾸미는 법
• <6편> 티스토리 HTML 배너 넣는 법 –북클럽 스킨 블로그 디자인 활용하기
• <7편> HTML 기본 태그로 티스토리 글쓰기
• <8편> 티스토리 북클럽 스킨에서 반응형 스킨 적용하는 법 – HTML & CSS 활용하기
• <9편> 티스토리 북클럽 스킨 HTML 스킨 편집 – 직접 수정하기
• <10편> HTML & CSS로 티스토리 모바일 최적화하는 방법