스크립트 쓰지 않고 이미지 앨범 만들기

'고정 관념을 깨라'

이 말의 의미를 느끼게 해 준 사이트가 있습니다.

http://www.cssplay.co.uk/

a 태그는 링크를 걸 때 사용합니다. 팝업 주석에도 쓰이고요.

그런데 a 태그의 새로운 쓰임을 발견했습니다.

onclick을 쓰지 않고 버튼 역할을 할 수 있는 활용법이 있었네요.

국내 유통사 중 이 방식을 사용할 수 있는 뷰어는 '교보eBook' 밖에 없습니다.

그러니 관심있는 분들이나 재미로 참고하시면 될거같아요.

이 스타일의 핵심은 아래 두개입니다.

a.thumb cite, a.thumb span {

display:none;

}

이 스타일은 이미지가 화면에 표시되지 않게 합니다. 

#img_box a.thumb:active span, #img_box a.thumb:focus span {

display:block;

position:absolute;

width:431px;

height:10px;

top: -40px;

left:5px;

padding:5px;

color:#fff;

z-index:100;

font-size:14px;

}

이 스타일은 display: none;로 숨겨놓은 이미지를 링크를 클릭하면 나타나게 합니다.

아래 샘플 파일 첨부하니 교보ebook 뷰어에서 확인해 보세요.

sample.epub