Web/CSS

[Tailwind CSS] 다크모드 css 적용하기

Tailwind css를 사용하여 간단하게 다크모드 설정하기 tailwind.config.js 수정 Tailwind는 기본적으로 운영체제의 다크모드, 라이트모드를 따라 css를 적용할 수 있다. 그러나 우리가 웹사이트를 이용하다보면 토글 버튼을 이용하여 라이트, 다크 모드를 변경하는 옵션을 제공하는 경우가 많다. 수동으로 모드를 제어하고 싶은 경우 tailwind의 class 전략을 사용하면 된다. tailwind.confg파일에 다크를 클래스로 사용하겠다고 추가해준다. // tailwind.config.js module.exports = { darkMode: 'class', // ... } 이 설정을 주지 않으면 CSS의 media 설정의 prefers-color-scheme를 사용한다. 위 코드 처럼..

CSS 밑줄 (underline) 커스텀, 편리한 css generator 추천

밑줄을 그어야 할 때 CSS의 text-decoration을 이용해 밑줄을 긋고 커스텀이 가능하다. https://www.digitalocean.com/community/tutorials/css-text-decoration Customize Underlines with text-decoration in CSS | DigitalOcean www.digitalocean.com 위 사이트에 다양한 예시가 나와있다. CSS에 기본적으로 존재하는 underline 속성인 double,wavy,line 등을 커스텀 해서 위와 같이 예쁘게 만들 수 있다. 나는 티스토리 블로그 글의 소제목들에 밑줄 효과를 주고 싶었는데 이상하게 다양하게 시도 해 보아도 컬러 속성이 먹히지 않았다. 그래서 underline 속성을 다루..