모바일 헤더·푸터 로고 크기 바꾸기

휴대전화에서 헤더나 푸터 로고가 너무 크거나 작다면 ‘추가 CSS’로 각각 크기를 조절할 수 있습니다. 필요한 부분의 코드만 추가하면 됩니다. 기존 로고 이미지를 그대로 사용하며, PC·태블릿의 로고 크기는 유지됩니다.

시작하기 전에

관리자 계정과 현재 사용 중인 로고를 준비합니다. 추가 CSS에 내용이 있다면 전체 내용을 메모장에 복사해 보관해 주세요. 기존 코드는 지우지 않고 맨 아래에 이번 코드를 덧붙입니다.

텍스트로 표시하는 사이트 이름에는 이 예제가 적용되지 않습니다. 로고 이미지 등록부터 필요하다면 로고와 사이트 아이콘 설정하기를 먼저 확인하세요.

1. 추가 CSS 화면 열기

본인 홈페이지의 워드프레스 관리자에 로그인한 뒤 아래 순서로 이동합니다.

모양 → 사용자 정의 → 고급 설정 → 추가 CSS

워드프레스 번역에 따라 ‘모양’이 ‘외모’로, ‘사용자 정의’가 ‘사용자 정의하기’로 표시될 수 있습니다. KTheme Starter 3.0.10에서는 ‘고급 설정’ 안에 ‘추가 CSS’가 있습니다.

고급 설정 목록의 ‘추가 CSS’를 클릭합니다. 캡처는 예시 사이트의 실제 관리자 화면입니다.

왼쪽 아래의 휴대전화 모양 버튼을 눌러 모바일 미리보기를 엽니다. 먼저 현재 로고 크기를 확인합니다.

예시의 변경 전 로고 너비는 130px입니다. 사이트의 기존 설정에 따라 시작 크기는 다를 수 있습니다.

2. 모바일 헤더 로고 크기 조절하기

기존 CSS의 맨 아래에 다음 코드를 붙여 넣으세요. <style> 같은 HTML 태그는 넣지 않습니다.

/* 모바일 헤더 로고 크기 */
@media (max-width: 767.98px) {
  #header-wrapper #header-logo img.custom_logo {
    width: 160px !important;
    height: auto !important;
    max-width: calc(100vw - 104px) !important;
    max-height: 40px !important;
    object-fit: contain;
  }
}

이 예제에서는 width: 160px의 숫자 160을 바꾸면 됩니다.

코드 전체를 여러 번 붙여 넣지 말고, 이미 추가한 코드의 숫자만 수정하세요. 처음에는 10~20px씩 조정하며 확인하는 편이 쉽습니다.

• height: auto는 로고의 원래 비율을 유지합니다.
• max-height: 40px는 로고가 헤더보다 지나치게 커지는 것을 막습니다. 이미지가 세로로 긴 경우 너비를 키워도 실제 로고는 높이 제한 안에서 표시됩니다.
• max-width는 작은 화면에서 메뉴 버튼을 위한 공간을 남깁니다.
• @media 안에 있기 때문에 768px 이상 화면에는 이 예제가 적용되지 않습니다. 기기 이름이 아니라 브라우저 너비를 기준으로 동작합니다.

기존 코드를 남겨 둔 채 맨 아래에 추가했습니다. 예시 로고는 130px에서 160px로 커졌습니다.

3. 모바일 푸터 로고 크기 조절하기

페이지 맨 아래에 있는 푸터 로고도 같은 추가 CSS 화면에서 조절합니다. 모바일 미리보기 위에 마우스를 올리고 아래로 스크롤해 현재 푸터를 확인하세요.

예시의 변경 전 푸터 로고 너비는 200px입니다. 미리보기 안을 스크롤하면 페이지 맨 아래의 푸터를 확인할 수 있습니다.

기존 CSS와 헤더 코드는 남겨 두고 맨 아래에 다음 코드를 추가합니다. 푸터만 수정하려면 이 코드만 추가하세요. 헤더 코드와 푸터 코드는 각각 따로 사용할 수 있습니다.

/* 모바일 푸터 로고 크기 */
@media (max-width: 767.98px) {
  footer img.custom_logo {
    width: 160px !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 60px !important;
    object-fit: contain;
  }
}

푸터 코드의 width: 160px에서 숫자 160을 바꾸세요. 조금 작게 하려면 140px, 크게 하려면 180px처럼 10~20px씩 조절하면 됩니다. 헤더와 푸터의 숫자가 같을 필요는 없습니다.

• height: auto는 로고의 원래 비율을 유지합니다.
• max-width: 100%는 로고가 푸터의 표시 공간을 넘지 않도록 제한합니다.
• max-height: 60px는 세로로 긴 로고가 지나치게 커지는 것을 막습니다.
• 이 코드는 푸터 로고에만 적용됩니다. 헤더 로고, 푸터의 회사 정보·메뉴·글자 크기는 바꾸지 않습니다. 로고 크기에 따라 아래 내용의 위치는 조금 달라질 수 있습니다.

