기본 콘텐츠로 건너뛰기

라벨이 html인 게시물 표시

구글블로그 본문 폰트 및 줄간격 변경방법

구글블로그 스킨에 있는 기본폰트가 별로네요. 영문도 그렇고 한글도 그렇고 영 맘에 안 들어서 이번에 바꿨습니다. 구글블로그 수정하는 게 티스토리보다 어렵긴 한데 포기할 정도는 아닌 거 같습니다. 📜목차 1. 폰트 꼭 바꿔야하나?      1.1. 나눔고딕폰트      1.2. Lato Font 2. 블로그스팟 폰트 변경 방법 3. 본문 폰트 줄간격 설정 1. 폰트 꼭 바꿔야하나? 물론 폰트 변경은 선택 사항입니다. 하지만 더 깔끔하고 가독성 좋은 블로그 를 위해서 폰트와 줄간격 설정이 효과가 있습니다. 1.1. 나눔고딕폰트 구글 블로그스팟의 공식스킨이나 무료스킨은 대부분 영어권에서 만들어서 그런지 한글은 기본 글꼴이 들어갑니다. 너무 무난해서 그런지 생각보다 가독성도 떨어지고 디자인도 진부하네요. 그래서 나눔고딕으로 수정하고자 합니다. 나눔고딕으로 바꾸면 영어폰트, 한글폰트 모두 나눔고딕으로 바뀝니다. 바꿔 놓고 보니 영어폰트가 또 맘에 걸리네요. 1.2. Lato Font 우리나라 글꼴을 외국 사람이 만들었다 생각해보세요. 아무래도 이상하고 낯설겠죠? 영어폰트도 마찬가지입니다. 외국사람이 우리나라에서 만든 영어폰트는 왠지 이질감을 느낀다고 합니다. 그래서 영어폰트는 영미권에서 많이 사용하는 폰트 로 바꾸고자 합니다. 구글폰트에서 살펴보니 Lato Font가 예쁘고 많이 사용하네요. 영어폰트는 라토로 확정! 2. 블로그스팟 폰트 변경 방법 제가 필요한 폰트는 나눔고딕 Nanum gothic 과 라토 Lato 폰트입니다. 구글폰트 웹사이트 오른쪽 상단에 search에서 해당 폰트를 검색하시고 + 아이콘을 눌러주세요. Google Fonts🔗 나눔고딕-폰트 다양한 한글과 영어 글꼴이 있으니 맘에 드시는 폰트 더 찾아보셔도 됩니다. 개인적으로 한글글꼴은 나눔고딕이 가장 무난한거 같습니다. 라토-폰트 ...

html/CSS 구글블로그 본문 이미지 늘어짐 현상 해결

무료 스킨을 다운받아서 사용하다 보니 이래저래 불편한점이 많네요. 특히나 구글 블로그는 직접 손대야 할 부분이 많아서 어려운 거 같습니다. 구글 블로그 제작자에게 물어봐도 대응을 안 해줍니다. 대부분 무료 스킨은 서포트를 안 해줍니다. 아쉬우면 구매하라는 것이죠. 그렇다고 포기할 제가 아니죠. 📜목차 1. 모바일에서 이미지가 늘어짐 2. 해결방법      2.1. 모바일 이미지 늘어짐 수정      2.2. 이미지 가장자리 둥글게 하기      2.3. 이미지 복사 금지 1. 모바일에서 이미지가 늘어짐 저의 문제는 모바일 화면에서 이미지가 늘어져서 나오는 것이었습니다. PC 화면에서는 괜찮은데 유독 스마트폰 화면에서는 아래 사진처럼 이미지가 너무 길쭉하게 나옵니다. 모바일에서-이미지-늘어짐 일부러 구매하라고 이런 버그를 하나씩 숨겨뒀을 거란 생각이 드네요. 찾아보니 제가 사용하고 있는 스킨의 본문 이미지의 코드는 아래와 같이 설정이 되어 있습니다. .post-body는 블로그의 본문을 뜻합니다. img는 이미지구요. 초기 설정은 너비를 100%로 하라고만 설정되어 있네요. .post-body img {max-width:100%} 2. 해결방법 이것저것 바꿔보면서 결국 성공했습니다. 최종적으로 저는 아래와 같이 수정했습니다. .post-body img {max-width:100%; height: auto; border-radius:10px; pointer-events: none;} 2.1. 모바일 이미지 늘어짐 수정 기본값에...