17 - 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 속성을 통해 큰 이미지를 구겨 넣는다는 느낌으로 작업!
Author And Source
이 문제에 관하여(17 - CSS(Image Sprite)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sgsg9447/TIL17-CSSImage-Sprite저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)