본문 바로가기

Tailwind CSS

IT관련/CSS 관련 2023. 1. 17.
Tailwind CSS에서 space에 대해서 알아봅시다 ! 안녕하세요 !!! 오늘은 Tailwind CSS에서 유용한것에 대해서 사용해보려고합니다 !!! 앞으로 자주 유용한 기능들을 짧게 정리해나가려고합니다 !!! 그럼 바로 본론으로 갑시다 ! Space란?? 간단합니다 !! 하위 요소 사이의 공간을 제어하는 ​​유틸리티입니다. 그리고 !! 하위 요소에서 기본적으로 display가 none인 요소는 제외 하구요 !!! 자 아래와 같은 코드가 있습니다 ! const Home: NextPage = () => { return ( ); }; 한번 화면을 봐볼까요?? 너무 못생겼네요 ㅜㅜ 요소들 사이에 공간이 있으면 좋다고 생각하시죠?? 자 ! 이럴 때 space를 추가해줍시다 !! 아래처럼요 !! 자 그러면 화면을 봐볼까요?? 저 위에 보다 훨씬 괜찮지 않나요?? 아래..
IT관련/CSS 관련 2022. 4. 27.
Tailwind css를 이용해서 Dark(다크)모드를 구현해보자 !!! 안녕하세요 ! 저번 반응형 페이지에 이어서 이번에는 다크모드를 구현해보겠습니닷 !!! 다크모드도 Tailwind css를 이용하면 너무너무 간단하게 되니까 연습 해봅시다 ! 먼저 저는 리액트 환경에서 진행할것입니다 !! 먼지 기존의 화면을 봐볼까요?? 기존 화면 저렇게 있습니다 !!! 그리고 아래에 보시면 다크모드라고 원을 만들었습니다 !! 이제 구현을 해볼까요?? const [dark, setDark] = useState("다크모드"); // 다크모드 있는곳 텍스트 ! const toggleDarkMode = () => { if (localStorage.getItem("theme") === "dark") { // 다크모드 -> 기본모드 localStorage.removeItem("theme"); // ..
728x90

티스토리툴바