문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Iamge Sprites ======
<WRAP left notice 80%>
  * description : CSS Iamge Sprites
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-31
</WRAP>
<WRAP clear></WRAP>
\\
=====Image Sprites=====
이미지 스프라이트(Image Sprites)는 단일 이미지에 넣은 이미지 모음입니다.\\
\\
이미지가 많은 웹 페이지는 로드하는 데 오랜 시간이 걸리고, 서버에 다수의 요청을 할 수 있습니다.\\
\\
이미지 스프라이트를 사용하면 서버 요청 수가 줄어들고 대역폭(bandwidth)이 절약됩니다.\\
=====Image Sprites - Simple Example=====
세 개의 개별 이미지를 사용하는 대신, 아래의 단일 이미지 (%%"img_navsprites.gif"%%)를 사용합니다.\\
{{:wiki:css:css_note:img_navsprites.gif|}}\\
\\
CSS를 사용하면 필요한 이미지의 일부만 표시할 수 있습니다.\\
\\
아래의 예제에서, CSS는 이미지 %%"img_navsprites.gif"%%의 보여줄 부분을 지정합니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        #home {
            width: 46px;
            height: 44px;
            background: url(img_navsprites.gif) 0 0;
        }
        #next {
            width: 43px;
            height: 44px;
            background: url(img_navsprites.gif) -91px 0;
        }
    </style>
</head>
<body>
    <img id="home" src="img_trans.gif" width="1" height="1">
    <img id="next" src="img_trans.gif" width="1" height="1">
</body>
</html>
</HTML>
\\
====예제 설명====
  * ''%%<img id = "home"src = "img_trans.gif">%%''- %%src%% 속성은 비워 둘 수 없으므로 작은 투명 이미지만 정의합니다. 표시된 이미지는 CSS에서 지정한 배경 이미지가 됩니다.
  * ''%%width: 46px; height: 44px;%%'' - 사용하려는 이미지 부분을 정의합니다.
  * ''%%background: url (img_navsprites.gif) 0 0;%%'' -배경 이미지 및 위치 정의 (왼쪽 0px, 상단 0px)
이것은 이미지 스프라이트를 사용하는 가장 쉬운 방법입니다. 이제 링크와 호버 효과를 사용하여 확장하려고 합니다.\\
=====Image Sprites - Create a Navigation List=====
스프라이트 이미지 %%( "img_navsprites.gif")%%를 사용하여 네비게이션 목록을 만드는 경우,\\
\\
스프라이트 이미지는 링크가 될 수 있고 배경 이미지도 지원하므로, %%HTML%% 목록을 사용합니다.\\
====예제====
<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;
        }
    </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>
\\
====예제 설명====
  * %%#navlist {position:relative;}%% - 위치는 내부의 절대 위치를 허용하도록 상대적으로 설정됩니다.
  * %%#navlist li {margin:0; padding:0; list-style:none; position:absolute; top:0;}%% - 마진과 패딩이 0으로 설정되고, 목록 스타일(list-style)이 제거되며, 모든 목록 항목이 절대 위치에 배치됩니다.
  * %%#navlist li, #navlist a {height:44px; display:block;}%%-모든 이미지의 높이는 44px 입니다.
\\
이제 각 특정 부분의 위치와 스타일을 설명합니다.\\
\\
  * %%#home {left:0px; width:46px;}%% - 맨 왼쪽에 위치하며 이미지의 너비는 46px입니다.
  * %%#home {background: url(img_navsprites.gif) 0 0;}%% - 배경 이미지와 그 위치를 정의합니다 (왼쪽 0px, 위쪽 0px).
  * %%#prev {left:63px; width:43px;}%% - 오른쪽으로 63px 위치 (#home width 46px + 항목 사이에 약간의 추가 공간), 너비는 43px입니다.
  * %%#prev {background: url('img_navsprites.gif') -47px 0;}%% - 오른쪽으로 47px의 배경 이미지를 정의합니다 (#home width 46px + 1px line divider)
  * %%#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}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
