[TIL] MY VERY FIRST PROJECT - IMAGE SPRITE

DAY17 <Project Day2 :image sprite>

프로젝트 둘쨋 날

크게 이룬건 없고 내가 맡은 메인페이지 CSS를 완성했다.
아직 뭔가 크게 작동하는것이나, 눈에 띄는 부분은 없지만 처음 제대로 프로젝트이고 코딩이어서 그런지 html, css 만드는 것도 너무 힘들었고 그새 많이 배운 것 같다.

오늘은 멱살잡고 이끌어주시는 팀장님의 현직에서 많이 사용한다는 꿀팁 대방출의 날이었는데 그 중 가장 큰 수확은 image sprite!
퍼블리싱 강의에서도 배웠지만 잠깐 언급하고 넘어가는 정도였던걸로 기억하는데 (아마도?) 직접 해본건 오늘이 처음이기에 이것 또한 큰 수확인것 같다.

우리 팀은 전체적인 작업 틀을 피그마를 사용했는데, 팀원분들이 미리 만들어주신 이 이미지를 SVG 파일로 export해서 background-position을 하나하나 조정해가며 이미지를 지정해주었다. 사실 해보는게 처음이라 버튼을 먼저 만들고 이미지를 1px 씩 조정해가며 찾았는데... 이게 맞는지는 모르겠다.

Image Sprite 를 사용하는 이유는 이미지를 다운받기 위한 서버 요청을 줄이기 위해서 라고 한다.

웹페이지의 로딩시간을 줄여준다는 장점이 있고 많은 이미지 파일 관리 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 된다는 장점이 있다.

하지만 스프라이트 자체의 용량이 커질수 있다는 단점과 수정과 유지보수가 까다롭다는 단점이 있다.

어쨌거나 저쨌거나 다른 사람들 보단 조금 늦었지만 메인 페이지를 드디어 완성했다!! 
하나부터 열까지 다 너무 어렵고 힘들지만 남들보다 늦고 느린만큼 더 열심히 해보자.