TIL
20231109 TIL
김빵그
2023. 11. 9. 18:54
Today 요약
[✅] 프로그래머스 코딩테스트 2문제
[✅] js 강의 1시간
배운 점
1. javaScript 복습
1-1 console.dir
- 콘솔 객체인 console을 사용하여 객ㅊ체를 출력할 때 객체의 속성 및 값들을 표시, 나열하기 위한 메서드
- 트리구조 : 중첩된 객체 및 배열의 내용을 트리 구조로 표시
- 브라우저 , Node.js 환경에서 사용 가능
const myObject = {
name: "John",
age: 30,
city: "New York"
};
console.dir(myObject);console: dir() method - Web APIs | MDN
The method console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.
developer.mozilla.org
1-2 window.matchMedia('prefers-color-scheme:')
- 웹브라우저에서 미디어 쿼리를 사용해 현재 미디어 환경을 확인하고 적절한 액션을 수행하기 위한 함수
// "prefers-color-scheme" 미디어 쿼리를 사용하여 사용자의 화면 모드를 확인
const prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)');
// 미디어 쿼리가 일치하는지 확인
if (prefersColorScheme.matches) {
// 사용자가 다크 모드를 선호하는 경우
// 여기에서는 다크 모드 스타일을 적용할 수 있습니다.
document.body.classList.add('dark-mode');
} else {
// 사용자가 라이트 모드를 선호하는 경우
// 여기에서는 라이트 모드 스타일을 적용할 수 있습니다.
document.body.classList.remove('dark-mode');
}
// 사용자의 화면 모드 변경 감지를 위한 이벤트 리스너 등록
prefersColorScheme.addListener((e) => {
if (e.matches) {
// 사용자가 다크 모드로 변경한 경우
} else {
// 사용자가 라이트 모드로 변경한 경우
}
});2. CSS 다크모드
:root[color-mode='dark'] {
--background: #000;
--textColor: white;
}
body {
background-color: var(--background);
color: var(--textColor);
}- css 변수를 사용하여 다크모드에 대한 스타일 정의하기
- :root : HTML 문서의 루트 요소를 나타내는 것, 일반적으로 <html>을 가리킨다