구글블로그 사용법: 글(포스트)안의 그림(이미지) 크기를 자동으로 일정하게 설정

차례: 블로그대시보드 > 템플릿 > 고급설정 > CSS추가에서 아래의 코드를 추가한다

블로그의 글(포스트) 안에 있는 그림의 크기가 일괄적으로 일정하게 보이도록 자동으로 축소 또는 확대되도록 하려면 아래와 같이 CSS코드를 추가하면 된다.

글란 보다 더 큰 그림을 넣으면, 그림이 글란 밖으로 나와서 보기가 좋지 않게 되는 경우에 유용한 코드이다.

블로그 방문자는 그림을 클릭하면 원래크기로 볼 수 있다.
방문자의 편리를 위해 그림속성도구의 "Caption"이나 "Properties"에 "그림을 클릭하시면 원래 크기로 볼 수 있습니다"와 같은 안내말을 넣어 줄 수도 있겠다. 안내말을 넣는 방법은 다음 글을 참조하세요 그림에 프로퍼티 설정하기 >>

1.
아래의 코드를 추가하면, 글안에 있는 모든 그림을 지정한 크기(수치)로 확대 또는 축소하여 모두 같은 크기로 표시한다. 곧, 지정한 수치보다 작은 이미지는 확대하고, 지정한 수치보다 큰 이미지는 축소한다.

[모든 그림을 지정한 크기로 확대 또는 축소]

/* Image Fix
----------------- */
.post-body img {
width: 500px;
height:auto;
}

2.
아래의 코드를 추가하면, 지정한 수치보다 큰 그림만 축소한다.
지정한 수치보다 작은 그림은 그대로 두고, 지정한 수치보다 큰 그림만 지정한 수치로 축소한다.

/* Image Fix
----------------- */
.post-body img {
max-width: 500px;
max-height:auto;
}

3.

아래의 코드를 추가하여 그림을 좀더 자세히 제어할 수 있다.

border: none;             <= 그림의 테두리를 표시하지 않게 한다
box-shadow: none;    <= 그림의 테두리 그림자선을 표시하지 않게 한다

위에서 보인 CSS코드에서는 그림의 세로크기는 가로크기에 맞춰서 자동으로 조절되도록 "height : auto"로 지정하였는데, 그림의 세로 크기도 "auto" 자리에 "500px" 등과 같이 수치로 지정을 하면 된다.

[CSS에 속성을 더 넣고, 그림의 세로를 px로 준 예]

/* Image Fix
------------------- */
.post-body img {
max-width: 500px;
max-height: 500px;
border: none;
box-shadow: none; 
}

블로그의 글 안에 있는 그림의 크기속성이 원래크기로 되어 있지 않은 그림은 위의 코드에서 지정한 수치와 약간 다르게 표시되는 것 같다. 글 안의 그림 크기속성을 변경하려면,
=> 글 작성/수정하기 창에서, 그림을 마우스로 누르면, 아래 그림과 같이 그림의 아래나 위에 그림속성도구가 표시된다.
=> 원래크기(Original size)를 눌러 그림의 크기를 원래크기로 지정한다.

코드를 템플릿디자이너에서 추가하는 방법은

=> 블로그대시보드 > 템플릿(Template) > 사용자정의(Customise) >  고급설정(Advanced) > CSS추가(Add CSS)로 이동한다.
=> 오른쪽의 입력란에 아래의 코드를 복사하여 붙여 넣고, 템플릿디자이너 오른쪽 맨 위에 있는 [블로그에 적용: Apply to Blog]를 누른다. 이 버튼을 누르면 저장도 함께 되므로, 별도의 저장버튼은 없다. 자세한 방법은 링크페이지 참조: CSS코드 추가 변경하는 방법 2가지 >>