티스토리 블로그 이미지 그림자 효과 주기

Photo by Steve Halama on Unsplash

이미지 그림자 효과

이미지에 box-shadow CSS 속성을 적용하여 테두리에 그림자 효과를 줄 수 있습니다. 티스토리 블로그 에디터에서 이미지에 효과를 줄 수는 없기 때문에 스킨의 CSS를 수정하거나 스킨에 Javascript 코드를 삽입하는 방법으로 이미지에 그림자 효과를 줄 수 있습니다.

CSS box-shadow 속성

CSS box-shadow 속성의 문법은 다음과 같습니다.

box-shadow: h-offset v-offset blur spread color

h-offset 과 v-offset 은 필수로 지정해야 하는 속성 값이고 나머지 속성 값은 생략이 가능합니다.

Value	Description
h-offset	그림자의 수평 위치 설정. 음수로 설정하면 왼쪽으로 이동시킵니다. (필수)
v-offset	그림자의 수직 위치 설정. 음수로 설정하면 위로 이동시킵니다. (필수)
blur	흐림 설정. 숫자를 크게 설정할수록 그림자가 흐려집니다.
spread	확산 설정. 양의 값은 그림자의 크기를 증가시키고 음수로 설정시 줄어듭니다.
color	그림자 색. 지정하지 않으면 Text 색상으로 적용됩니다.

CSS box-shadow 예제

box-shadow: 10px 10px grey;

box-shadow: 20px 20px 10px grey;

box-shadow: 20px 20px 50px 15px grey;

box-shadow: 20px 20px 20px 10px blue;

스킨 편집 : HTML 모드

블로그 본문에 삽입된 이미지에 box-shaodw 효과를 주기 위해 블로그 관리자 페이지에서 스킨 편집 메뉴로 이동하여 HTML 수정 모드를 실행합니다. HTML 수정 모드에서 상단의 CSS 탭을 클릭하면 스킨의 CSS 파일을 수정할 수 있습니다.

 

스킨 HTML 편집 모드로 이동

CSS 편집 탭으로 이동해서 소스 맨 하단에 추가

 

CSS 파일의 맨 아래에 본문에 삽입된 img 태그에 대해 box-shadow CSS 속성을 추가합니다. 적용 버튼을 눌러 변경사항을 저장하고 페이지를 새로고침 하여 정상적으로 적용되었는지 확인합니다.

/* 본문 이미지 그림자 넣기 */
div.entry-content img {
    box-shadow: 4px 4px 2px #eee;
}

우측은 box-shadow 를 적용한 이미지

응용하여 본문 내 모든 이미지에 border 속성으로 테두리를 지정할 수 도 있습니다.

/* 본문 이미지 테두리 주기 */
div.entry-content img {
    border: 1px solid #eee;
}

왼쪽은 이미지에 테두리를 설정

 

페이지 단위로 적용하기

스킨 편집은 블로그 글 전체 이미지에 일괄로 적용이 됩니다. 페이지 단위로 적용을 제어하고 싶다면 스킨의 CSS 편집 대신 javascript 를 이용하여 동적으로 처리할 수 있습니다. 적용 대상 페이지에 아래 스크립트 코드를 삽입하여 본문 내 이미지의 스타일을 동적으로 수정할 수 있습니다.

 

// 본문 내 모든 이미지에 border 스타일 지정
document.querySelectorAll('div.entry-content img')
    .forEach(function(el) { el.style.border = '1px solid #eee'; })

 

현재 보고 게신 페이지는 위의 스크립트를 본문에 삽입한 상태 입니다. 글 편집기에서 에디터를 HTML 모드로 변경하면 javascript 코드 블럭을 삽입할 수 있습니다. 

 

본문 내 스크립트 코드 삽입