티스토리 블로그 이미지 그림자 효과 적용

티스토리 블로그 이미지 그림자 효과 적용

대부분의 블로그를 보면 흰색 바탕이 많죠.

왠만하면 깔끔한 바탕이 글 읽는데 더 효과적 이기 때문인데요.

너무 텍스트만 많다 보면 금방 지루해져서

이탈률이 급격히 증가하는 현상이 벌어집니다.

그래서, 다들 이미지 삽입을 많이 하시는데요.

그냥 이미지만 삽입 하기에는 아무래도 뭔가 밋밋해 보일때가 있습니다.

그래서, 흰색 바탕에 잘 어울리는 이미지 그림자 효과 적용에 대해 포스팅 해보겠습니다.

의외로 굉장히 간단 합니다.

관리자 > HTML/CSS > style.css 로 이동 합니다.

아래 태그를 복사합니다.

.imageblock{
    -webkit-box-shadow: 3px 3px 10px #7C7C7C;
    box-shadow: 3px 3px 10px #7C7C7C;
    }

복사한 태그를 아래와 같이 붙여 넣기 해줍니다.

이제, 그림자 효과가 적용 되었습니다.

물론, 기존에 포스팅 했던 이미지도 모조리 다 적용 됩니다.

참고로, 붙여넣기 위치는 아무곳이나 해도 상관 없습니다.

여기서, 핵심은 

box-shadow: 3px 3px 10px 0px #7C7C7C;

HTML/CSS에 대해 잘 모르시는 분들을 위해 

추가한 소스에 대해 간단히 설명을 해드릴테니,

 원하는 형태로 변경하면서 적용해보셔도 됩니다.

- 3px : 그림자 좌우 길이 (양수는 오른쪽, 음수는 왼쪽을 나타냄)

- 3px : 그림자 상하 길이 (양수는 아래쪽, 음수는 왼쪽을 나타냄)

- 10px : 그림자 흐림 효과 길이

- #7C7C7C; : rgba(0, 0, 0, 0.5) : 그림자 색상 RGB 값

위 값들을 조금씩 변경 하면서 나에게 맞는 이미지 그림자 효과 적용을 해보시기 바랍니다.

이상, 닥터울프

티스토리 블로그 이미지 그림자 효과 적용 이었습니다~