TIL17 - CSS(Image Sprite)

CSS Sprite 기법

이미지를 편집할 때는 온라인 에디터를 사용하거나 직접 에디팅 앱(포토샵, 피그마, 스케치 등)을 사용해 개발자가 직접 편집함.

CSS Sprites Generator

https://www.toptal.com/developers/css/sprite-generator/

장점 : 이미지 태그의 개수를 줄이기위해, html 파일 자체가 깔끔해지고 스크린리더로 탐색할 때 탐색속도가 빨라질것, 이미지 태그가 많을 수록 웹페이지를 로딩할 때 속도가 늦어짐

단점 : 유지보수 힘듦 (수정이 어려움)

-참고강의-
https://www.youtube.com/watch?v=fKyLCIqWjIY

-참고페이지-
http://www.tcpschool.com/examples/tryit/tryhtml.php?filename=css_basic_imageSprites_01

레티나 디스플레이 대응법

레티나란?

특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300 PPI가 넘을 경우)를 가진 애플 LCD 제품의 브랜드 이름입니다.
*PPI?화소 밀도 또는 픽셀 밀도 또는 픽셀 퍼 인치는 다양한 환경에 쓰이는 장치 해상도의 측정 단위이다. 일반적으로 컴퓨터 디스플레이, 이미지 스캐너, 디지털 카메라 고체 촬상 소자에 쓰인다.

레티나(고해상도 화면)로 넘어오면서 논리픽셀(css에서 표현하는 화소의 기본 단위)과 물리픽셀(디바이스가 실제로 처리할 수 있는 화소의 기본 단위)의 차이가 발생한다.
그러나 브라우저는 css에서 정의한 픽셀만큼 이미지를 렌더링 해야하기 때문에 원래는 물리픽셀에 맞게 렌더링된 이미지가 논리픽셀 만큼 커져버리게 됩니다.

오늘의 문제 및 해결과정

문제!

이렇게 표현이됨...
레티나 디스플레이를 위해 2x 크기의 이미지를 다운받아 이미지 스프라이트를 만들었다.

.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-icon_facebook {
    width: 56px;
    height: 56px;
    background-position: -10px -10px;
}

.sprite-icon_google {
    width: 56px;
    height: 56px;
    background-position: -86px -10px;
}

.sprite-icon_kakao {
    width: 56px;
    height: 56px;
    background-position: -162px -10px;
}

.sprite-icon_naver {
    width: 56px;
    height: 56px;
    background-position: -238px -10px;
}

값을 그대로 썼을 경우 이런식으로 표현된다!

뭐가문제지?
이미지 크기가 2배수이기에, 기본 화면 에서는 width, height, backgbround-position의 값을 모두 1/2로 나눈 후 기입해줘야한다.
이부분을 놓쳐서 엄청 해맸다..

또한, 이미지스프라이트의 규격을 확인하여 규격도 마찬가지로 1/2을 해주어 background-size: 152px 38px;을 추가해줘야한다.

[class^="icon"]::before {
  float: left;
  display: block;
  content: "";
  width: 28px;
  height: 28px;
  background-image: url(images_login/css_sprites.png);
  background-size: 152px 38px;
}

.link-sns-login.icon-facebook {
  border: 1px solid #2d9cdb;
}

.link-sns-login.icon-naver {
  border: 1px solid #00bf18;
}

.link-sns-login.icon-kakao {
  border: 1px solid #f2c94c;
}

.icon-google::before {
  background-position: -43px -5px;
}

.icon-naver::before {
  background-position: -119px -5px;
}

.icon-kakao::before {
  background-position: -81px -5px;
}

.icon-facebook::before {
  background-position: -5px -5px;
}

해결!

• 레티나 용으로 피그마에서 2배수 파일을 다운받고 -> 이미지 스프라이트 형태로 합친 후 -> 파일 크기의 절반 크기로 background-size를 줘서 진행하였고, -> 각각의 크기 또한 절반의 크기로 줄여 작업
• 2배수인 파일을 1배수의 크기에 넣기위해 이렇게 절반으로 줄이는 작업을 진행
  (1배수의 패딩값의 2배를 2배수 이미지에 패딩값으로 준다고 생각)
• background-size 속성을 통해 큰 이미지를 구겨 넣는다는 느낌으로 작업!