안녕하세요!
잘 지내고 계신가요?
저는 오늘도 기술보단 tailwind를 활용한 스타일링에 대해 포스트해보려고 이렇게 찾아왔습니다 :)
(저도 언젠간 멋있게 기술에 관해 포스팅을 많이할 수 있는 날이 오겠죠..? 에효...)
그럼 바로 시작해볼까요?
(시작하기 전에 특정 사이즈별로 나눈는 것이 아닌 tailwind 기본으로 되어 있는 사이즈인 sm, md, lg, xl 기준을 활용하려고 합니다)
sm, md, lg, xl 들이 뭐죠..?
네 해당 단어들은 특정 해상도에 대한 기준입니다
sm: 작은 해상도
md: 중간 크기의 해상도
lg: 큰 해상도
xl: 매우 큰 해상도
이런식으로 구분해주시면 될 것 같습니다
그럼 어떻게 작성하면 좋을까요?
네 정답은 없고 사람마다 스타일이 달라서 딱 정확히 말씀을 드리긴 힘들지만
저는 주로 max와 함께 사용합니다
max와 함께 사용하면 어떻게 되죠?
위의 기준에서 추가 설명을 진행하자면
max-sm: 최대 사이즈가 작은 해상도 이하일 때 적용 (제일 작은 사이즈 밑으로는 내가 정한 코드로 정리할게요~)
max-md: 최대 사이즈가 중간 크기의 해상도일 때 적용 (중간 크기 밑으로는 내가 정한 코드로 정리할게요~)
max-lg: 최대 사이즈가 큰 해상도일 때 적용 (큰 해상도 밑으로는 내가 정한 코드로 정리할게요~)
max-xl: 최대 사이즈가 매우 큰 해상도일 때 적용 (큰 해상도 밑으로는 내가 정한 코드로 정리할게요~)
이렇게 정리 해주시면 될 것 같습니다..!
이미지로 보는 예시
max-xl:grid-4
max-lg:grid-3
max-md:grid-2
max-sm:grid-1
네! 오늘도 이렇게 짧게 마무리하겠습니다!
저도 처음에 봤을 때 그냥 css로 하는 것도 어려운데 어떻게 tailwind로 반응형을 하라는거지? 하는 생각에 머리가 아팠는데요... 그냥 일단 무식하게 이것저것 적용해보면서 하다보니깐 어느정도는 감이 잡히더라구요..!
그래서 이 글을 보신다면 일단 제가 알려드린 기준으로 반응형을 제작해보시는 것을 추천드립니다!
하다보면 감이 잡을거에요!!
그럼 저는 오늘 이렇게 물러나겠습니다!
여러분 오늘도 빠이팅이고!
우리는 또 편안한 하루 보내자구요!
