웹프로그래밍

Global It Leader!!


CSS


 
 

이미지 스프라이트 스타일 시트 예시

페이지 정보

작성자 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 138회 작성일 24-05-16 11:30

본문

24ec03aa051db01770c235c25acfe9a6_1715826574_99.png
 

1. html 코드


<!DOCTYPE html>

<html lang="ko">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>CSS Sprite</title>

   </head>

  <body>

    <h2>원본 이미지</h2>

    <img class="rainbow box__main" />


    <h2>이미지 스프라이트</h2>

      <img class="rainbow box__sub rainbow-red" />

      <img class="rainbow box__sub rainbow-orange" />

      <img class="rainbow box__sub rainbow-yellow" />

      <img class="rainbow box__sub rainbow-lightgreen" />

      <img class="rainbow box__sub rainbow-green" />

      <img class="rainbow box__sub rainbow-skyblue" />

      <img class="rainbow box__sub rainbow-blue" />

      <img class="rainbow box__sub rainbow-indigo" />

      <img class="rainbow box__sub rainbow-purple" />

  </body>

</html>


2. 스타일 시트


.box__main {

width: 300px;

height: 300px;

}


.box__sub {

width: 100px;

height: 100px;

}


.rainbow {

background-image: url(./asset/rainbowBox.png);

}


.rainbow-red {

background-position: 0 0;

}

.rainbow-orange {

background-position: -100px 0;

}

.rainbow-yellow {

background-position: -200px 0;

}

.rainbow-lightgreen {

background-position: 0 -100px;

}

.rainbow-green {

background-position: -100px -100px;

}

.rainbow-skyblue {

background-position: -200px -100px;

}

.rainbow-blue {

background-position: -0 -200px;

}

.rainbow-indigo {

background-position: -100px -200px;

}

.rainbow-purple {

background-position: -200px -200px;

}


출처 : https://mystudy.tistory.com/58

댓글목록

등록된 댓글이 없습니다.

전체 80
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
80 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 86 10-11
79 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 85 10-09
78 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 103 07-26
77 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 107 06-10
76 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 112 05-17
열람중 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 139 05-16
74 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 112 05-14
73 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 148 05-02
72 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 545 07-31
71 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 791 04-09
70 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1124 09-01
69 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2121 04-24
68 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3272 04-24
67 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1406 03-28
66 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2892 03-26
65 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1410 03-26
64 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1404 03-25
63 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1447 03-18
62 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 8681 11-28
61 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1878 09-20