티스토리 Letter 스킨 이미지 그림자 효과 추가

안녕하세요.

이번 포스팅에서는 블로그 본문에 포함된 그림의 테두리에 그림자 효과를 추가해보겠습니다. 스킨마다 편집해야 할 부분이 상이하여, 우선 Letter 스킨 기준으로 설명드리겠습니다.

포스팅 본문에 추가하는 이미지의 배경이 어두운 경우 이미지의 구분을 확실히 할 수 있고, 본문 글과 명확히 차이가 나서 글과 이미지 모두 집중하기 좋습니다. 하지만 이미지의 배경이 흰색일 경우 그림의 여백이 많아 보이고 본문 글과 구분도 힘들어집니다. 만약 이미지 테두리에 그림자가 표현된다면 흰색 배경의 이미지라도 본문 글과 확실히 구분됩니다.

위의 그림은 흰색 이미지가 추가된 포스팅 본문의 기본 화면입니다. 이처럼 그림의 배경의 흰색일 경우 이미지와 본문 글 사이의 여백이 너무 커 보입니다. 이제 여기에 그림자 속성을 추가해보겠습니다.

티스토리 HTML 편집기에서 CSS 창으로 들어갑니다. 그리고 찾기(Ctril+F)로 img를 찾으면 위의 그림과 같이 24행부터 이미지의 CSS 속성이 시작됩니다. 여기에 box-shadow: 5px 5px 5px 5px black; 을 추가하고 적용을 클릭합니다. 

블로그 화면을 새로 고침 해보면 위의 그림과 같이 이미지 테두리에 그림자가 추가된 것을 확인할 수 있습니다. 이제 포스팅 본문에 포함된 모든 이미지들의 테두리에 그림자가 추가되었습니다.

box-shadow : 5px 5px 5px 5px black;은 제가 임의로 값을 정하여 추가하였으므로, 개인 취향에 맞게 값들을 조정하여 사용하시면 됩니다. 그림자 추가를 위해 사용한 box-shadow 속성 값들은 의미는 아래와 같습니다.

예시) box-shadow : 1px 2px 3px 4px black;

1) 첫 번째 값 1px : 그림자의 수평 오프셋 값으로 양수는 오른쪽, 음수는 왼쪽에 그림자를 만듭니다.

2) 두 번째 값 2px : 그림자의 수직 오프셋 값으로 양수는 아래쪽, 음수는 위쪽에 그림자를 만듭니다.

3) 세 번째 값 3px : 그림자의 흐림 정도이며 값이 커질수록 그림자 효과가 부드럽게 됩니다.

4) 네 번째 값 4px : 그림자의 번짐 정도이며 양수는 모든 방향 퍼져나가게, 음수는 모든 방향으로 축소되어 보입니다.

5) 다섯 번째 값 black : 그림자의 색상을 나타냅니다.

Letter 스킨 기준으로 설명드렸지만, 대부분의 스킨의 CSS 속성에서 찾기(Ctrl+F)로 img를 검색하면 몇 가지 속성이 나오게 됩니다. 찾은 속성들을 하나씩 편집하다 보면 본문 이미지에 그림자가 생기게 됩니다. CSS에 포함된 img 속성은 많이 없기에 찾기 어렵지 않을 것입니다.

예를 들어 반응형 #2 스킨에서는 img로 검색하다 보면 ".area_view img"를 찾을 수 있습니다. 여기에 그림자 속성 값을 추가하면 본문 이미지에 그림자가 추가됩니다.

 

행복한 하루 보내세요.

감사합니다.