🔶 CSS

• OS에서 사전 설정한 컬러 모드 관련 정보를 CSS에서 어떻게 참조할 수 있는가?

: prefers-color-scheme 속성을 통해 참조 가능
: 값이 dark라면 OS에 기본적으로 다크 모드가 설정되어 있는 것, 값이 light라면 OS에 기본적으로 라이트 모드가 설정되어 있는 것

🔶 JavaScript

• 데이터를 브라우저에 저장하고 싶은 경우 어떻게 활용할 수 있는가?

: 로컬 스토리지, 세션 스토리지 활용

• 로컬 스토리지를 사용하여 어떻게 데이터를 저장하고 참조할 수 있는가?

: window.localStorage 관련 메서드 사용
: setItem 메서드를 사용하여 데이터를 키와 값 형태로 저장할 수도, 객체나 배열 형태로 저장할 수도 있음
: 저장한 데이터는 getItem 메서드에 키를 전달하여 값을 참조할 수 있음

• 로컬 스토리지에 데이터 저장 시 주의할 점은 무엇인가?

: 로컬 스토리지의 값은 기본적으로 무조건 문자열로 변환되어 저장되므로, 불리언이나 숫자 값은 따로 JSON.stringify 메서드를 사용할 필요가 없지만 객체를 저장한다면 JSON.stringify 메서드를 사용해야 함

• window.localStorage.getItem 메서드 사용 시 주의할 점은 무엇인가?

: 로컬 스토리지의 값은 무조건 문자열로 변환되어 저장되기 때문에, 이를 다시 파싱하는 과정이 필요
: JSON.parse 메서드 사용하여 이를 해결 가능

• 자바스크립트에서 CSS의 변수 값을 어떻게 참조할 수 있는가?

: getPropertyValue 메서드 사용, 인수로 참조할 변수명을 문자열로 전달

• 자바스크립트에서 CSS의 :root 가상 선택자에 어떻게 접근할 수 있는가?
  : getComputedStyle(document.documentElement)를 사용하면 문서 노드에 적용된 모든 스타일 정보를 참조할 수 있기 때문에 :root 가상 선택자에도 접근 가능
  
  
• window.matchMedia 메서드는 어떻게 활용할 수 있는가?

: 미디어 쿼리 문자열의 결과 값을 객체로 반환하는데, 이를 바탕으로 로직을 작성할 수 있음
: matches 프로퍼티 값을 통해 조건에 따라 수행할 로직을 다르게 작성할 수 있음
ex) window.matchMedia('(prefers-color-scheme: dark)').matches