블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨

목차옆 열기/닫기 버튼 자동목차

블로그 헤더의 '타이틀 로고' 크게 만들기

✚

블로그의 헤더는 방문자가 가장 먼저 시선을 두는 곳이자, 여러분의 브랜드를 가장 효과적으로 전달하는 얼굴과 같습니다. 그중에서도 타이틀 로고는 블로그의 정체성을 한눈에 보여주는 핵심 요소입니다.

혹시 지금 사용하고 계신 로고가 다소 작거나 눈에 잘 띄지 않아 아쉬움을 느끼신 적은 없으신가요?

오늘은 바로 이 고민을 해결해 줄 시간입니다! 아래 그림에서 보시는 것처럼, 블로그 헤더의 '타이틀 로고'를 기존의 크기보다 조금 더 시원하고 눈에 띄게 확대하는 방법에 대해 자세히 알아보겠습니다. 간단한 코드 수정만으로 블로그의 인상을 완전히 바꿀 수 있습니다.

📌 알림 

웹서핑을 하다 보면, 제가 만든 코드나 태그 속성, 심지어 오탈자까지 그대로 가져가 본인 글처럼 사용하는 경우가 있습니다. 코드 자체의 복사는 막을 수 없지만, 제 자료를 활용해 관련 포스팅을 작성하실 때는 반드시 출처를 명시해 주시기 바랍니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

 [📌 코드 수정 시 주의사항은 아래 '더 보기'를 참고하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경 전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, [블로그 관리자] > [꾸미기] > [스킨 변경]을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

---

헤더의 '타이틀 로고' 미리보기

☑

height: 32px >  height: 45px

728x90

Header 코드는 제 이전 글인 「'h1 태그가 2개입니다.' 문제 원인과 해결 방법」을 적용했는지 여부에 따라 코드명이 다를 수 있습니다. 따라서 해당 글을 따라 하신 분과 하지 않으신 분은 코드 이름이 조금 다를 수 있으니 참고해 주세요.

해당 방법은 북클럽 스킨의 기본적인 오류를 해결하는 내용이므로 꼭 적용하는 것을 권장합니다.

티스토리 북클럽 스킨 | "h1 태그가 2개입니다." 문제 원인과 해결 방법

---

1. 북클럽 스킨 로고 크기 변경을 위한 CSS 코드 수정

☑

북클럽 스킨에서 블로그 로고의 크기를 원하는 대로 변경하려면 티스토리 스킨 편집 메뉴에서 CSS 코드를 직접 수정해 주어야 합니다

1. CSS코드를 수정하려면 '관리자 홈'에서 꾸미기 > 스킨 편집 > html 편집 > CSS 탭으로 들어갑니다.

---

2. ctrl+F를 눌러 /* Layout Selector */를 검색합니다.

/* Layout Selector */

---

3. 아래 #header 코드에서 자신의 로고 크기를 키워 주시면 됩니다.

• 로고가 텍스트인 경우는 'font - size'의 숫자를 올려주고
• 로고가 이미지인 경우는 'height'의 숫자를 올려 주시면 됩니다.

---

「h1 태그가 2개입니다.」 적용 코드

---

「h1 태그가 2개입니다.」 미적용 코드

---

4. 마지막으로 [적용]을 클릭 후 새로고침을 하면 변경된 로고를 확인할 수 있습니다.

주의

로고 크기를 지나치게 크게 키울 경우, 모바일 화면이나 태블릿 화면에서 헤더 영역이 깨질 수 있으므로 수정 후 반드시 반응형 화면을 확인해 보시는 것이 좋습니다.

---

2. 북클럽 스킨 헤더 및 로고 상하 여백(간격) 조절 방법

☑

로고 크기를 알맞게 변경했다면, 이제 로고 위아래의 여백을 조절해 헤더 전체를 원하는 높이로 수정할 차례입니다.

---

1. CSS탭에서 ctrl+F를 눌러 /* Layout Selector */ 를 검색합니다.

/* Layout Selector */

---

2. 아래 코드에서 padding:와 line-height:의 px를 조정하면 아래위 간격과 크기를 조절할 수 있습니다.

미리 보기로 확인하면서 px를 수정하시기 바랍니다.

/* ==  설정 설명 == */
  padding: 23px 0;  /* 위아래 패딩(안쪽 여백)을 설정합니다. 상하 23px 좌우 0 */
  font-family: 'Nanum Myeongjo';
  font-weight: 800;
  font-size: 1.75em;
  line-height: 32px;  /* 텍스트 줄 간격(행간)을 설정합니다. */
  letter-spacing: -0.2px;
  color: #333;

---

「h1 태그가 2개입니다.」 적용 코드

---

「h1 태그가 2개입니다.」 미적용 코드

---

3. 마지막으로 [적용]을 클릭 후 새로고침을 하면 변경된 로고를 확인할 수 있습니다.

---

헤더의 로고에 애니메이션 효과 만들기(26.06.01 추가 팁)

☑

마우스를 올렸을 때 반응하는 로고를 만들고 싶으신가요? 이번에는 CSS 코드를 활용해 헤더 로고에 움직이는 애니메이션 효과를 추가하는 간단한 방법을 알아보겠습니다.

---

1. CSS 코드를 수정하려면 '관리자 홈'에서 꾸미기 > 스킨 편집 > html 편집 > CSS 탭으로 들어갑니다.

---

「h1 태그가 2개입니다.」 적용 코드

1. [Ctrl]+[F]를 눌러 #header .blog-header img {를 검색합니다.

#header .blog-header img {

---

2. CSS 코드를 복사 후 아래처럼 넣어줍니다.

  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
}
/* 마우스 호버 효과 추가 */
#header .blog-header img:hover {
  transform: scale(1.1); /* 애니메이션 크기 */
}

