뉴비코더
나는 코딩뉴비
뉴비코더
전체 방문자
오늘
어제
  • 분류 전체보기 (91)
    • 개발입문뉴비 - 국비지원 ( Front End ) (91)
      • html (26)
      • css (58)
      • javascript (6)
      • Library React.js (0)
    • FrontEnd ( Self-study ) (0)
      • html5, CSS3 (0)
      • Vanilla JS (0)
      • Clone Code (0)
    • BackEnd ( self-study ) (0)
      • Library Node.js (0)
      • Python (0)
      • Go (0)

블로그 메뉴

  • 홈
  • 방명록

공지사항

인기 글

태그

  • js 이벤트객체
  • 프론트엔드
  • 클론코딩
  • js 생성 함수
  • css3
  • ol
  • padding
  • 웹개발입문
  • 하이퍼링크
  • boxmodel
  • 마크업
  • HTML5
  • 가상클래스
  • 국비지원
  • psuedo-class
  • Transition
  • parseInt
  • 웹개발
  • UL
  • HTML
  • webfont
  • Margin
  • position
  • Javascript 배열
  • JavaScript
  • 코딩진화
  • js event
  • transform
  • js event object
  • boxmodeling

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
뉴비코더

나는 코딩뉴비

[2021/12/20]국비지원 CSS3 2-(1) sprite img
개발입문뉴비 - 국비지원 ( Front End )/css

[2021/12/20]국비지원 CSS3 2-(1) sprite img

2022. 1. 30. 22:22

 

 

 

sprite img : icon 사이즈의 작은 이미지들을 동일 간격으로 띄워 배치하여 하나의 파일로 만든 이미지파일

ex )

출처는 Naver

 

위와 같은 이미지파일을 포토샵 등에서 X축 Y축 안내선을 이동시켜가면서 원하는 위치의 시작점을 잡고,
전체 이미지사이즈의 모서리에서 거리가 얼마나 떨어졌는지 계산하여 그 거리만큼의 마이너스값을 입력해주면
원하는 이미지만 골라서 출력할 수 있음

이 이미지를 이용하기 위해 나는 하기와 같이 코드를 짰다.


 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>네이버 날씨<title>
    <style type="text/css">
        ul li a{text-decoration: none;color: #000;font-size: 34px;}
        ul li a span{display: inline-block;width: 46px; height: 46px;
                     background:url(images/sp_weather_time_5f2bbb.png) no-repeat}
        ul li.wt01 a span{background-position: -6px -130px;}
        ul li.wt02 a span{background-position: -193px -6px;}
        ul li.wt03 a span{background-position: -6px -6px;}
        ul li.wt04 a span{background-position: -130px -192px;}
    </style>
</head>
<body>
	<h2>날씨</h2>
    <ul>
        <li class="wt01"><a href="#"><span></span><strong>비</strong></a></li>
        <li class="wt02"><a href="#"><span></span><strong>맑음</strong></a></li>
        <li class="wt03"><a href="#"><span></span><strong>구름</strong></a></li>
        <li class="wt04"><a href="#"><span></span><strong>번개</strong></a></li>
    </ul>
</body>
</html>

 

 


 

결과물

 


일일이 거리를 재서 입력한다는 게 좀 많이 귀찮긴 한데
(포토샵 등의 이미지 편집 프로그램이 매우 필요해서)
특히 N사 메인의 경우 거의 sprite 이미지로 구성되어 있음

저작자표시 비영리 변경금지 (새창열림)
    '개발입문뉴비 - 국비지원 ( Front End )/css' 카테고리의 다른 글
    • [2021/12/20]국비지원 CSS3 2-(3) overflow
    • [2021/12/20]국비지원 CSS3 2-(2) Background
    • [2021/12/17]국비지원 CSS3 1-(4) font 스타일 property
    • [2021/12/17]국비지원 CSS3 1-(3) 하위선택자
    뉴비코더
    뉴비코더
    FrontEnd 지망 - 코딩뉴비를 위한(?), 뉴비에 의한, 뉴비의 블로그 - 코딩뉴비의 코딩 학습 기록 - 첨가물 : 약간의 불평/사족

    티스토리툴바