티스토리 스킨, 이미지 테두리에 그림자 넣기
블로그 포스팅을 하다보면 이미지를 돋보이게 하기 위해 테두리를 넣는 분들이 있습니다. 포토샵이나 포토스케이프 등의 프로그램을 활용해 간단히 테두리를 넣을 수도 있겠지만, 이미지 태그의 style 속성을 변경하거나 스킨의 이미지 관련 CSS를 수정해서 간단히 변경할 수 있습니다.
네이버 블로그는 스킨을 수정할 수 없지만, 티스토리 블로그는 스킨 수정이 가능하므로 간단히 CSS를 수정해 블로그 전체 이미지에 원하는 효과를 줄 수 있는 장점이 있습니다. 네이버 블로거분들은 글을 쓸 때마다 편집해줘야 하므로... 아마 귀찮아서 설정하지 않으실 것 같네요 ^^;
티스토리 블로그 스킨 수정을 통해 이미지 테두리에 그림자 효과를 주는 방법을 소개하기 전에 잠시 샘플 이미지를 보시겠습니다.
▲ 원본 이미지
▲ style 수정하여 이미지 테두리에 그림자 넣은 샘플 이미지
▲ 이미지 테두리에 그림자 넣은 샘플 이미지 두 번째
테두리가 적용된 이미지는 프로그램을 이용한 것이 아니라 소스를 수정해서 적용한 것입니다. 스킨을 수정하면 블로그 전체글에 동시 적용할 수 있으므로 그 방법을 알려드릴게요.
■ 티스토리 블로그 스킨 편집으로 이미지 테두리에 그림자 효과 넣는 방법
1. 티스토리 관리자 화면으로 이동합니다.
2. 꾸미기 > HTML/CSS 편집 메뉴를 선택합니다.
3. '.imageblock' 을 찾아 아래 소스를 추가해줍니다. 만약 사용하는 스킨에 해당 태그가 없다면 위 이미지에 제가 작성해둔 것처럼 내용을 그대로 추가해주시면 됩니다.
box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.5)
4. 저장버튼을 누르고 확인해보면 블로그에 삽입한 모든 이미지 테두리에 그림자 효과가 적용된 것을 확인하실 수 있습니다. 굉장히 간단하죠?
HTML/CSS에 대해 잘 모르시는 분들을 위해 추가한 소스에 대해 간단히 설명을 해드릴테니, 원하는 형태로 변경하면서 적용해보셔도 됩니다.
- 0px : 그림자 좌우 길이 (양수는 오른쪽, 음수는 왼쪽을 나타냄)
- 5px : 그림자 상하 길이 (양수는 아래쪽, 음수는 왼쪽을 나타냄)
- 20px : 그림자 흐림 효과 길이
- rgba(0, 0, 0, 0.5) : 그림자 색상 RGB 값
HTML의 이미지 스타일을 변경해주는 방식이므로 티스토리 블로그 뿐만 아니라 HTML 소스를 수정할 수 있는 그 어떤 곳에든 적용할 수 있는 방법입니다. 일반 웹사이트, 카페, 블로그, 모두 가능하다는 뜻이죠. 네이버 블로거분들께서 사용하고 싶으면 삽입한 이미지에 style 태그를 추가해 위 소스를 하나씩 추가해주시면 됩니다. (메모장에 넣어서 한 번에 변경해도 되겠죠?)
티스토리 블로거분들 중, 스킨 수정을 통해 이미지 테두리에 그림자 효과를 넣고자하시는 분들에게 도움되는 정보였으면 합니다. 다른 블로그 돌아다니다가 '이 스킨의 이 효과는 어떻게 수정하면 되나요?' 라는 의문이 있는 분들은 언제든 편하게 댓글 남겨주세요. 시리즈 형태로 간간히 리뷰해드릴게요 ^^
이상, 하늘다래였습니다. Seeit!