[CSS] "이미지 스프라이트 / ir효과 / 백그라운드 표현" 에 대해 알아봅시다!

CSS : 이미지 스프라이트 / 백그라운드 표현 / IR 효과에 대해 알아봅시다!

📎이미지 스프라이트(Image Sprite)란?

: 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법입니다.
: 간단하게 말해서, 하나로 뭉친 파일을 다운 받아 필요 부분만 똑 떼어 사용하는 기법입니다.
: 실제로 네이버에서는 메인페이지에서 이 기법을 굉장히 광범위하게 사용하고 있습니다.

[참고] 한 칸의 크기를 50cm로 잡아주었으며 아이콘 크기는 36cm로 정해주었으며 아이콘 안 이미지의 크기는 20cm로 정해주었습니다.(가로, 세로 동일)

➰왜 사용하는 걸까? (장점)

📌 서버로의 요청 횟수를 줄여 사이트 로딩 속도를 줄여줌
📌 많은 이미지 파일을 관리하는 대신 하나의 스프라이트 이미지 파일만 관리하면 돼서 편리
📌 브라우저 자원과 유지보수 측면에서 이미지 스프라이트 사용하는 것이 좋음

❗️주의할 점

이미지 스프라이트 사용시 img 태그가 아닌 css의 background-image로 처리되기 때문에 alt속성을 지정해줄 수 없습니다.
따라서 아이콘, 로고와 같이 의미상 크게 중요하지 않은 이미지의 경우에는 이 기법을 사용하는 것이 좋습니다.

➰단점

📌 이미지 개수가 늘어남에 따라 스프라이트 자체의 용량이 커질 수 있음
📌 일부 이미지, 로고의 수정이 필요한 경우 유지 보수가 까다로움

➰이미지 스프라이트 사용시 필수적인 CSS요소들

∙ width, height : 삽입할 이미지 크기 결정
∙ background-image : 삽입할 이미지의 경로 설정
∙ background-position : 이미지에서 사용할 이미지의 위치 설정

---

📎background로 이미지 표현하기

사이트에서 이미지를 표현하는 방법 2가지(기본 원칙)
📌 html : img 태그로 표현(의미가 있을 때 / 없으면 이 사이트인지 모를 때) : alt 태그 - 대체 문자 표현
📌 css : ⭐️background 속성⭐️으로 표현(의미가 없을 때_장식용) : 대체 문자 필요 X

🔍예제(imageType03 참고)

.image__inner .image:nth-child(1) {
    grid-area: box1; /*이름 지정할 때 큰 따옴표 안씀*/
    background:  url(img/imageType03_01.jpg);
    background-size: cover; /* 프레임 사이즈에 딱 맞게 들어가는 것*/
}

.image__sns a {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin-bottom: 5px;
    background: url(img/image_bg03_icon.svg);
}

---

📎IR 효과란?(웹 표준 준수하여 CSS 사용하는 방법)

: 이미지 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS기법을 사용하여 이미지 대체 텍스트를 제공할 수 있습니다.
: 대체로 이미지 스프라이트와 같이 사용을 많이 합니다.

➰의미있는 이미지의 대체 텍스트를 제공하는 경우(*imageType03*)

.ir_pm {
    display: block;
    overflow : hidden;
    font-size: 0;
    line-height: 0px;
    text-indent: -9999px;
}

➰의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용

.ir_wa {
    display: block;
    overflow: hidden;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}

➰대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때

ir_so {
    /* ir_screen out 약자로 임의 사용 */
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}

'CSS' 카테고리의 다른 글

[CSS] "색상 표현 방법" 에 대해 알아봅시다!  (7)	2022.08.24
[CSS] "단위(Unit)" 에 대해 알아봅시다!  (7)	2022.08.24
[CSS] PUG와 SCSS를 활용하여 강아지 애니메이션을 만들어 봅시다!  (4)	2022.08.18
[CSS] "SASS ⊃ Sass, SCSS" 에 대해 알아봅시다!  (2)	2022.08.18
[CSS] 미디어쿼리에 대해 알아보자!  (4)	2022.08.16

관련글

• 

  [CSS] "색상 표현 방법" 에 대해 알아봅시다!

• 

  [CSS] "단위(Unit)" 에 대해 알아봅시다!

• 

  [CSS] PUG와 SCSS를 활용하여 강아지 애니메이션을 만들어 봅시다!

• 

  [CSS] "SASS ⊃ Sass, SCSS" 에 대해 알아봅시다!

댓글