로고 추가하기
가이드/tokii at whale2017.09.04 00:11

자신만의 로고를 추가해보세요. 방문자가 자신의 블로그를 더 기억하기 쉽습니다.
이미지 가이드라인
데스크탑과 모바일에서 같은 로고를 표시하거나 또는 각각 다른 로고를 표시할 수 있습니다.
svg
또는png
,jpg
형식의 이미지- 반응형: 최대 250X40픽셀(
logo.svg
) - 데스크탑, 모바일: 데스크탑의 경우 최대 500X200 픽셀(
logo-desktop.svg
), 모바일의 경우 최대 250X40픽셀(logo.svg
)
- 가급적이면 svg 파일을 사용해주세요. 태블릿과 모바일의 경우 데스크탑보다 해상도가 높아 흐릿하게 표시될 수 있습니다.
- png, jpg 이미지의 경우 원본 사이즈보다 2배 더 큰 이미지를 준비해주세요. 300X100픽셀의 로고의 경우 600X200픽셀의 로고를 업로드 해야 모바일에서도 선명합니다
로고 추가하기(반응형)
데스크탑과 모바일에서 같은 크기의 로고를 표시하고자 할 경우 이 가이드라인을 참고하세요.
- 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
- 파일 업로드 탭에서
logo.svg
파일을 업로드합니다. - HTML 탭으로 이동하여
<!-- site-title -->
를 검색한 뒤 다음과 같이 변경합니다.<!-- site-title --> <h1 class="site-title"> <a class="logo" href="[##_blog_link_##]"> <figure> <img src="./images/logo.svg" alt="블로그 로고"> </figure> </a> </h1> <!-- //site-title -->
Tip: svg
이미지를 사용할 경우 다음과 같은 방법으로 로고 크기를 변경할 수 있습니다.
- 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
- CSS 탭으로 이동하여 맨 아래에 다음 코드를 추가합니다.
/* 로고 크기 변경하기(svg) */ @media (min-width: 961px) { .sidebar .site-profile .site-title .logo img{ height: 50px; } }
로고 추가하기(데스크탑, 모바일)
데스크탑과 모바일에서 다른 크기의 로고를 표시하고자 할 경우 이 가이드라인을 참고하세요.
- 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
- 파일 업로드 탭에서
logo-desktop.svg
,logo.svg
파일을 업로드합니다. - HTML 탭으로 이동하여
<!-- site-title -->
를 검색한 뒤 다음과 같이 변경합니다.<!-- site-title --> <h1 class="site-title"> <a class="logo" href="[##_blog_link_##]"> <figure> <img class="desktop" src="./images/logo-desktop.svg" alt="데스크탑 로고"> <img class="mobile" src="./images/logo.svg" alt="모바일 로고"> </figure> </a> </h1> <!-- //site-title -->
Tip: 데스크탑에서 고해상도 기기를 위해 2~3배 더 큰 png
, jpg
이미지를 사용할 경우 반응형 로고와 달리 자동으로 사이즈가 변하지 않아 크게 표시될 수 있습니다. 다음 가이드를 참고하세요.
- 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
- CSS 탭으로 이동하여 맨 아래에 다음 코드를 추가합니다.
/* 로고 크기 변경하기(png, jpg) */ @media (min-width: 961px) { .sidebar .site-profile .site-title .logo img.desktop { height: 50px; } }
- 2배 더 크게 제작된 로고 이미지의 세로길이의 절반값을
max-height
에 입력해줍니다.(50px
) - 이와 같이 로고를 설정하면 고해상도 기기 및 4K 모니터에서도 선명한 로고를 보실 수 있습니다.
- 2배 더 크게 제작된 로고 이미지의 세로길이의 절반값을
네이버톡톡
댓글 영역