[멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS : 스프라이트 이미지, container query

Today I Learn - 2024.05.17

* 스프라이트 이미지

- 스프라이트 이미지는 여러개의 이미지가 필요한 경우 사용된다.

- 이미지를 각각의 별도의 파일로 관리하는 것 보다는 하나의 파일로 만들어서 HTTP 요청수가 줄어들어서 메모리와 네트워크 사용량 측면에서 효율적이다.

- 스프라이트는 규칙성으로 만드는게 좋다.

(1) 비트맵 스프라이트 이미지

 

(2) svg 스프라이트 이미지

 

---

* media query vs container query

- 둘 다 반응형으로 지정할 수 있다.

- media query는 viewport(브라우저 너비) 를 기준

- container query는 특정 컴포넌트 요소를 기준

---

* container query ?

(1) 반응형을 적용 할 컴포넌트 요소타입 지정하기 : container-type 사용

- size : container의 블록기반으로 적용한며 width와 height 값에 따라 반응형이 된다.

- inline-size : container의 인라인을 기반으로 적용하며 요소의 width 값에 따라 반응형이 된다.

- normal : default값, container에서 제외된다.

<div class="wrapper">
  <div class="card">
    <h2>카드 제목</h2>
    <img src="이미지 주소" alt="카드이미지" />
    <p>카드 내용</p>
  </div>
</div>

.wrapper {
  container-type: size | inline-size;
}

(2) 반응형으로 적용 할 컴포넌트에게 이름 삽입하기 : container-name 사용

.wrapper {
  container-name: box;
}

(3) @container 사용하기

/* 모든 container 요소에 적용 */
@container (min-width: 768px) {
  h2 {
    font-size: 2rem;
  }
}

/* container-name이 적용된 특정 요소에 적용 */
@container box (min-width: 768px) {
  h2 {
    font-size: 3rem;
    color: green;
  }
}

(4) container shorthand

- container : container-name / container-type 순으로 사용한다.

.card {
  container: box / inline-size;
}

---

media query만 들어봤지 container query는 처음 들어본 개념이여서 수업내내 생소했다. 그래도 사용법은 간단해서 좋았지만 어디에 쓰여야하는지가 가장 중요한법!!