본문 바로가기

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"); // ..
IT관련/CSS 관련 2022. 3. 10.
Tailwind css를 이용해서 Responsive(반응형)페이지를 만들어보자 !! (sm, md, lg, xl, 2xl) 안녕하세요 !!! Tailwind CSS를 이용해서 Responsive페이지를 만들어보려고 합니다 !!! ( 간단히 말하자면 화면이 커지거나 작아짐에 따라서 항목들이 알맞게 크기에 맞추는 겁니다 ! 즉 반응형 웹페이지 ! ) 정말 간단하고 쉽게 만들수 있으니 잘 따라와주세요 ! 먼저 ! 저의 화면을 보여드리겠습니다 ! 먼저 소스코드는 밑에 설명하겠습니다 ! 다 적용하고 나서의 깃은 맨 마지막에 쓰겠습니다 ! 연습용: https://github.com/kanaheo/kana-market/blob/ce26ffe2363f9de3a95b0b86a82d1c80b0101219/pages/index.tsx 보통은 화면이 컸을 때부터 디자인을 입히면서 작았을 때를 나중에 하지만 기본적으로 Tailwind CSS를 적용..
IT관련/CSS 관련 2022. 2. 24.
Tailwind css를 더 잘써보자 !! modifier이용 (list, form, group section, peer !! ) 안녕하세요 ! 이번엔 https://heokknkn.tistory.com/11 저번글이 있는데 더 이어서 쓸것들이 있어서 밑에와 같이 소개해보겠습니다 !!!! React에서 List에 적용해볼까? 일단 가볍게 list를 나타냅시다 !!! 이대론 너무 밋밋하고 재미가 없습니다 !! 여기서 !!! 여러분들이라면 눈치 채셨을겁니다 !!! even : 짝수 odd : 홀수의 modifier을 지정해줘서 배경색을 입힐 수 있게 됐습니다 !!! 결과도 봐볼까요? 훨씬 쉽게 리스트를 간단하게 꾸밀 수도 있게 됐습니다 !!! 위에는 first와 last의 modifier을 이용해봤습니다 !!! 이건 유용한데요 ! 때로 첫번째나 마지막 요소에 border이라던가 padding라던가 margin을 넣고 싶을 때 유용하게 ..
IT관련/CSS 관련 2022. 2. 21.
Tailwind css를 더 잘써보자 !! modifier을 이용하자 ! 오늘은 Tailwind CSS에서 modifier에 대해서 소개하려고 합니다 !! 정말 유용하고 쓸모있는게 많으니 제가 알고있는 선에서 예를 들어보면서 알아보겠습니다 ! 일단 공식문서입니당 !! https://tailwindcss.com/docs/hover-focus-and-other-states 일단 modifier은 가장 중요한 의미가 ! 유틸리티를 사용해서 ! hover, focus, 그리고 더 많은것들을 스타일의 요소를 지정할 수 있다 입니다 ! hover 버튼 위에서 간단하게 버튼하나를 만들어줍니다 !!! 그리고 바로 hover을 적용시켜볼까요??? 기존의 CSS방법과는 전혀 다릅니다 ! 원래는 css에서 :hover을 써서 color나 배경색등등을 바꿀 수 있었습니다 !! 하지만 !! Tain..
728x90

티스토리툴바