[feat] 반응형 기능 추가 - 미디어쿼리

[feat] 반응형 기능 추가 - 미디어쿼리

layout.css 에 미디어쿼리를 활용하여 모바일 크기일 때 사용할 수 있는 반응형 기능을 추가했습니다.

resolves : #9

Author: gaeun2o

html/.vscode/layout.css

@@ -46,7 +46,7 @@ body {
 }
 
 .title {
-    font-size: 56px; 
+    font-size: 61px; 
     font-weight: 800;
     line-height: 48px; 
     letter-spacing: -2px;
@@ -55,7 +55,7 @@ body {
 
 .subtitle {
     color: #927B91;
-    font-size: 19px; 
+    font-size: 24px; 
     font-weight: 500;
     margin-bottom: 30px; 
     line-height: 25px; 
@@ -147,3 +147,73 @@ body {
     line-height: 22px;
 }
 
+@media (max-width: 738px) {
+    body {
+        
+        margin: 0; /* 기본 여백 제거 */
+    }
+    .title-container {
+        align-items: center;
+        text-align: center;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .title{
+        font-size: 60px;
+    }
+    .subtitle {
+        margin-bottom: 39px; 
+    }
+
+    .container2 {
+        position: relative;
+        top: 10px;
+        left: auto;
+        width: 73%;
+        
+        margin-bottom: 237px; 
+        gap: 20px;
+        align-items: center;
+        
+    }
+    .container2 span{
+        margin-top : -20px;
+    }
+
+    .star {
+        margin-top : 16px;
+        gap: 32px;
+    }
+
+    .container {
+        flex-direction: column;
+        align-items: center;
+        margin-top: 260px;
+    }
+    .box_s{
+        display : flex;
+        flex-direction: column;
+        align-items: center;
+        height : 78px;
+    }
+
+    .box_B {
+        width: 100%;
+        margin-bottom: 0px;
+    }
+    .img{
+        margin-top : 15px; 
+    }
+    .b_title_subtitle{
+        margin-top : 15px;
+    }
+    .b_title{
+        margin-bottom: 8px;
+    }
+    .b_text{
+        margin-top : 10px;
+        font-size: 17px;
+        align-items: center;
+    }
+}
+