[Tailwind CSS] 모바일 대응하기!
글쓰게된 계기
이력서 플젝을 하면서 여러 사람들한테 피드백을 받았다. (친구들과 친구들의 지인에게도 부탁하고..!) 덕분에 좋은 의견도 얻을 수 있었고, 점점 보는 시야가 넓어지는 느낌이 들었다 ㅎㅎ. (덕분입니다.. 넘넘 고마워요!!!! 샷아웃 투 지인즈..)
피드백 중 모바일에서 안깨지게끔 해달라!는 요청이 있었고, 당연한건데 못했다는 생각에 호다닥 처리했다. 생각보다 굉장히 간단했고, 누군가에게는 도움이 되었으면해서 쓰는 글...
Tailwind CSS, 반응형 디자인
Tailwind CSS에서 반응형을 설정하는건 매우 간단하다. 다음 내용을 참고해보자!
1. meta 태그 > viewport 추가
<!--
width=device-width: 뷰포트의 너비를 장치의 너비에 맞출 때 사용
initial-scale=1.0: 페이지가 처음 로드될 때의 초기 확대/축소 비율 설정
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">❗️viewport 란??
viewport는 사용자가 웹페이지를 볼 때 웹 브라우저의 표시 영역이다. 특히 웹페이지가 표시되는 창이나 화면의 크기와 관련이 있다.
viewport의 크기는 사용자의 디바이스 화면 크기마다 다르며, HTML 문서의 <head> 섹션에서 <meta> 태그를 사용하여 viewport의 속성을 설정할 수 있다.
2. html에 break point 설정
<div className="w-full max-w-screen-lg mx-auto px-4 pt-4 mt-12">
<!-- -->
<h1 className='text-primaryColor font-extrabold text-3xl sm:text-4xl pb-6'>#OTHER EXPERIENCE</h1>
<div className='flex flex-col w-full'>
<div className='w-full'>
<h1 className='text-xl sm:text-2xl font-bold pt-1.5 inline italic'>
react-scroll-header-loading
</h1>
<span className='other-experience-tag ml-2 text-sm sm:text-base'>Owner</span>
...❗️breakpoint 란??
반응형 디자인을 구현할 때 사용되는 특정 화면 크기를 의미한다. tailwind css에서 기본으로 제공하는 breakpoint는 sm(최소: 640px), md(최소: 768px), lg(최소: 1024px), xl(최소: 1280px), 2xl(최소: 1356px) 이다.
위 예시 코드에서 sm:text-4xl의 의미는 화면 너비가 640px 이상일 때 글자크기를 4xl로 설정한다는 것이다.
마무리
생각보다 굉장히 간단하다. viewport 설정 후, className에 break point를 설정하면 반응형 디자인을 구현할 수 있다. (Tailwind CSS 짱..)
