Gaeun week2 task

App.js

@@ -0,0 +1,26 @@
+import {useState}from 'react';
+
+function App() {
+  const [time, setTime] = useState(1);
+  const handleClick = () => {
+    let newTime;
+    if (time >= 22){
+      newTime =1;
+    }else {
+      newTime = time +1;
+    }
+    setTime(newTime);
+  };
+
+  console.log(' 업데이트');
+
+
+  return (
+    <div>
+      <span>현재 시각 : {time}시 </span>
+      <button onClick={handleClick}> Update</button>
+    </div>
+  );
+}
+
+export default App;

html/.vscode/layout.css

@@ -0,0 +1,244 @@
+.background {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    background: #fff;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+body {
+    font-family: 'League Spartan', sans-serif;
+    margin: 0; /* 기본 여백 제거 */
+}
+
+.path {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    max-width: 80vw;  /* 최대 너비를 화면의 80%로 제한 */
+    max-height: 80vh; /* 최대 높이를 화면의 80%로 제한 */
+    width: auto;      /* 자동 너비 조정 */
+    height: auto;     /* 자동 높이 조정 */
+}
+
+.path2 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    max-width: 80vw;  /* 최대 너비를 화면의 80%로 제한 */
+    max-height: 80vh; /* 최대 높이를 화면의 80%로 제한 */
+    width: auto;      /* 자동 너비 조정 */
+    height: auto;     /* 자동 높이 조정 */
+}
+
+.title-container {
+    display: flex;
+    flex-direction: column; 
+    position: absolute;
+    top: 50px; 
+    left: 165px;
+    width: 445px; 
+    color: #512051;
+    margin-bottom: 20px;
+}
+
+.title {
+    font-size: 61px; 
+    font-weight: 800;
+    line-height: 48px; 
+    letter-spacing: -2px;
+    margin-bottom: 15px; 
+}
+
+.subtitle {
+    color: #927B91;
+    font-size: 24px; 
+    font-weight: 500;
+    margin-bottom: 30px; 
+    line-height: 25px; 
+}
+
+.container2 {
+    display: flex;
+    flex-direction: column; 
+    position: absolute;
+    top: 118px; 
+    left: 700px; 
+    width: 445px; 
+    gap: 20px; 
+    color: #512051;
+}
+
+.box_s {
+    display: flex;
+    align-items: center;
+    background: #F7F2F7;
+    border-radius: 8px;
+    width: 100%; 
+    height: 56px; 
+    gap: 32.45px; 
+}
+
+.star {
+    margin-left: 32px;
+    height: auto;
+}
+
+.container {
+    display: flex;
+    flex-direction: row; 
+    position: absolute;
+    top: 434px;
+    align-items: center;
+    width: calc(100% - 330px); 
+    gap: 20px; 
+}
+
+.box_B {
+    display: flex;
+    flex-direction: column;
+    width: 350px;
+    height: 225px;
+    background: #512051;
+    border-radius: 8px;
+    padding: 20px;
+    color: white;
+}
+.box_B_content {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px; 
+}
+
+.img {
+    width: 50px;
+    height: 50px;
+    margin-left: 32PX;
+    border-radius: 50%;
+    margin-top: 30px;
+    margin-right: 23px; 
+}
+
+.b_title_subtitle {
+    display: flex;
+    flex-direction: column;
+    margin-top: 30px;
+
+}
+.b_title {
+    font-size: 17px;
+    font-weight: 700;
+    margin-bottom: 4px;
+}
+
+.bolder {
+    font-weight: bold;
+}
+
+.b_subtitle {
+    font-size: 17px;
+    color: #EE69A4;
+    font-weight: 400;
+}
+
+.b_text {
+    margin : 22px;
+    width: 85%;
+    font-size: 16.5px;
+    font-weight: 500;
+    line-height: 22px;
+
+}
+
+/* 미디어 쿼리 추가로 반응형 디자인 설정 */
+@media (max-width: 375px) {
+    body {
+
+        margin: 0; /* 기본 여백 제거 */
+    }
+    .title-container {
+        align-items: center;
+        text-align: center;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .title{
+        font-size: 60px;
+    }
+    .subtitle {
+        margin-bottom: 39px; 
+        font-size: 19px;
+        width : 335px;
+    }
+    .path {
+        top: 1401.396;
+    }
+
+    .container2 {
+        position: relative;
+        top: 10px;
+        left: auto;
+        width: 85%;
+        height :  25%;
+        margin-top: 337px;
+        margin-bottom: 237px; 
+        gap: 20px;
+        align-items: center;
+
+    }
+    .container2 span{
+        margin-top : -20px;
+    }
+
+    .star {
+        margin-top : 16px;
+        margin-right : 16px;
+
+    }
+
+    .container {
+        flex-direction: column;
+        align-content: center;
+        margin-top: 260px;
+        width: 78%;
+        height : 25%;
+
+    }
+    .box_s{
+        display : flex;
+        flex-direction: column;
+        align-items: center;
+        height : 95px;
+    }
+
+    .box_B {
+        height: 23vh;
+        width: 77vw;
+        margin-bottom: 0px;
+        align-content: center;
+        padding-left: 12px;
+        padding-right: 12px;
+
+    }
+    .img{
+        margin-top : 15px; 
+        margin-left : 10px;
+    }
+    .b_title_subtitle{
+        margin-top : 15px;
+    }
+    .b_title{
+        margin-bottom: 8px;
+    }
+    .b_text{
+        margin-top : 10px;
+        font-size: 16px;
+        width : 93%;
+        align-items: center;
+        margin-left : 10px;
+    }
+}
+

html/.vscode/layout.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>layout</title>
+        <link rel="stylesheet" href="layout.css">
+        <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;700;800&display=swap" rel="stylesheet">
+
+    </head>
+    <body>
+        <div class="background">
+
+            <svg xmlns="http://www.w3.org/2000/svg" width="584" height="362" viewBox="0 0 584 362" fill="none" class="path2">
+                <path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M584 0C584 0 523.967 124.2 356.859 157.064C189.751 189.928 253.009 223.076 170.91 288.86C88.8111 354.645 0 362 0 362V0H584Z" fill="url(#paint0_linear_0_65)"/>
+                <defs>
+                <linearGradient id="paint0_linear_0_65" x1="-281.401" y1="163.987" x2="4.4935" y2="654.58" gradientUnits="userSpaceOnUse">
+                    <stop stop-color="#8A4389" stop-opacity="0.01"/>
+                    <stop offset="1" stop-color="#512051"/>
+                    <stop offset="1" stop-color="#512051"/>
+                    <stop offset="1" stop-color="#512051"/>
+                </linearGradient>
+                </defs>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="1085" height="673" viewBox="0 0 1085 673" fill="none" class="path">
+                <path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M0 673C0 673 111.534 442.099 422 381C732.466 319.901 614.94 258.276 767.47 135.975C920 13.6747 1085 0 1085 0V673H0Z" fill="url(#paint0_linear_0_64)"/>
+                <defs>
+                <linearGradient id="paint0_linear_0_64" x1="1607.81" y1="368.129" x2="1076.12" y2="-543.631" gradientUnits="userSpaceOnUse">
+                    <stop stop-color="#8A4389" stop-opacity="0.01"/>
+                    <stop offset="1" stop-color="#512051"/>
+                    <stop offset="1" stop-color="#512051"/>
+                    <stop offset="1" stop-color="#512051"/>
+                </linearGradient>
+                </defs>
+            </svg>
+            <div class="title-container">
+                <h1 class="title"><span class="bolder">10,000+ of our users love our products.</span></h1>
+                <h2 class="subtitle">We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services.</h2>
+            </div>
+
+            <div class="container2">
+                <div class="box_s">
+                    <img class="star" src="assets/stars.png"/>
+                    <span class="bolder">Rated 5 Stars in Reviews</span>
+                </div>
+                <div class="box_s">
+                    <img class="star" src="assets/stars.png"/>
+                    <span class="bolder">Rated 5 Stars in Report Guru</span>
+                </div>
+                <div class="box_s">
+                    <img class="star" src="assets/stars.png"/>
+                    <span class="bolder">Rated 5 Stars in BestTech</span>
+                </div>
+            </div>
+
+            <div class="container">
+                <div class="box_B">
+                    <div class="box_B_content">
+                    <img class="img" src="assets/Oval.png"/>
+                    <div class="b_title_subtitle">
+                        <div class="b_title">Colton Smith</div>
+                        <div class="b_subtitle">Verified Buyer</div>
+                    </div>
+                    </div>
+                    <div class="b_text">“We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent!”</div>
+                </div>
+                <div class="box_B">
+                    <div class="box_B_content">
+                    <img class="img" src="assets/Oval2.png"/>
+                    <div class="b_title_subtitle">
+                        <div class="b_title">Irene Roberts</div>
+                        <div class="b_subtitle">Verified Buyer</div>
+                    </div>
+                    </div>
+                    <div class="b_text">“Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery.”</div>
+                </div>
+                <div class="box_B">
+                    <div class="box_B_content">
+                    <img class="img" src="assets/Oval3.png"/>
+                    <div class="b_title_subtitle">
+                        <div class="b_title">Anne Wallace</div>
+                        <div class="b_subtitle">Verified Buyer</div>
+                        </div>  
+                    </div>
+                    <div class="b_text">“Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend to everyone!”</div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>