Tailwind css를 이용해서 Responsive(반응형)페이지를 만들어보자 !! (sm, md, lg, xl, 2xl)

안녕하세요 !!! 

Tailwind CSS를 이용해서 Responsive페이지를 만들어보려고 합니다 !!! 

( 간단히 말하자면 화면이 커지거나 작아짐에 따라서 항목들이 알맞게 크기에 맞추는 겁니다 ! 즉 반응형 웹페이지 ! )

정말 간단하고 쉽게 만들수 있으니 잘 따라와주세요 ! 

 

먼저 ! 저의 화면을 보여드리겠습니다 ! 

먼저 소스코드는 밑에 설명하겠습니다 ! 

다 적용하고 나서의 깃은 맨 마지막에 쓰겠습니다 ! 

연습용: https://github.com/kanaheo/kana-market/blob/ce26ffe2363f9de3a95b0b86a82d1c80b0101219/pages/index.tsx

와 정말 멋이없다 ! 

보통은 화면이 컸을 때부터 디자인을 입히면서 작았을 때를 나중에 하지만

기본적으로 Tailwind CSS를 적용하면 가장 화면이 작을 때부터 디자인이 들어갑니다 !! 제가 해보기엔 이 부분이 좋은거같아요 !! Big screen -> small screen 이 좀 더 수정하기에 어려웠어요 ㅜㅜ ( 아 물론 제가 css에 약한것도 있고...)

 

자 그러면 바로 알아봅시다 ! 이쁘게 해봅시다 !

 bg의 Color 바꾸기

 

bg-white sm:bg-red-400 md:bg-slate-300 lg:bg-orange-400 xl:bg-purple-300 2xl:bg-amber-300

자 ! 위에것을 보면 간단히 감이 오시나요??? 

일단 ! 가장 기본적으로는 bg-white로 ! 기본적으로는 bg-white가 적용됩니다 ! 

여기서 !!! tailwind에서 제공하는 sm, md, lg, xl, 2xl에 대해서 알아보겠습니다 ! 

https://tailwindcss.com/docs/responsive-design 참고

먼저 공식홈페이지 이렇게 적용된다고 나와있습니다 !

그래서 위에 코드를 보시면 sm일 경우에는 최소 640px부터 bg-red-400이 적용이 돼, 저렇게 바뀌는 모습을 볼 수 있습니다 ! 

그럼 한번더 lg에서 한번 확인해보겠습니다 ! 

lg:bg-orange-400 적용이 된 모습 ! 

이런식으로 브라우저에 크기에 맞춰서 사이즈를 변화시킬 수 있습니다 ! (핸드폰에서 확인해도 똑같이 됩니당 ! ) 

 

자 그러면 저 기능을 이용하면 더 이쁘게 될 것 같지 않나요???? 

한번 해보겠습니다 ! 

다음은 정말 쉽습니다 !! 

먼저 코드를 봐주세요 ! 

bg-slate-400 grid gap-10 lg:grid-cols-2 xl:grid-cols-3 xl:place-content-center py-20 px-20 min-h-screen

위에서 중요하게 볼 곳은 lg부분과 xl 부분입니다 ! 

일단 기본적으로 grid속성을 썼습니다 ! 간단하게 grid를 설명하자면 grid속성과 grid-cols-몇개  이 속성을 줘서 한줄에 몇개를 표시할거냐 ! 라고 보시면 쉽습니다 ! 

한번 화면을 확인해보겠습니다 ! 

짠 !!! grid와 grid-cols속성을 이용해서 정말 간단하게 이쁘게 responsive대응을 쉽게 했습니다 !!! 

정말 쉽지 않나요??? 

그러면 xl화면도 한번 확인해볼까요? 

와우 !! 맨 위에서 봤을 때보다 엄청나게 달라졌네요 !!!! 

여러분들도 이렇게 sm, md, lg, xl, 2xl 을 이용해서 간단하게 반응형 페이지를 만들 수 있습니다 ! 

 

 

여러분 !! responsive(반응형) 대응을 하실 때 많이 겁을 먹었던 적이 있을겁니다 !! 저도 그랬고요 !! 괜히 짜증나고 하기싫고 ;;; 

하지만 Tailwind css를 이용하면 ! 정말 몇줄안되는 코드로 저렇게 딱딱 변신한답니다 !!!! 

한번 연습들 해봅시다 !!!! 

 

요즘 모니터나 전자기기를 많이 볼 때 눈이 많이 피곤하시죠?

정말 어렵지 않습니다 !

다음에는    Dark    모드에 대해서 알아보겠습니다 !  이것도 마찬가지로 쉽습니다 ^^ 

 

완성 코드는 밑에 깃에서 확인해보세요 ! 

https://github.com/kanaheo/kana-market/blob/07c82b2626329dd4885133382e2a95bf9c59d91f/pages/index.tsx