Loekohc

그림을 넣을 때마다 은은한 그림자를 넣기 위해
파워포인트에다가 그림을 불러와서 그림자 효과를 준 다음 png 파일로 변경해서 저장하는 뻘짓을 반복했었는데,

기왕 css 를 건드린 김에 관련된 태그가 없는지 찾아보았더니 떡하니 있었다.

tistory에서는 해당 부분을 style.css 파일의 해당 부분에 지정해주면 된다.

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

여기서

box-shdow: 3px 3px 10px

의 의미는 그림자의 x축, y축 으로 떨어진 양과 blur 하는 만큼양을 나타낸다. 나는 쨍한 그림자 보다는 부드러운 그림자를 원했으므로 blur 수치를 10px 로 넉넉하게 주었다.

그냥 img 태그의 스타일을 수정해 버리면 블로그에 들어가는 모든 이미지들에 그림자가 생겨서 이상해지니 명심할 것.
그리고 entry태그 안에 있는 img 에만 적용시키려 하더라도,
메인 이미지 외의 다른 이미지들이 모두 그림자가 적용된다. 예를 들면,
티스토리 블로그 내의 저작권 관련 이미지라거나 책/영화 같은 메타정보를 불러왔을 때의 이미지까지 말이다.

무튼 그래서 저기 위에 블로그 스킨에 그림이라고 친절하게 명시되어 있는 부분만 스타일을 적용해 주었더니 한결 좋다.

이제 뻘짓이 줄었구나.

예전에 작업해서 올린 그림들에 이중 그림자가 생긴 건 함정.

엄청 heavy하게 markdown language 를 사용하는 것은 아니지만
그래도 이 기능 저 기능을 쓰면서 블로그에 올릴 글들을 먼저 적는 편이다.

그런데 인용구 (blockquote) 부분이 마음에 안드는 거다.
생각보다 자주 쓰는데 말이다.

그래서 CSS blockquote 를 구글에 검색해서 마음에 드는 놈으로 적용시켰다.

역시 구글이 사수.

Tistory의 style.css 파일에서 인용구와 관련된 부분을 찾아 바꾸어 주었다.

사용된 css 코드는 아래와 같다.

/* 본문 - 인용구 */
.entry blockquote {
  width: 90%;
  font-weight: bold;
  background: #D8D8D8;
  border-left: 10px solid #FF8224;
  border-right: 10px solid #FF8224;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

.entry blockquote:before {
  color: #FF8224;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}

.entry blockquote p {
  display: inline;
}

적용 모습은 이렇다.

색이며 글꼴이며 마음에 들어서 한동안 이 걸로 쓰지 않을까 싶다.