---

수정 전 height: 하단에 복사한 코드를 넣어 줍니다.

▼

수정 후

---

「h1 태그가 2개입니다.」 미적용 코드

1. [Ctrl]+[F]를 눌러 #header h1 img {를 검색합니다.

#header h1 img {

---

3. CSS 코드를 복사 후 아래처럼 넣어줍니다.

  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
}
/* 마우스 호버 효과 추가 */
#header h1 img:hover {
  transform: scale(1.1); /* 애니메이션 크기 */
}

---

수정 전 height: 하단에 복사한 코드를 넣어 줍니다.

▼

수정 후

---

3. 코드를 수정하고 [적용] 버튼을 눌러 저장한 뒤 블로그 본문으로 이동해 보세요. 헤더 로고에 마우스를 올리면(호버하면) 로고가 부드럽게 커지는 애니메이션 효과를 바로 확인할 수 있습니다.

---

마무리

☑

이렇게 간단한 CSS 수정만으로도 티스토리 북클럽 스킨의 로고 크기를 원하는 형태로 변경할 수 있습니다.

CSS는 몇 줄의 코드만 수정해도 블로그의 분위기를 크게 바꿀 수 있는 만큼, 조금씩 적용해 보면서 자신만의 개성이 담긴 블로그를 만들어 보시기 바랍니다.

제가 사용 중인 스킨은 북클럽 스킨이라 다른 스킨에서는 직접 테스트해 보지 못했습니다. 다만 상단 타이틀 영역의 구조는 대부분 비슷하기 때문에 CSS에서 /* Layout Selector */ 부분을 찾을 수 있다면 다른 스킨에서도 응용이 가능할 것으로 생각됩니다.

또한 CSS를 수정할 때는 변경한 값 옆에 /* 32px */과 같은 주석을 함께 남겨두는 것을 추천드립니다. 나중에 원래 설정으로 되돌리거나 수정 내역을 확인할 때 훨씬 편리하게 관리할 수 있습니다.

---

관련글 바로가기

☑

[티스토리 꾸미기] 북클럽 스킨 헤더의 메뉴 삭제로 깔끔한 블로그 만들기

[티스토리 꾸미기] 북클럽 스킨 헤더의 메뉴 삭제로 깔끔한 블로그 만들기

티스토리 꾸미기 | 북클럽 스킨 상단 메뉴 고정하기(CSS)

티스토리 꾸미기 | 북클럽 스킨 상단 메뉴 고정하기(CSS)

 

여러분의 공감과 댓글은 큰 힘이 됩니다.✦ 가람과 함께하는 이야기 ✦