NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


CSS를 사용한 썸네일 크게 보기.

본문 건너 뛰기

어제 지인 한 분이 CSS만을 사용해서 썸네일을 크게 볼 수 있는 기능 구현 가능한지를 묻더라구요. 그래서 아래와 같이 구현해 봤습니다.

예제를 새 창에서 보기. 소스 코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html lang=”ko”>
<head>
<meta charset=”utf-8″>
<title>CSS를 사용한 썸네일 크게 보기.</title>
<style>
body{margin:0}
#preview{position:relative;width:600px;border:1px solid #ccc;border-left:0;border-right:0}
#preview img{display:block;border:0;zoom:1}
#preview ul{margin:420px 0 10px 0;padding:0;list-style:none;zoom:1}
#preview ul:after{content:””;display:block;clear:both}
#preview li{float:left;padding:0 14px;margin:0 -1px 0 0;border:1px dotted #ccc;border-top:0;border-bottom:0}
#preview a{display:block}
#preview .full{opacity:0;filter:alpha(opacity=0);position:absolute;top:10px;left:0;cursor:default;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s}
#preview li:first-child .full,
#preview a:hover + .full,
#preview a:active + .full,
#preview a:focus + .full{opacity:1;filter:alpha(opacity=100)}
</style>
</head>
<body>
<div id=”preview”>
<ul>
<li><a href=”#preview”><img src=”http://naradesign.net/wp/wp-content/uploads/2012/05/img01.jpg” width=”120″ height=”80″ alt=”예제 이미지 01″ /></a><img class=”full” src=”http://naradesign.net/wp/wp-content/uploads/2012/05/img01.jpg” width=”600″ height=”399″ alt=”” /></li>
<li><a href=”#preview”><img src=”http://naradesign.net/wp/wp-content/uploads/2012/05/img02.jpg” width=”120″ height=”80″ alt=”예제 이미지 02″ /></a><img class=”full” src=”http://naradesign.net/wp/wp-content/uploads/2012/05/img02.jpg” width=”600″ height=”399″ alt=”” /></li>
<li><a href=”#preview”><img src=”http://naradesign.net/wp/wp-content/uploads/2012/05/img03.jpg” width=”120″ height=”80″ alt=”예제 이미지 03″ /></a><img class=”full” src=”http://naradesign.net/wp/wp-content/uploads/2012/05/img03.jpg” width=”600″ height=”399″ alt=”” /></li>
<li><a href=”#preview”><img src=”http://naradesign.net/wp/wp-content/uploads/2012/05/img04.jpg” width=”120″ height=”80″ alt=”예제 이미지 04″ /></a><img class=”full” src=”http://naradesign.net/wp/wp-content/uploads/2012/05/img04.jpg” width=”600″ height=”399″ alt=”” /></li>
</ul>
</div>
</body>
</html>

IE6 브라우저에서는 동작 안합니다. 자바스크립트를 사용하지 않고 IE6 브라우저에서 동일한 동작을 구현하면 천재.

분류: CSS,웹 표준 | 2012년 5월 25일, 13:43 | 정찬명 | 댓글: 12개 |
트랙백URI - http://naradesign.net/wp/2012/05/25/1797/trackback/

12개의 댓글이 있습니다.

  1. HYLA 댓글:

    키보드 컨트롤이 안되요 ㅎㅎ

  2. 정찬명 댓글:

    @HYLA
    고마워요. 원래 되도록 고려했는데 코드를 수정하면서 깜빡 했네요. 그런데 IE7에서 키보드 콘트롤에 문제가 좀 있네요. ㅎㅎ

  3. EveR™ 댓글:

    + 속성과 opacity를 가지고 표현 하셨기에 IE6에서는 안먹히겠죠?
    질문 있는데 CSS에서 +가 무슨 뜻인지 알고 싶습니다.
    CSS3쪽은 제가 아직 모르는게 많아서요.

  4. 정찬명 댓글:

    @EveR™
    인접 형제 선택자에요. A + B 형식으로 작성하면 A 다음에 등장하는 형제 요소 B를 선택하게 됩니다. ^^

  5. EveR™ 댓글:

    @정찬명
    감사합니다. ^^

  6. HYLA 댓글:

    천재가 되고싶어 꽁수로 한번 해봤는데…
    탭키 접근도 되게해봤는데 자연스럽진 않네요 ㅋㅋ
    http://hylaweb.net/demo/ui_cssgallery/index.html

  7. 정찬명 댓글:

    @HYLA
    우어어~ 제가 작성한 예제보다 완성도가 높네요. 천재! ㅎㅎ

  8. 수잔 댓글:

    정말 대단하세요…
    생각도 못해봤다는… 당연히 자바스크립트가 있어야 된다고 생각했었는데…
    완전 멘붕입니다… 공부 많이 해야겠어요 ㅜㅜ;;

  9. 정찬명 댓글:

    @수잔
    CSS를 만든 사람이 대단한거죠. ㅎㅎ

  10. 손성원 댓글:

    하.. 이런 방법으로도 css를 이용할수가 있다니…
    아직 햇병아리 인데 열심히 자료를 머리에 퍼담아야 겠습니다.
    잘보구 갑니당~

  11. 마약 댓글:

    예전에 스타크래프트 해설자 김도형,엄재경님이 하신 말씀이 있었어요.

    김도형 : 과연 스타크래프트 제작자가 이런 전략까지 다 생각하고 만들었을까요?
    엄재경 : 아니죠~ 문화는 유저가 만들어가는거죠~

    css 문화도 유저가 만들어가지 않을까요? ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

  12. 정찬명 댓글:

    @마약
    “CSS 문화도 유저가 만들어가지 않을까요?” 명언이네요. ㅎㅎ

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님