style: main 태그 반응형에 따라 기본 font-size 설정

Author: junjeeong

src/components/StrokeBanner.tsx

@@ -23,8 +23,9 @@ const StrokeBanner = () => {
         친구 정보를 저장하고 대화할 수 있어요
       </strong>
       <p className="mt-2 text-sm font-light text-gray-900">
-        로그인 시 기억하고 싶은 친구의 MBTI와 특징을 입력해서 빠르게 대화할 수
-        있어요
+        로그인 시 기억하고 싶은 친구의 MBTI와 특징을
+        <br />
+        입력해서 빠르게 대화할 수 있어요
       </p>
     </div>
   );

src/index.css

@@ -30,14 +30,15 @@ body {
 
 main {
   @media screen and (min-width: 360px) {
+    font-size: 14px;
     width: 360px;
-    
   }
   @media screen and (min-width: 375px) {
+    font-size: 16px;
     width: 375px;
-    
   }
   @media screen and (min-width: 500px) {
+    font-size: 16px;
     width: 500px;
   }
 }
@@ -55,7 +56,6 @@ button:hover {
 }
 
 @keyframes pulse-custom {
-
   0%,
   100% {
     transform: scale(1);
@@ -87,4 +87,4 @@ button:hover {
   * {
     @apply transition-transform duration-200 ease-in-out;
   }
-}
+}