반응형


이미지 편집기인 포토디렉터에 대한 글을 적다가 포토디렉터를 만든 사이버링크에서 동물 사진에 편집에 대한 이벤트를 10월 23일까지 한다는 사실을 알았다. 동물 사진 이벤트를 하면서 사진을 받는데, 사진을 편집 전과 후를 나타내는 갤러리를 운영하는 것을 봐 따라 해보고 싶었다. 그래서 티스토리 블로그에서 아래와 같이 따라 했다.

동물 사진 이벤트


Dogs - before, unprocessed image
Dogs - after, processed photo


위는 그림이 아니다. 사진편집 전(before)과 후(after)가 적용된 스크립트를 볼 수 있다. 나는 일반적으로 그림을 글에 삽입할 경우 보통 프레임을 만든다. 만약 네이버 블로그에서 본다면 100% 그림이다. 왜냐하면 거기에서는 그것을 할 수 없다. 스크립트를 지원하지 않기 때문이다. 예전에 네이버 블로그에서 슬라이더를 그림으로 흉내낸 것을 봤다. 네이버 블로그에서 위와 같은 것을 하지 못하니 포토샵 등으로 자주 흉내 낸다.

 


위 스크립트를 이 블로그에서 적용하는데 힘들었다. 예전처럼 스크립트만 알면 간단할 줄 알았는데, 쉽게 되지 않았다. 곰곰이 생각해보니 내 블로그가 반응형이니 스크립트가 반응형을 고려하지 않으면 안 되는 것이었다. 그래서 반응형을 고려한 스크립트를 찾아 그것을 적용했더니 됐다.



적용을 이전 에디터(구 에디터)로 설명하면 아래 그림에서 1번 HTML을 선택한 후 2번처럼 HTML, CSS, 자바스크립트를 적으면 된다. 네이버 블로그 등에서 할 수 없으니 하지 말았으면 한다. 내가 알기로 국내 블로그는 모두 안 될 것이다.




 

이 글에서는 2번 소스를 글 중간에 삽입했다. 소스를 삽입하는 위치에 따라 스크립트가 변하지 않는다. 소스가 필요한 사람은 아래 소스를 올렸으니 다운 받을 수 있다. 소스를 받은 후 이미지 주소 변경 한다. 그런 후 복사하고 글에 붙이면 된다. 위 글을 보면 티스토리 블로그 글에 하는 방법은 어렵지 않을 것 같다. 혹시나 소스에 있는 BeerSlider.css, BeerSlider.js 링크가 없어질 수 있으니 BeerSlider.zip으로 압축했으며  jQuery는 3.3.1을 사용했다. 


전 후 소스.txt

BeerSlider.zip



일반적으로 스타일시트는 <head> 태그 안에 적용하는 것으로 알고 있고 자바스트립트는 </body> 태그 위에 적용하는 것으로 안다. 나는 이 페이지에만 적용하기 위해 위와 같이 한다. 티스토리 블로그에도 <head>나 <body>에도 적용할 수 있지만 예전부터 너무 많은 스크립트로 복잡해 웬만하면 페이지에만 적용한다. <body> 태그에는 전체적으로 필요한 자바스크립트와 CSS만 적용한다.


이 글에서 티스토리 블로그의 자유성과 스크립트 삽입을 알 수 있었을 것이다.


반응형

'정보/스크립트.HTML.CSS' 관련된 글 MORE

Close 방명록
×
×