구글블로그 사용법: 그림 이미지의 테두리와 그림자(shadows) 꾸미기와 숨기는 방법

구글 블로그의 템플릿에는 그림에 테두리와 그림자효과를 주고 있다.
블로그의 모양새와 꾸밈새에 따라  테두리와 그림자가 있는 것이 잘 어울릴 수도 있고 그렇지 않을 수도 있다. 잘 어울리지 않는다면, 아래의 CSS코드를 추가하여 설정을 변경함으로써 테두리와 그림자를 꾸밀수 도 있고 아예 없앨 수 있다. (CSS코드를 추가하는 방법은 링크페이지 참조)

1. 블로그 원래  설정 상태의 모습과 코드
그림에 은색 테두리와 그림자를 볼 수 있다.

[블로그의 원래 상태의 코드 모양]

.post-body img,
.post-body .tr-caption-container,
.Profile img,
.Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

2. 설정을 변경한 모습과 코드(꾸미기)

[위 그림과 같이 되도록 설정을 변경한 코드 모양]

.post-body img,
.post-body .tr-caption-container,
.Profile img,
.Image img,
.BlogList .item-thumbnail img {
padding: 30px;
background: #FC9E4D;
border: 10px dashed silver;
-moz-box-shadow: 20px 20px 100px rgba(109, 146, 15, .9);
-webkit-box-shadow: 20px 20px 100px rgba(109, 146, 15, .9);
box-shadow: 20px 20px 100px rgba(109, 146, 15, .9);
}

< 꾸미거나 없앨 이미지 지정 코드>
.post-body img  <= 글 본문의 이미지 자체를 지정
.post-body .tr-caption-container  <= 글 본문의 이미지 테두리를 지정
.Profile img  <= 프로필 가젯의 이미지를 지정
.Image img
.BlogList .item-thumbnail img  <= 블로그 리스트 가젯의 썸네일 이미지를 지정
=> 테두리와 이미지를 꾸미거나 없앨 항목만 CSS 코드로 추가하면 됨

<설정 항목 코드>
padding: 30px;  <= 이미지와 테두리 간격을 지정
background: #FC9E4D;  <= 테두리 배경색을 지정 (배경에 다른 그림을 넣을 수도 있음)
border: 10px dashed silver;  <= 테두리의 굵기 종류 색상을 지정
-moz-box-shadow: 20px 20px 100px rgba(109, 146, 15, .9);
-webkit-box-shadow: 20px 20px 100px rgba(109, 146, 15, .9);
box-shadow: 20px 20px 100px rgba(109, 146, 15, .9);  <= 테두리 상자의 그림자를 지정
=> 꾸미거나 없앨 항목만 CSS 코드에 추가하고 잘 어울리게 조정하면 됨


3. 테두리와 그림자를 없앤 모습
그림에 테두리와 그림자가 표시되지 않아 그림만 말끔하게 보인다.

[ 테두리와 그림자를 표시되지 않게 설정한 코드 모양]

.post-body img,
.post-body .tr-caption-container,
.Profile img,
.Image img,
.BlogList .item-thumbnail img {
padding: 0px;
background: transparent;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

ㅇ background를 transparent (투명) 또는 none (표시않함) 또는 다른 그림을 넣을 수 있음