맨 위 메뉴와 중간의 사진 배치 부분 피그마 시안

cafeW.css

@@ -1,149 +1,133 @@
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
+
 :root{
-  --base-white:#fff
+  --base-white:#fff;
+  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
 }
 
+*, *::before, *::after{
+  box-sizing: border-box;
+}
 
-.main{
+body, html{
+  margin:0;
+  width: 100%;
+  height:100%;
+}
 
-  display: flex;
-  justify-content: center;
+
+.favorite-section{
+  padding: 10vw;
+}
+
+.bg-filter{
+  position: absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  filter: brightness(50%);
+
+  /* 단축 속성으로 바꿔보기 */
   background-repeat: no-repeat;
-  background-image: url(/bgcoffee.png) ;
+  background-image: url(./assets/bgcoffee.png) ;
   background-position: center;
   background-attachment: fixed;
-  /* min-width: 1440px; */
-
 }
 
-
 .container{
-  min-width: 1440px;
+  width: 100%;
+  max-width:1200px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
 }
 
 .white-letter{
+  flex-basis: 40%;
+  z-index: 1;
   color: var(--base-white);
-  width: max-content;
   height: max-content;
-  margin: 110px 0 110px 110px;
-  height: 880px;
-  width: 330px;
-  /* width: 100%;
-  height: auto; */
-}
-
-.title1{
-  font-size: 115px;
-  letter-spacing: 4px;
-  margin: 0;
-  padding: 0;
-}
-
-.title1 span{
-  letter-spacing: 22px;
-}
-
-.title2{
-  font-size: 55px;
-  letter-spacing: 6px;
-  margin: 0;
-  padding: 0;
-}
-
-
-
-.title1, .title2{
-  line-height: 0.8;
-  text-align: left;
-  font-weight: normal;
-}
-
-.title3{
-  font-size: 25px;
-  letter-spacing: 2px;
-  margin-top: 35px;
-}
-
-.description{
-  font-size: 15px;
-  margin-bottom: 30px;
-}
-
-.title3, .description{
   text-align: right;
-}
-
-
 
-a{
-  text-decoration: none;
-  color: var(--base-white);
-  border: 2px solid var(--base-white);
-  padding: 5px 20px 5px 20px;
+  & h1,  & h2{
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+    font-weight: normal;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+  }
+
+  & h1{
+    font-size: 115px;
+    letter-spacing: 1px;
+  }
+  & h1 span{
+    letter-spacing: 16px;
+  }
+
+  & h2{
+    font-size: 55px;
+    letter-spacing: 6px;
+  }
+
+  & h3{
+    font-size: 32px;
+    letter-spacing: -1px;
+    word-spacing: 2px;
+    margin-top: 35px;
+    font-weight: 300;
+  }
+
+  & p{
+    font-size: 15px;
+    margin-bottom: 30px;
+    line-height: 1.6;
+  }
 
 }
 
-.a-right{
-  text-align: right;
+.detail{
+  text-decoration: none;
+  color: inherit;
+  border: 2px solid currentColor;
+  padding: 10px 24px;
+  transition: 100ms cubic-bezier(0.165, 0.84, 0.44, 1);
+
+  &:hover{
+    color: salmon;
+  }
 }
 
 .photos{
- /* border: 2px solid var(--base-white);  */
-  width: 50%;
-  height: 50%;
-  position: relative;
-  /* aspect-ratio: auto; */
-
-
+  flex-basis: 60%;
+  position:relative;
 }
 
-.photo1{
+
+.photo{
   border: 0;
   outline: 0;
-  height: 300px;
-  width: 210px;
-  /* object-fit: cover; */
-  background-image: url(/latte.svg);
-  background-repeat: no-repeat;
-  background-position: -200px 0;
+  width: clamp(150px, 50vw, 300px);
+  aspect-ratio: 2.25/3;
+  background-position: center;
+  background-size: cover;
+  right:0;
+  top: 10%;
+  box-shadow: 0 0 0 8px #fff;
   position: absolute;
-  top:0;
-  right: 500px;
-  top: 120px; 
-  transform: rotate( 350deg );
-  box-shadow: 0 0 0 8px #fff ;
 }
 
-.photo2{
-  border: 0;
-  outline: 0;
-  height: 300px;
-  width: 210px;
-
-  /* object-fit: cover; */
-  background-image: url(/hands-coffee.svg);
-  background-repeat: no-repeat;
-  background-position: -180px 0;
-  position: absolute;
-  right: 340px;
-  top: 80px; 
-  transform: rotate( 10deg );
-  box-shadow: 0 0 0 8px #fff ;
+.one{
+  background-image: url(./assets/latte.svg);
+  transform: translateX(-120px)  rotate( 350deg );
 }
 
-.photo3{
-  border: 0;
-  outline: 0;
-  height: 300px;
-  width: 210px;
-  /* object-fit: cover; */
-  background-repeat: no-repeat;
-  background-image: url(/book.svg);
-  background-position: -200px 0;
-  position: absolute;
-  right: 180px;
-  top: 220px; 
-  transform: rotate( 25deg );
-  box-shadow: 0 0 0 8px #fff ;
+.two{
+  background-image: url(./assets/hands-coffee.svg);
+  transform: translateY(-20px) rotate( 10deg );
+}
+
+.three{
+  background-image: url(/assets/book.svg);
+  transform: translate(120px, 100px) rotate( 25deg );
 }

cafeW.html

@@ -9,23 +9,24 @@
 </head>
 
 <body>
-  <section class="main">
+  <section class="favorite-section">
+    <div class="bg-filter"></div>
     <div class="container">
       <div class="white-letter">
-        <h1 class="title1"><span>PICK</span> YOUR</h1>
-        <h2 class="title2">FAVORITE</h2>
-        <h3 class="title3">다양한 메뉴를<br />카페 W에서 즐겨보세요</h3>
-        <p class="description">카페 W만의 특별함을 경험할 수 있는 최상의 선택 음료<br />
-          카페 W 커피와 완벽한 어울림을 자랑하는 푸드<br />
-          사용한 시도와 디자인으로 가치를 더하는 상품<br />
-          소중한 사람에게 마음을 전하는 가장 좋은 방법<br />
-          카페 W 카드</p>
-        <div class="a-right"><a class="detail" href="/">자세히 보기</a></div>
+        <h1><span>PICK</span><br />YOUR</h1>
+        <h2>FAVORITE</h2>
+        <h3>다양한 메뉴를<br />카페 W에서 즐겨보세요</h3>
+        <p>카페 W만의 특별함을 경험할 수 있는 최상의 선택 음료
+          카페 W 커피와 완벽한 어울림을 자랑하는 푸드
+          사용한 시도와 디자인으로 가치를 더하는 상품
+          소중한 사람에게 마음을 전하는 가장 좋은 방법</p>
+        <a class="detail" href="/">자세히 보기</a>
       </div>
       <div class="photos">
-        <button class="photo1" aria-label="카페라떼 아트를 만드는 손"></button>
-        <button class="photo2" aria-label="하트모양이 그려진 카페라떼를 마시려는 손"></button>
-        <button class="photo3" aria-label="테이블 위에 잡지를 올려두고 차를 마시는 남성"></button>
+        <dialog role="alertdialog" aria-modal="true">사진 원본 볼 수 있는 뒤가 딤드처리 되는 모달 만들기</dialog>
+        <button class="photo one" aria-label="카페라떼 아트를 만드는 손"></button>
+        <button class="photo two" aria-label="하트모양이 그려진 카페라떼를 마시려는 손"></button>
+        <button class="photo three" aria-label="테이블 위에 잡지를 올려두고 차를 마시는 남성"></button>
       </div>
 
   </section>

figma.html → header.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Cafe W</title>
-  <link rel="stylesheet" href="./figma.css" />
+  <link rel="stylesheet" href="./header.css" />
 </head>
 
 <body>
@@ -17,14 +17,14 @@
       </ul>
       <div class="cafe-main1">
         <a href="#">
-          <img src="/CafeW.svg" alt="왕관 모양 cafe W" />
+          <img src="./assets/CafeW.svg" alt="왕관 모양 cafe W" />
           <span>CAFE <b>W</b></span>
         </a>
       </div>
       <div class="search">
         <div class="btn-wrap">
           <button class="btn" type="button">
-            <img src="./Search.svg" alt="돋보기" />
+            <img src="./assets/Search.svg" alt="검색 돋보기" />
           </button>
         </div>