ai자동화 복붙코딩 입니다. 블로그 포스트를 작성하다 보면 여러 이미지를 첨부하게 되는데, 각기 다른 크기의 이미지가 포스트 안에 뒤섞이면 전체적인 글의 가독성이 떨어지고, 디자인적으로도 조화롭지 못한 인상을 주게 됩니다. 특히 블로그 방문자에게 신뢰감을 주려면, 콘텐츠뿐 아니라 시각적인 요소도 정돈되어야 하죠.
.png "이미지 크기 자동 조절")
이번 글에서는 구글블로그에 올리는 모든 이미지의 가로폭을 자동으로 620픽셀로 정렬하고, 디자인적인 미려함까지 더할 수 있는 CSS 코드 설정법을 소개합니다. 누구나 손쉽게 설정할 수 있도록 단계별로 설명드릴게요.
모든 포스트 이미지의 크기를 자동으로 정렬하는 CSS 코드
아래는 최종적으로 설정할 CSS 코드입니다. 이 코드를 적용하면, 글 안에 있는 모든 이미지의 가로폭이 620픽셀로 고정되며, 블로그 전체적으로 통일감 있는 이미지를 제공합니다.
/* 포스팅 일괄 이미지 가로폭 620 고정 */
.post-body img {
width: 620px;
max-width: 100%;
height: auto;
display: block;
margin: 30px auto;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.12);
}
설명
width: 620px; → 모든 이미지의 기본 가로 길이를 620픽셀로 고정합니다.max-width: 100%; → 모바일 등 작은 화면에서 이미지가 글 영역을 넘지 않게 합니다.height: auto; → 원본 비율을 유지하면서 세로 길이를 자동으로 조절합니다.display: block; & margin: 30px auto; → 이미지가 본문 가운데 정렬되고, 위아래에 여백을 줍니다.box-shadow → 이미지에 살짝 음영을 주어 입체감을 더해줍니다.
CSS 코드 적용 방법 1 (구글블로그 기준)
CSS를 적용하려면, 구글블로그의 템플릿 편집기를 통해 직접 코드를 추가해야 합니다. 아래 절차에 따라 진행하세요.
-
블로그 대시보드에 로그인합니다.
-
왼쪽 메뉴에서 **‘테마’**를 클릭하고, 상단의 ‘사용자 지정’ 버튼을 클릭합니다.
-
상단 메뉴에서 ‘고급’ → ‘추가 CSS’ 항목으로 이동합니다.
-
오른쪽 입력란에 위 CSS 코드를 그대로 복사해 붙여 넣습니다.
-
완료되면 오른쪽 상단의 ‘블로그에 적용’ 버튼을 클릭합니다.
저장이 따로 필요 없으며, ‘블로그에 적용’을 누르는 순간 바로 반영됩니다.
추가로 아래 방법으로도 CSS 코드 적용 가능 합니다. 저는 아래 방법으로 적용 했습니다.
CSS 코드 적용 방법 2
- 블로그스팟 관리자로 들어가 ‘테마’를 클릭합니다.
- ‘맞춤설정’ 옆의 ▼ 버튼을 눌러 ‘HTML 편집’에 들어갑니다.
- HTML 소스에서 Ctrl + F 키를 누른 후 ‘</style>을 검색합니다.
- 찾은 태그 바로 위에 복사한 CSS 스타일 코드를 붙여넣습니다.
- 우측 상단에 있는 ‘저장’을 클릭하면 CSS 설정은 끝입니다.
실제 HTML 구조에서의 적용 예시
아래와 같이 포스트에 삽입된 이미지가 있다고 가정해보겠습니다.
<div class="separator" style="text-align: center;">
<img src="https://example.com/sample.jpg" width="640" height="480" />
</div>
이 경우에도 위 CSS가 적용되면 다음과 같은 효과가 발생합니다:
- 원래
width="640"이더라도 CSS가 우선 적용되어 620px로 조정됩니다. - 세로는 비율에 따라 자동 계산되며, 모든 이미지가 가운데 정렬되고, 아래쪽에 여백과 그림자가 생깁니다.
- 단, HTML에
width,height속성이 인라인으로 강하게 지정되어 있는 경우, CSS 적용이 무시될 수 있으므로 이런 경우엔 해당 속성을 삭제하거나 CSS에!important를 추가해줘야 합니다.
.post-body img {
width: 620px !important;
height: auto !important;
}
리뷰를 마치며
블로그는 단순히 정보를 전달하는 수단을 넘어, 콘텐츠를 얼마나 정돈되고 읽기 쉽게 보여주는지도 중요한 요소입니다. 이미지 크기가 통일되지 않으면 시각적인 불편함이 생기고, 독자의 이탈률도 증가하게 됩니다.
이번에 소개한 CSS 설정을 적용하면, 본문 속 이미지가 자동으로 일정한 크기로 표시되어 보다 정돈된 블로그 디자인을 구현할 수 있습니다. 여기에 세련된 그림자 효과까지 더해져, 전문적인 블로그로의 인상을 한층 끌어올릴 수 있습니다.
포스트를 더욱 품격 있게 정리하고 싶다면 지금 바로 CSS를 적용해 보세요. 변화는 바로 나타납니다! 💡 - ai자동화 복붙코딩
.png&description=구글 블로그 포스트 속 이미지 크기 자동 조절하는 방법, ai자동화 복붙코딩){kind=link}