wiki:css:css_note:css_image_sprites

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_image_sprites [2021/03/31 13:45]
emblim98
+++ wiki:css:css_note:css_image_sprites [2023/01/13 18:44] (현재)
@@ 줄 117: / 줄 117: @@
   * %%#next {left:129px; width:43px;}%% - 오른쪽으로 129px 위치 (#prev의 시작은 63px + #prev 너비 43px + 추가 공백), 너비는 43px입니다.
   * %%#next {background: url ('img_navsprites.gif') -91px 0;}%% - 오른쪽으로 91px의 배경 이미지를 정의합니다 (#home width 46px + 1px line divider + #prev width 43px + 1px line divider)
+\\
+=====Image Sprites - Hover Effect=====
+이제 네비게이션 목록에 호버 효과를 추가하려고 합니다.\\
+\\
+**Tip:** ''%%:hover%%'' 셀렉터는 링크 뿐만 아니라 모든 요소에서 사용할 수 있습니다.\\
+\\
+새 이미지 %%("img_navsprites_hover.gif")%%에는 3 개의 네비게이션 이미지와 호버 효과에 사용할 3 개의 이미지가 포함되어 있습니다.\\
+\\
+이것은 6 개의 개별 파일이 아닌 하나의 단일 이미지이기 때문에, 사용자가 이미지 위로 마우스를 가져갈 때 **로딩 지연(loading delay)**이 없습니다.\\
+\\
+호버 효과를 추가하기 위해 세 줄의 코드만 추가합니다.\\
+\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        #navlist {
+            position: relative;
+        }
+        #navlist li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            position: absolute;
+            top: 0;
+        }
+        #navlist li,
+        #navlist a {
+            height: 44px;
+            display: block;
+        }
+        #home {
+            left: 0px;
+            width: 46px;
+            background: url('img_navsprites.gif') 0 0;
+        }
+        #prev {
+            left: 63px;
+            width: 43px;
+            background: url("img_navsprites.gif") -47px 0;
+        }
+        #next {
+            left: 129px;
+            width: 43px;
+            background: url("img_navsprites.gif") -91px 0;
+        }
+        #home a:hover {
+            background: url('img_navsprites_hover.gif') 0 -45px;
+        }
+        #prev a:hover {
+            background: url('img_navsprites_hover.gif') -47px -45px;
+        }
+        #next a:hover {
+            background: url('img_navsprites_hover.gif') -91px -45px;
+        }
+    </style>
+</head>
+<body>
+    <ul id="navlist">
+        <li id="home"><a href="https://www.w3schools.com/css/default.asp"></a></li>
+        <li id="prev"><a href="https://www.w3schools.com/css/css_intro.asp"></a></li>
+        <li id="next"><a href="https://www.w3schools.com/css/css_syntax.asp"></a></li>
+    </ul>
+</body>
+</html>
+</HTML>
+\\
+====예제 설명====
+  * %%#home a:hover {background:url('img_navsprites_hover.gif') 0 -45px;}%% - 3 개의 호버 이미지 모두에 대해, 동일한 배경 위치를 지정하고 45 픽셀만 더 아래로 지정합니다.\\
 {{tag>오션 CSS Iamge Sprites}}

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_image_sprites.1617165915.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)