style : 반응형 스타일

sopt-makers · Dec 4, 2023 · b722250 · b722250
1 parent b9e245c
commit b722250
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/src/views/MainPage/components/Activity/Card/style.ts b/src/views/MainPage/components/Activity/Card/style.ts
@@ -54,19 +54,26 @@ export const CardKorNav = styled.nav`
   margin-top: 26px;
   z-index: 3;
 
-  /* 태블릿 뷰 */
-  @media (max-width: 768px) and (min-width: 376px) {
-  }
-
-  /* 모바일 뷰 */
-  @media (max-width: 375px) {
+  @media (max-width: 428px) and (min-width: 376px) {
     font-size: 12px;
     line-height: 16.258px; /* 135.48% */
     letter-spacing: -0.48px;
 
-    padding: 6.753px 17.488px;
+    padding: 6px 18px;
     margin-left: 14px;
     margin-top: 14px;
+    border-radius: 8px;
+  }
+
+  @media (max-width: 375px) {
+    font-size: 10px;
+    line-height: 14.188px; /* 135.48% */
+    letter-spacing: -0.419px;
+
+    padding: 5px 15px;
+    margin-left: 12px;
+    margin-top: 12px;
+    border-radius: 6px;
   }
 `;
 
@@ -87,11 +94,6 @@ export const Blur = styled(motion.div)`
 
   padding: 26px;
 
-  /* 태블릿 뷰 */
-  @media (max-width: 768px) and (min-width: 376px) {
-  }
-
-  /* 모바일 뷰 */
   @media (max-width: 375px) {
     padding: 14px;
   }
@@ -101,11 +103,15 @@ export const CardEngNav = styled.p`
   color: rgba(255, 255, 255, 0.7);
   text-align: right;
   font-family: SUIT;
-  font-size: 19px;
+  font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 28.288px; /* 148.887% */
   letter-spacing: -0.38px;
+
+  @media (max-width: 428px) {
+    font-size: 18px;
+  }
 `;
 
 export const ContentWrapper = styled.main`
@@ -118,9 +124,13 @@ export const ContentWrapper = styled.main`
 export const Content = styled.span<{ color: string }>`
   color: ${({ color }) => (color === 'yellow' ? '#ffe454' : '#fff')};
   font-family: SUIT;
-  font-size: 17.696px;
+  font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: 30.476px;
   letter-spacing: -0.708px;
+
+  @media (max-width: 428px) {
+    font-size: 11px;
+  }
 `;
diff --git a/src/views/MainPage/components/Tab/style.ts b/src/views/MainPage/components/Tab/style.ts
@@ -7,11 +7,11 @@ export const Wrapper = styled.section`
   margin-bottom: 38px;
 
   /* 태블릿 뷰 */
-  @media (max-width: 768px) and (min-width: 376px) {
+  @media (max-width: 768px) and (min-width: 429px) {
     margin-bottom: 26px;
   }
   /* 모바일 뷰 */
-  @media (max-width: 375px) {
+  @media (max-width: 428px) {
     margin-bottom: 14px;
   }
 `;
@@ -26,8 +26,8 @@ export const Tab = styled.h2`
   letter-spacing: -0.36px;
 
   margin-bottom: 8px;
-  /* 모바일 뷰 */
-  @media (max-width: 375px) {
+
+  @media (max-width: 428px) {
     font-size: 11px;
   }
 `;
@@ -43,13 +43,12 @@ export const Title = styled.h1`
 
   margin-bottom: 16px;
 
-  /* 태블릿 뷰 */
-  @media (max-width: 768px) and (min-width: 376px) {
+  @media (max-width: 768px) and (min-width: 429px) {
     font-size: 36px;
     letter-spacing: -1.08px;
   }
-  /* 모바일 뷰 */
-  @media (max-width: 375px) {
+
+  @media (max-width: 428px) {
     font-size: 21px;
     line-height: 29.103px; /* 138.588% */
     letter-spacing: -0.63px;
@@ -65,14 +64,13 @@ export const Description = styled.p`
   line-height: 28px; /* 164.706% */
   letter-spacing: -0.68px;
 
-  /* 태블릿 뷰 */
-  @media (max-width: 768px) and (min-width: 376px) {
+  @media (max-width: 768px) and (min-width: 429px) {
     font-size: 16px;
     line-height: 26px; /* 162.5% */
     letter-spacing: -0.64px;
   }
-  /* 모바일 뷰 */
-  @media (max-width: 375px) {
+
+  @media (max-width: 428px) {
     font-size: 10px;
     line-height: 14.942px; /* 149.424% */
     letter-spacing: -0.4px;