동물 사진 이벤트
위는 그림이 아니다. 사진편집 전(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만 적용한다.
이 글에서 티스토리 블로그의 자유성과 스크립트 삽입을 알 수 있었을 것이다.
'IT.인터넷.생활 관련 > 스크립트.HTML.CSS' 카테고리의 다른 글
| 에디터에서 태그 일부 및 전체 없어지는 것 (0) | 2022.02.28 |
|---|---|
| 유튜브로 동영상 배경 만들기 (0) | 2021.02.25 |
| CSS로 이미지 부드럽게 확대하기 (0) | 2020.07.03 |
| JSFiddle에서 CodePen으로 (0) | 2019.10.14 |
| 폰트아이콘 사용 (0) | 2018.11.28 |
| 유튜브 동영상 배경에 나타내기 (0) | 2018.09.03 |
| 해결책은 jsfiddle 삽입이다. (0) | 2018.05.21 |
| jqeury 클래스추가 유용한 것 같다. (0) | 2017.09.15 |
