슬라이딩 도어 테크닉은 이미지의 크기가 변하면 슬라이딩 도어에 해당하는 이미지의 크기도 변하게 하는 기법입니다. 메뉴바에 사용되는 슬라이딩도어 테크닉 은 CSS로 만들 수 있는데 배너에 사용되는 이미지는 제이쿼리로 가능합니다. 이곳 을 클릭하고 원작자의 사이트에서 See the Demo 버튼을 클릭하면 미리 볼 수 있고 Download 버튼을 클릭하여 파일을 다운 받을 수 있습니다. 제 블로그의 우측에 Best 9에 적용해 봤습니다.
다운로드 파일
jquery-slicing.zip원본파일을 압축을 풀면 9개의 이미지와 하나의 배경이미지가 있고 index파일이 있습니다. js폴더에는 제이쿼리 라이브러리 파일과 easing파일이 있습니다. index파일에는 제이쿼리 코드와 css코드가 있는데 블로그 사용을 위해 두가지 코드를 별도의 파일로 만들어서 참조했습니다. 제이쿼리 라이브러리는 구글을 이용하는 것이 좋습니다.
수정파일을 기준으로 설명드립니다.
<!--
<link rel="stylesheet" type="text/css" href="js/slice.css" />
<script type="text/javascript" src="js/jquery-1.3.1.min.j"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.j"></script>
<script type="text/javascript" src="js/slice.j"></script>
-->
두개의 파일을 새로 만들었으니 참조를 하도록 <head>태그 안에 위처럼 삽입하고 블로그의 경우 경로를 js에서 ./images로 바꿔준다음 4개의 파일을 업로드합니다.
<!--
두개의 파일을 새로 만들었으니 참조를 하도록 <head>태그 안에 위처럼 삽입하고 블로그의 경우 경로를 js에서 ./images로 바꿔준다음 4개의 파일을 업로드합니다.
<!--
<h2>Best 9</h2>
<div class="qitem">
<a href="http://martian36.tistory.com/453"><img src="http:/cfs.tistory.com/custom/blog/83/830653/skin/images/1.jpg" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>리터칭</h4><p>힐링브러시를 이용한 잡티제거</p></span>
</div>
<div class="qitem">
<a href="http://martian36.tistory.com/533"><img src="http:/cfs.tistory.com/custom/blog/83/830653/skin/images/2.jpg" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>사진효과</h4><p>연필스케치효과</p></span>
</div>
<div class="qitem">
<a href="http://martian36.tistory.com/411"><img src="http:/cfs.tistory.com/custom/blog/83/830653/skin/images/3.jpg" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>글자효과</h4><p>앵글그래디언트를 이용한 글자효과</p></span>
</div>
<div class="clear"></div>
<div class="qitem">
<a href="http:/martian36.tistory.com/421"><img src="http://cfs.tistory.com/custom/blog/83/830653/skin/images/4.jpg" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>포토샵액션</h4><p>폴라로이드효과액션</p></span>
</div>
<div class="qitem">
<a href="http://martian36.tistory.com/541"><img src="http://cfs.tistory.com/custom/blog/83/830653/skin/images/5.jpg" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>글자효과</h4><p>3D 글자효과</p></span>
</div>
<div class="qitem">
<a href="http:/martian36.tistory.com/460"><img src="http://cfs.tistory.com/custom/blog/83/830653/skin/images/6.jpg" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>포토샵 단축키</h4><p>반드시 알아야할 키보드 단축키</p></span>
</div>
<div class="clear"></div>
<div class="qitem">
<a href="http://martian36.tistory.com/535"><img src="http://cfs.tistory.com/custom/blog/83/830653/skin/images/7.jpg" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>사진효과</h4><p>채널을 이용한 스노우보더추출</p></span>
</div>
<div class="qitem">
<a href="http:/martian36.tistory.com/536"><img src="http://cfs.tistory.com/custom/blog/83/830653/skin/images/8.jpg" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>사진효과</h4><p>다양한 필터를 이용한 카툰효과</p></span>
</div>
<div class="qitem">
<a href="http:/martian36.tistory.com/520"><img src="http://cfs.tistory.com/custom/blog/83/830653/skin/images/9.jpg" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>글자효과</h4><p>글자로 초상화만들기</p></span>
</div>
-->
포토샵에서 이미지를 편집해서 업로드합니다. 원본과 같이 가로세로 126픽셀로 했습니다. 다른 크키로 만들면 html코드와 css에서도 수정해줍니다. 이미지의 저장 경로는 블로그를 기준으로 해서 이곳 을 참고하면 내 블로그의 이미지 저장 경로를 알 수 있습니다. 각 이미지마다 링크를 걸어주고 캡션 글자도 수정해줍니다. 위 html코드는 사이드바의 배너에 들어갈 것이므로 관리자 페이지에서 스킨-사이드바 설정으로 들어갑니다. 사이드바의 폭은 이미지가 몇개 들어갈 것인지 설정되어 있어야합니다. 아니면 이미 설정된 사이드바의 폭에 맞게 이미지를 몇개 넣을 것인지 조정해야합니다. 제 경우는 사이드바의 폭을 늘렸습니다.
사이드바의 html배너출력기나 태그입력기를 사이드바에 추가하고 편집버튼을 눌러서 위의 html코드를 복사해서 붙여넣기 하면 됩니다.
포토샵에서 이미지를 편집해서 업로드합니다. 원본과 같이 가로세로 126픽셀로 했습니다. 다른 크키로 만들면 html코드와 css에서도 수정해줍니다. 이미지의 저장 경로는 블로그를 기준으로 해서 이곳 을 참고하면 내 블로그의 이미지 저장 경로를 알 수 있습니다. 각 이미지마다 링크를 걸어주고 캡션 글자도 수정해줍니다. 위 html코드는 사이드바의 배너에 들어갈 것이므로 관리자 페이지에서 스킨-사이드바 설정으로 들어갑니다. 사이드바의 폭은 이미지가 몇개 들어갈 것인지 설정되어 있어야합니다. 아니면 이미 설정된 사이드바의 폭에 맞게 이미지를 몇개 넣을 것인지 조정해야합니다. 제 경우는 사이드바의 폭을 늘렸습니다.
사이드바의 html배너출력기나 태그입력기를 사이드바에 추가하고 편집버튼을 눌러서 위의 html코드를 복사해서 붙여넣기 하면 됩니다.
더보기
'부트스트랩.CSS.JS/JQuery' 카테고리 관련글
