지금까지 작성된 UI는 웹페이지 기준 구현 + 약간의 반응형으로 되어있어 모바일화가 필요함
작업 상세 내용
메타데이터 수정
Next.js에서 기본으로 charset tag, viewport tag를 지원
모바일 화면 크기별로 css 사용자 지정 속성 변수 추가
Tailwind는 기본적으로 모바일 우선으로 설계되었다는 점을 염두해두고 앞으로 반응형을 추가해야할듯
screens: { mobile: "480px", tablet: "640px", "laptop:": "1024px", desktop: "1280px", "2xl": "1536px", },
위처럼 sm, md, lg 대신 보기 쉽게 tailwind config를 수정하면 여기에 명시하지 않은 브레이크포인트 prefix는 사용할 수 없다.
Tailwind의 모바일 우선 디자인 동작방식
가장 작은 화면크기부터 스타일이 적용되고 더 큰 화면을 위한 추가 스타일은 반응형 브레이크포인트(sm,md,lg)를 사용해 층층히 쌓아간다.<div class="text-center"></div>
prefix가 없는 스타일은 모든 화면 크기에 적용
<div class="text-center md:text-left"></div>
반응형 브레이크포인트 prefix(md)를 사용해 특정화면 너비부터 스타일을 덮어쓴다.
md(768px)이하에서는 text-center 적용
결론
모바일 전용 스타일에 추가 prefix가 필요없다.
지금까지 했던 방식과 반대로 생각하며 해야할듯.
모바일을 위한 스타일을 작성하고 더 큰 화면을 위한 반응형 css 추가
그리고 config에 mobile도 굳이 넣을 필요 없을 것 같다.
어떤 기능인가요?
작업 상세 내용
screens: { mobile: "480px", tablet: "640px", "laptop:": "1024px", desktop: "1280px", "2xl": "1536px", },위처럼 sm, md, lg 대신 보기 쉽게 tailwind config를 수정하면 여기에 명시하지 않은 브레이크포인트 prefix는 사용할 수 없다.Tailwind의 모바일 우선 디자인 동작방식
가장 작은 화면크기부터 스타일이 적용되고 더 큰 화면을 위한 추가 스타일은 반응형 브레이크포인트(sm,md,lg)를 사용해 층층히 쌓아간다.
<div class="text-center"></div>prefix가 없는 스타일은 모든 화면 크기에 적용<div class="text-center md:text-left"></div>반응형 브레이크포인트 prefix(md)를 사용해 특정화면 너비부터 스타일을 덮어쓴다. md(768px)이하에서는 text-center 적용결론
모바일 전용 스타일에 추가 prefix가 필요없다. 지금까지 했던 방식과 반대로 생각하며 해야할듯. 모바일을 위한 스타일을 작성하고 더 큰 화면을 위한 반응형 css 추가 그리고 config에 mobile도 굳이 넣을 필요 없을 것 같다.
참고할만한 자료(선택)
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design https://nextjs.org/docs/app/building-your-application/optimizing/metadata Targeting mobile screens