본문 바로가기

IT관련/CSS 관련

IT관련/CSS 관련 2023. 1. 17.
Tailwind CSS에서 space에 대해서 알아봅시다 ! 안녕하세요 !!! 오늘은 Tailwind CSS에서 유용한것에 대해서 사용해보려고합니다 !!! 앞으로 자주 유용한 기능들을 짧게 정리해나가려고합니다 !!! 그럼 바로 본론으로 갑시다 ! Space란?? 간단합니다 !! 하위 요소 사이의 공간을 제어하는 ​​유틸리티입니다. 그리고 !! 하위 요소에서 기본적으로 display가 none인 요소는 제외 하구요 !!! 자 아래와 같은 코드가 있습니다 ! const Home: NextPage = () => { return ( ); }; 한번 화면을 봐볼까요?? 너무 못생겼네요 ㅜㅜ 요소들 사이에 공간이 있으면 좋다고 생각하시죠?? 자 ! 이럴 때 space를 추가해줍시다 !! 아래처럼요 !! 자 그러면 화면을 봐볼까요?? 저 위에 보다 훨씬 괜찮지 않나요?? 아래..
IT관련/CSS 관련 2022. 12. 28.
[Chakra] 차크라 UI로 정말 간단하고 쉽게 다크모드 구현해봅시다 ! 안녕하세요 !! 이번에 저번 시리즈에 이어서 차크라 UI로 정말 간단하고 쉽게 다크모드를 구현해 볼 생각입니다 !!! 정말 쉬우니 잘 따라와주세요 ^^ 자 바로 코드 보면서 설명 들어가겠습니다 !! ( 기본적으로 chakra UI는 설치를 해주세요 !!!! 안하시는 분들은 여기서 밑에 URL에서 확인해주세요 !!! ) https://heokknkn.tistory.com/51 index.tsx import { ChakraProvider, ColorModeScript } from "@chakra-ui/react"; import ReactDOM from "react-dom/client"; import router from "./router"; import { RouterProvider } from "react..
IT관련/CSS 관련 2022. 12. 24.
[Chakra] Chakra UI를 이용해서 Modal(모달)을 작성해봅시다 ! 안녕하세요 !!! 이번에는 Chakra UI를 이용해서 Modal(모달)을 작성해보려고 합니다 !! 리액트 환경에서 정말 쉽고 간단하게 만들 수 있습니다 !! (state라던가 function하나도 안쓰고 가능합니다 ! ) 자 그러면 바로 시작해봅시다 ! 그 전에 아직 설치를 하지 않는 분들은 아래 URL에서 확인해서 설치해주세요 ^^ https://heokknkn.tistory.com/51 또한 그 전에 Modal에서 아이콘도 사용할겁니다 !!! 저는 react-icons를 사용할것입니다 !!! 정말 무궁무진하게 icons를 많이 사용할 수 있거든요 ^^ 사용 하실분들은 아래 보시구 다운로드 합시다 !! npm install react-icons --save Modal 만들기 먼저 저의 기본 화면을 봐..
IT관련/CSS 관련 2022. 12. 19.
[Chakra] css를 간단하게 ! Chakra UI에 대해서 배워봅시다 ! (feat. tailwind css 와 비교) 안녕하세요 ! 최근에 Chakra UI에 대해서 공부를 시작해봤습니다 !!! 그래서 Tailwind CSS말고 Chakra에 대해서 알아보면서 비교도 해보고 ! 설치방법에 대해서도 알아보겠습니다 ! ( 마지막 까지 봐주세요 !! TIP이 좋습니다 ^^ ) Chakra UI란? Chakra UI는 개발자가 웹 응용 프로그램을 위해 액세스 가능하고 재사용 가능한 사용자 인터페이스 구성 요소를 빠르게 구축할 수 있도록 도와주는 React의 UI 구성 요소 라이브러리 입니다. React 위에 구축되었으며 테마 엔진에 스타일이 지정된 시스템을 사용합니다. Chakra UI의 목표는 프로그래머가 최소한의 노력으로 아름답고 반응이 빠르며 접근 가능한 사용자 인터페이스를 쉽게 만들 수 있도록 하는 것입니다. 이 툴킷에..
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

티스토리툴바