구글 블로그 본문 너비 조절과 모바일에서 줄바꿈 오류 해결 방법 - 라니와 함께하는 블로그스팟

본문 너비가 좁거나 넓게 보이는 이유

방문자의 화면 해상도에 따라 본문이 너무 좁거나 넓게 보일 수 있으며, 이미지나 표가 본문 너비를 넘을 경우 모바일에서 가독성이 떨어질 수 있습니다.

템플릿 레이아웃에서 본문 너비 조절하는 방법

.post-body {
  max-width: 760px;
  margin: 0 auto;
}

전체 콘텐츠 폭을 함께 조절하고 싶을 때

.main-outer {
  max-width: 1080px;
  margin: 0 auto;
}

모바일 최적화를 고려한 줄바꿈과 글자 크기

.post-body {
  word-break: keep-all;
  line-height: 1.8;
  font-size: 16px;
}

이미지와 표의 가로폭을 자동 조절하는 CSS

.post-body img {
  max-width: 100%;
  height: auto;
}

.post-body table {
  width: 100%;
  overflow-x: auto;
}

본문 가독성을 위한 권장 설정 정리

.post-body {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 16px;
  font-family: "Noto Sans KR", sans-serif;
  word-break: keep-all;
  color: #333;
}