푸터 로고가 200px에서 160px로 줄어든 실제 화면입니다. 왼쪽의 푸터 코드와 오른쪽의 미리보기를 함께 확인하세요.

4. 크기를 확인하고 공개하기

모바일 미리보기에서 아래 항목을 확인합니다.

1. 로고가 잘리거나 가로·세로로 늘어나지 않는지 확인합니다.
2. 헤더는 오른쪽 메뉴 버튼과 로고 사이의 여백을, 푸터는 로고와 메뉴·회사 정보 사이의 여백을 확인합니다.
3. 왼쪽 아래 태블릿·데스크톱 버튼도 눌러 기존 크기가 유지되는지 확인합니다.
4. 원하는 크기가 되면 왼쪽 위 공개를 누릅니다. 저장이 완료되면 발행됨으로 표시됩니다.

미리보기에서만 확인하고 창을 닫으면 저장되지 않습니다. ‘발행됨’ 표시까지 확인하세요.

저장 후 홈페이지를 새 탭에서 열어 확인합니다. 캐시 플러그인을 사용한다면 사이트 캐시를 비우고 새로고침해 주세요. 가능하면 실제 휴대전화에서도 메뉴를 열고 닫아 보세요.

완료 확인

• 수정한 모바일 헤더·푸터 로고가 원하는 크기로 표시됩니다.
• 로고가 메뉴 버튼을 가리지 않고, 화면이 옆으로 밀리지 않습니다.
• PC·태블릿의 로고 크기는 기존과 같습니다.
• 헤더만 수정했다면 푸터 로고가, 푸터만 수정했다면 헤더 로고가 기존과 같습니다.
• 푸터의 회사 정보·메뉴 내용과 본문 이미지는 유지됩니다.

헤더 코드는 320·390·430·767px에서, 헤더·푸터 코드를 함께 사용한 경우는 320·390·767px에서 확인했습니다. 예시에서는 모바일 헤더 로고가 130px에서 160px로, 푸터 로고가 200px에서 160px로 바뀌었습니다. 768·1024·1440px에서는 두 로고의 기존 크기가 유지됐고, 모바일 헤더 높이와 메뉴 버튼 위치도 유지됐습니다. 캡처와 검증은 이미지형 로고를 쓰는 예시 헤더와 푸터 유형 1 기준입니다. 별도로 수정한 헤더·푸터나 다른 유형은 적용 결과를 다시 확인해 주세요.

원래 크기로 되돌리기

추가 CSS 화면에서 되돌릴 부분의 코드 블록만 삭제한 뒤 공개를 누릅니다. 헤더는 /* 모바일 헤더 로고 크기 */, 푸터는 /* 모바일 푸터 로고 크기 */ 주석부터 각각 마지막 두 개의 닫는 중괄호까지 삭제합니다. 두 부분을 모두 되돌리려면 두 블록을 삭제하세요. 다른 CSS는 그대로 둡니다. 작업 전 복사해 둔 원본과 비교하면 쉽게 되돌릴 수 있습니다.

자주 막히는 부분

모바일에서 크기가 바뀌지 않아요. 저장 상태가 ‘발행됨’인지, 미리보기 너비가 768px 미만인지 확인하세요. 전체 중괄호와 @media 줄을 함께 복사했는지 확인하고, 캐시를 비운 뒤 다시 봅니다.

크기를 키웠는데도 로고가 작아 보여요. 원본 이미지의 빈 여백이나 헤더 40px·푸터 60px 높이 제한 때문일 수 있습니다. 이미지에 빈 여백이 많다면 여백을 줄인 로고 파일을 다시 등록해 주세요. 헤더 높이를 넘길 만큼 크게 설정하지 않는 것이 좋습니다.

모든 화면의 로고가 바뀌었어요. @media 줄과 그에 해당하는 중괄호가 빠지지 않았는지 확인합니다. 이 안내의 코드는 블록 전체를 복사해야 모바일에만 적용됩니다.

추가 CSS 메뉴가 없어요. 테마 설정을 바꿀 수 있는 관리자 계정인지, KTheme Starter 3.0.10을 사용 중인지 확인하세요. 버전이나 테마가 다르면 메뉴 위치와 적용 코드도 다를 수 있습니다.

기존 코드와 함께 적용하는 방법은 추가 CSS를 안전하게 적용하기에서도 확인할 수 있습니다.

해결이 어렵다면 현재 로고 화면과 원하는 크기를 정리해 케이테마에 문의해 주세요. 비밀번호나 라이선스 키는 본문과 캡처에 넣지 마세요.

케이테마 문의하기