이게 다 하나의 이미지! (왼쪽-네이버, 오른쪽-다음)
여러 가지의 이미지를 하나의 이미지 파일 안에 배치하여 이미지 로드 부담을 줄이는 방법이다.
이미지들을 하나로 합쳐주고 좌표값도 알려주는 친절한 사이트를 활용하자.
image sprite generator : https://www.toptal.com/developers/css/sprite-generator/
버튼들의 좌측 로고 아이콘을 img로 넣는 것이 아니라, background: url()로 넣어서 이미지 스프라이트 기법을 적용해보겠다. 먼저 각각의 로고 이미지를 generator를 통해 하나의 이미지로 합쳐준다.
background-image로 사용하는 이미지는 alt="" 값이 필요 없는 중요도가 낮은 이미지(아이콘 같은)에 사용하는 것이 좋다.
아주 친절하게 각각의 좌표값도 알려준다. 그대로 값을 복사해서 첫번째 버튼 구글 버튼에 지정해줬더니
???? 이런 현상이 발생했다.
구글 버튼 클래스에 위의 좌표값을 다이렉트로 줬더니 width, height 값도 변해버린 것이었다.
이렇게 버튼에 로고를 배치하려면 구글 버튼에 가상 요소 선택자(::before)를 줘서 지정해줘야한다.
[구글 계정으로 로그인] 버튼 내에서 앞쪽에 로고 이미지를 삽입하는 것이므로.
.google-login::before {
width: 22px;
height: 22px;
background: url(image/sns.png) -10px -10px;
}그런데 이렇게만 적용해서는 이미지가 나타나지 않는다.
가상 요소로 추가하는 콘텐츠의 내용에 해당하는 것을 표시하는 속성인 content 속성을 지정해줘야한다.
즉, [구글 계정으로 로그인]의 내용 앞쪽에 어떤 내용의 콘텐츠를 넣을 것인가? 를 적어줘야 한다는 말이다.
여기서는 이미지를 넣어줄꺼니까 공백으로 둔다. content="";
왼쪽 정렬을 위해 float: left까지 주면
구글 로고가 등장했다!
위치 조절을 위해 position:absolute를 적용했다. (버튼 공통 클래스에는 position:relative 적용)
.google-login::before {
content: '';
width: 22px;
height: 22px;
float: left;
position: absolute;
top: 50%;
left: 15px;
margin-top: -11px;
background: url(image/sns.png) -10px -10px;
}
완성! 나머지 버튼들에도 동일하게 적용하면 된다.
+ 새로운 방법 추가
나는 각각 버튼의 ::before에 content, float, width, height 등등.. 을 모두 적어줘서 코드가 상당히 길어졌다.
여기서 공통적인 속성들은 따로 빼서 속성 선택자를 사용하면 코드 관리가 더 쉬워진다.
태그[속성 이름$="login"] → 속성값이 "login"으로 끝나는 요소
[class$="login"]::before {
content: '';
width: 22px;
height: 22px;
float: left;
position: absolute;
top: 50%;
left: 15px;
margin-top: -11px;
background-image: url(image/sns.png);
}
.google-login::before {
background: url(image/sns.png) -10px -10px;
}이런 식으로 각 버튼의 이미지 위치 값만 변경해 주면 되니까 더 편리한 방법인 것 같다!
스프라이트 기법도 단점이 있다.
이미지 수정이 매우 까다롭다. (유지 보수 측면을 고려해야 함)
이미지가 계속 추가되면 스프라이트 자체 이미지 용량이 커지므로 적당히 조절해서 관리해야 한다.
아이콘같이 단순한 이미지 위주로 제작하는 것이 좋다.
