CSS2 [CSS] tailwindCSS로 다크모드 적용하기 다크모드 기능 활성화 tailwind에서 다크모드를 사용하려면, tailwind.config.js에 설정이 필요합니다. darkMode에는 2가지 속성이 있는데, 본 글에서는 수동으로 변경 할 수 있도록 하기 위해, class를 사용했습니다. class: 수동으로 변경 할 수 있도록 html 태그의 className 속성에 dark가 추가되었을때, 다크 모드 스타일이 적용 됨 media: 운영체제 설정에 따라 다크 모드 스타일이 적용 됨 다크모드 적용하기 tailwind.config.js darkMode: 'class' 를 추가합니다. module.exports = { darkMode: 'class', content: ['./src/**/*.{js,jsx,ts,tsx}'], //... } 이제 상위 요소.. Programing/CSS 2024. 2. 11. [CSS] em과 rem em과 rem은 CSS에서 사용되는 상대적인 단위로, 폰트 크기 및 요소의 크기를 설정할 때 사용됩니다. 그러나 그들의 차이점은 상대적인 기준이 다르다는 점에 있습니다. em em은 부모 요소의 폰트 크기에 대한 상대적인 크기를 지정하는 단위입니다. 즉, 부모 요소의 폰트 크기를 1em으로 가정하고, 이를 기준으로 상대적인 크기를 설정합니다. 예시) 내부의 요소는 부모인 의 font-size를 기준으로 합니다. 의 css가 "font-size : 1.1em" 라면 font-size의 1.1배를 의미합니다. rem (Root Em) rem은 루트 요소 (html 요소)의 폰트 크기에 대한 상대적인 크기를 지정하는 단위입니다. em과 달리, rem은 항상 루트 요소의 폰트 크기를 기준으로 삼습니다. 예시) .. Programing/CSS 2023. 10. 14. 이전 1 다음
