이미지 스프라이트(image sprite) / ir 효과 / background 표현
이미지 스프라이트(image sprite)와 ir 효과, background 표현까지 알아보도록 합시다.
🖼️ 이미지 스프라이트(image sprite)
이미지 스프라이트 기법이란 아래 사진처럼 여러 개의 이미지를 하나의 이미지로 만들어 놓는 것을 의미합니다.
1. How ?
이미지를 표현하는 방법에는 두가지 방법이 있습니다.
1) html : img 태그 사용 (의미있는 사진일 경우)
2) CSS : background 속성 사용 (장식용 사진일 경우)
이 중 이미지 스프라이트는 background 속성을 사용합니다.
background: color/image/repeat/attachment/position/size;
color: #fff, white, rgba(255,255,255);
다양한 방식으로 색을 설정해줍니다.
img: url(img/abc.jpg);
배경으로 쓸 이미지의 주소를 지정하여 설정합니다.
repeat: repeat/repeat-x/repeat-y/no-repeat;
배경 이미지 패턴(반복여부)를 설정합니다.
attachment: scroll/fixed/local;
배경 이미지 고정 방식을 설정합니다.
position: left right center/top center bottom/%/...;
배경의 위치를 설정해줍니다.
size: auto/px/%/cover/contain;
배경 이미지 크기를 설정해줍니다.
2. Example ?
imageType #3을 통해 확인해봅시다.
<style>
...
/* imageType03 */
...
.image__sns {
position: absolute;
right: 10px;
top: 10px;
opacity: -1;
transition: all 0.5s ease;
}
.image__sns a {
width: 36px;
height: 36px;
border-radius: 50%;
display: block;
margin-bottom: 5px;
background: url(img/image_bg03_icon3.svg) no-repeat;
}
.image__sns a:nth-child(2){
background-position: -50px 0;
}
.image__sns a:nth-child(3){
background-position: -100px 0;
}
.image__sns a:nth-child(4){
background-position: -150px 0;
}
.image:hover .image__sns {
opacity: 1;
}
...
...
</style>
<body>
...
<div class="image__save">
<a class="link" href=""><span class="ir">저장하기</span></a>
<a class="link" href=""><span class="ir">더보기</span></a>
<a class="link" href=""><span class="ir">조회수</span></a>
<a class="link" href=""><span class="ir">공유횟수</span></a>
</div>
...
</body>
background 속성의 경우, 웹표준을 지키기 위해 대체 문자를 만들어 이미지를 설명해주고 ir 효과로 안보이게 설정해줍니다.
ir 효과; Phark Method
<style>
...
/* reset */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
...
</style>
imageType #3의 경우 Phark Method 방법을 사용하여 글자가 보이지 않도록 화면 밖으로(-9999px) 빼내었습니다.
+ 다른 ir 효과; WA IR
<style>
.ir {
display: block;
overflow: hidden;
position: relative;
z-index: -1;
width: 100%;
height: 100%;
}
</style>
WA IR 방법을 사용하여 글자를 span 태그로 감싸고 z-index: -1;를 주어 안보이게 처리해줍니다.
'CSS' 카테고리의 다른 글
| CSS | 색상 표현(Color) | 16진수, rgba, hsla (4) | 2022.08.24 |
|---|---|
| CSS | 단위 | 절대길이와 상대길이 (3) | 2022.08.24 |
| CSS | 움직이는 강아지 만들기 (8) | 2022.08.18 |
| CSS | SCSS (4) | 2022.08.18 |
| CSS | 미디어쿼리(media query) (4) | 2022.08.15 |
댓글