T스토리 사진에 그림자 넣어보자

다른 분들 T스토리를 보면서 따라 해보고 싶은것 들을 한번 따라 해보려고 해요. 처음으로 사진에 그림자 넣기! 사진에 그림자를 넣는것 만으로 사진이 돋보이게 되고 포스팅이 정리되는 느낌이 들었어요. 여러 포스팅을 보고 따라 해봤지만, 2011년 자료 여서 지금과는 사뭇 다른 모습이네요. 현제 HTML/CSS 에 맞게 설명 하겠습니다.

   △왼 : 그림자 없는 사진,  오 : 그림자 넣은 사진

먼저 그림자를 사용하지 않았을 때와 넣었을때 사진을 비교 해보았어요. 오른쪽 사진이 확실히 돋보이는게 보이시죠?ㅎ 블로그 전체에 적용 해서 사진 하나하나 편집하는 방법은 아직 모릅니다... 

무튼 이제 어떻게 적용하는지 방법을 알려드리겠습니다. 

 T스토리 포스팅 사진에 그림자 넣는 방법!

1. T스토리 관리 페이지로 들어갑니다.

2. HTML/CSS 편집 으로 들어갑니다.

3. 오른쪽 상단의 CSS페이지로 들어갑니다.

4. 컨트롤 + F 를 눌러 ( imageblock )를 찾아줍니다.

5. 마지막으로 imageblock 칸 안쪽에 사진과 같이 box-shadow:0px 0px 20px 3px rgba(0, 0, 0, 0.8)를 추가합니다.

6. 저장을 누른후 새로고침을 눌러 잘 적용되었는지 확인합니다.

추가로 소스에 관해 조금 설명하도록 하겠습니다.

0px : 그림자의 x축 ( 양수는 오른쪽, 음수는 왼쪽)

0px : 그림자의 y축 ( 양수는 아래쪽, 음수는 위쪽)

20px : 그림자의 흐림 효과

3px : 그림자가 시작되는 장소

rgba(0, 0, 0, 0.8) : 그림자의 색 

저도 공부하고 있는 중이라.. 몇번의 실패 후에 적용이 됬어요.. 사용하는 스킨마다 다를수도 있고, 저와 다른 화면으로 보일수도 있습니다. 그저 좋은 정보를 공유하고자 쓰는 글이며, 최대한 자세하게 적으려고 노력했어요. 혹시 몰라서 댓글주신다고 해도 저도 모를수 있답니다.. 

그럼 이만~