웹사이트를 만들때 아이콘을 사용할 때 용량이 아무리 작더라도 한번 요청하는데 시간이 들기때문에 많은 그림파일을 로딩해야한다면 느려질수 밖에 없다.
따라서 웹사이트 로딩속도를 빠르게 하는 여러방법이 있는데 그 중에 CSS Sprites라는것에 대해 알아보고자 한다.
스프라이트는 이미지를 최소화하여 사용하는 것으로 다음처럼 아이콘을 한 이미지에 모두 몰아 넣고, CSS로 한 아이콘 부분만 잘라(?) 보여주는 식을 말한다.
(혹여나 이미지 도용방지를 위해 빨간색으로 칠한점 참고해주세요)
그렇다면, 저렇게 만들기위해서 이미지 편집 툴을이용해 아이콘들을 하나하나 붙이고,
CSS로 또 하나하나 위치를 찾아 아이콘을 표현할것인가?
우리에겐 네이버에서 만든 N-MET이 있다.
아이콘들을 모두 불러오면 저렇게 자동으로 아이콘들을 한 이미지파일에 정렬해주고, CSS도 자동으로 만들어주는 프로그램이다.
좋다
ㅎㅎㅎㅎ
우선 설치하고 사용방법에 대해 설명하겠다.
N-MET을 다운받는 곳 : http://html.nhncorp.com/markup_tools/nmet
위 링크를 통해 다운을 받고 설치를 한다.
그럼 다음과 같은 창이 뜰것이다.
여기서 Sprites Generator 라는 탭을 사용하도록 하자. (나머지 탭은 안써봄...흠)
그리고 합칠 아이콘들을 불러오자
프로젝트명 옆에 "이미지 추가"버튼을 클릭한다.
그리고 사용할 아이콘들을 불러온다. 다중 선택도 가능하니 사용할 아이콘들을 모두 선택하여 불러와도된다.
아이콘을 불러오면 다음과같이 아이콘들이 자동으로 정렬된다.
저렇게 정렬하고 싶지않다면 해당하는 아이콘을 드래그앤 드롭하면 그 아이콘을 원하는 위치에 정렬할 수 있다
그리고 내보내기~ 하면 선택한 아이콘들을 저장하는 파일을 만들수 있다.
아! CSS는 하단에 전체코드 보기를 하면 볼수 있다.
이렇게...
끝!!!
참고사이트 : http://bezzera.tistory.com/289#.UmoL4XBYF8E
