티스토리 한눈에 스킨에서 이미지에 그림자 효과 넣기

이 블로그는 쭈미로운 생활님이 디자인한 '한눈에' 스킨이에요. 무료스킨 중에 SEO 최적화도 잘 되어있고, 속도도 빠르고, 레이아웃도 깔끔해서 제가 참 애용하고 애정하는 스킨인데요.

 

이 스킨을 수정하려고 검색하면 딱히 정보가 많이 없더라구요. 이제 한눈에 스킨 블로그 댓글에도 더 이상 답을 안 하시길래... 알아내는 것들 위주로 작성해두려고 해요. 

 

일단 이번 글에서는 티스토리 한눈에 스킨을 사용할 때 이미지에 그림자 효과를 넣는 방법입니다.

 

이미지 그림자 효과 전후 비교

왼쪽 : 그림자효과 넣기 전, 오른쪽 : 그림자효과 넣은 후

 

이미지의 외곽부분이 흰색인 경우에 특히 더 그림자효과의 차이가 분명한데요. 왼쪽은 어디서부터 어디까지가 캡처이미지인지 잘 구분이 안되지만 오른쪽은 꾸준히 확실히 가능하죠.

 

 

그림자 효과 CSS 수정하기

위에서 아래로 순서대로 진행

 

일단 한눈에 스킨에서 그림자효과를 넣으려면 티스토리 블로그 manage 주소로 진입한 후 CSS에서 컨트롤+F로 'img'를 검색한 후 아래 내용을 추가하면 됩니다.

box-shadow: 0 3px 12px rgb(0 0 0 / 15%);

 

img를 검색하면 정말 여러가지가 검색되는데 그중에서 딱 'img'라고만 써져 있는 곳에 넣어야 합니다. 위 사진들을 참고해 주세요.

 

옆에 136 같은 번호는 제가 css를 이것저것 추가해서 기본 한눈에 스킨 번호와 다르니 내용만 참고해 주세요.

 

img {
	border-style: none;
	box-sizing: border-box;
	box-shadow: 0 3px 12px rgb(0 0 0 / 15%);
}

 

그럼 위 내용처럼 됩니다. 그리고 적용을 누른 후 새로고침해서 확인하면 적용되어 있을 겁니다.