목차
다크 모드 & 라이트 모드
미디어 쿼리를 사용해서 다크 모드와 라이트 모드를 지정하여 스타일을 변경할 수 있다. prefers-color-scheme 값으로 dark 또는 light를 할당하여 스타일을 지정한다.
@emdia (prefers-color-scheme: dark) {
background: #121212;
color: #fff;
}
최근에 등장한 light-dark() 함수를 사용할 수도 있다. 함수는 :root에 color-scheme: light dark;를 선언해야 사용할 수 있다.
앞에는 라이트 모드 값을, 뒤에는 다크 모드 값을 입력한다.
:root {
color-scheme: light dark;
}
body {
color: light-dark(black, white);
}
color-scheme: light dark;를 선언하면 운영체제 모드에 따라 자동으로 배경 색과 글자 색을 변경한다.
img-set() 함수
이미지를 최적화하려고 할 때 1배율이나 2배율을 구분하는 것도 중요하지만, 용량이 더 적은 포맷을 구분하는 것도 중요하다. png 파일은 webp로 변환했을 때 효율이 좋고, jpg는 avif로 변환할 때 좋다.
img-set()는 이미지를 배율에 따라, 포맷에 따라 가장 적합한 이미지를 선택하도록 하는 함수다.
.container {
background-image: image-set(url(/path) 1x, url(/path_2x) 2x);
}
또는 미디어 쿼리를 사용할 수도 있다. 함수 값으로 min-device-pixel-ratio를 사용한다.
@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url(/path);
}
미디어 쿼리 조건식을 사용하기보다 함수를 사용하는 게 유지 보수 차원에서 더 편할 수도 있다. 하지만 상황에 따라 필요한 방법을 사용한다.
실습하며 배운 것(output, object-fit, object-position, backdrop-filter)
- output 요소는 자바스크립트로 연산한 결과를 표시하도록 할 때 사용한다.
- object-fit 속성 값으로 cover를 지정하면 정한 사이즈에 맞춰서 비율 왜곡 없이 길게 튀어나오는 부분을 잘라서 보여준다.
- object-position 속성은 이미지를 보일 좌표를 지정한다.
- backdrop-filter는 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성이다. 요소 뒤 영역에 효과를 적용하기 때문에 요소에 투명도를 줘야 한다.
오늘 하루를 돌아보며
새로운 기술들을 자주 찾아보는 것도 중요하지만, 그만큼 어떤 브라우저에서 지원하고, 어떤 브라우저에서 지원하지 않는지 찾아보는 것도 중요하다. caniuse.com을 자주 사용할 것!
오늘은 첫 시험이 있는 날이었다. 깜짝 시험이라 그동안 복습을 얼마나 했는가 확인할 수 있었다. 안다고 생각했는데 갑자기 떠올리려니 헷갈리는 것들이 있었다. 기본적인 내용이었고, 간단한 질문들이었는데 정확히 알지 못하는 것이 있다는 것이 당황스러웠다. 간단해서 당연히 안다고 생각했던 게 질문을 받으니 헷갈렸다. 배운 것들을 한 번 쭉 살펴보면서 내가 제대로 설명할 수 있는지 다시 확인해야겠다.
