[김수연] Sprint3 #52

ramong26 · 2025-02-05T11:50:25Z

요구사항

기본

브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
주소와 이미지는 자유롭게 설정하세요.

주요 변경사항

스크린샷

멘토에게

Sprint2 미션 때 피드백 주신 "이미지가 지그재그로 배치되어야 합니다!" 이건 어떤 것을 의미하는지 모르겠습니다... 올바르게 잘 한 것 같은데 혹시 자세히 알려주실 수 있을까요?
숨김 아이콘으로 인해 화면을 줄여도 제대로 작동하지 않습니다.. 어떻게 해야하나요..? 어떤 이유 때문에 이런건가요..
netilfy를 써서 미리보기를 테스트 해봤지만 이미지가 제대로 보이지 않습니다. 짤림 현상이 일어나느 것 같은데 어떻게 해야하나요,,

ramong26 · 2025-02-05T11:56:25Z

..

ramong26 · 2025-02-05T11:57:22Z

..

dongqui

수연님 이번 미션도 고생 많으셨어요!!

대체로 잘 구현해주셨습니다 :)
미디어쿼리에 브레이크 포인트, 중복 스타일 들어간 부분을 전반적으로 다시 살펴주세요!

Sprint2 미션 때 피드백 주신 "이미지가 지그재그로 배치되어야 합니다!" 이건 어떤 것을 의미하는지 모르겠습니다... 올바르게 잘 한 것 같은데 혹시 자세히 알려주실 수 있을까요?
-> 죄송합니다..! 🙇‍♂️ 제가 이전에 사용됐던 피그마를 기준으로 말씀 드렸네요 😢

숨김 아이콘으로 인해 화면을 줄여도 제대로 작동하지 않습니다.. 어떻게 해야하나요..? 어떤 이유 때문에 이런건가요..
-> position과 관련된 내용을 다시 살펴보셔야 합니다 :)
https://developer.mozilla.org/ko/docs/Web/CSS/position
relative는 본래 자신의 위치를 기준으로 움직이죠! 따라서 password-container가 줄어든다고 해서 같이 움직이지 않습니다. password-container를 기준으로 움직이게 하기 위해 absolute를 활용해 보세요!

netilfy를 써서 미리보기를 테스트 해봤지만 이미지가 제대로 보이지 않습니다. 짤림 현상이 일어나느 것 같은데 어떻게 해야하나요,,
-> 이미지가 너무 큽니다~! 현재 2664 × 1383인데 권장사항은 1200 x 630입니다!
https://developers.facebook.com/docs/sharing/webmasters/images/

dongqui · 2025-02-06T02:24:14Z

index.html

@@ -31,26 +40,26 @@ <h1 class="header-title-font">일상의 모든 물건을 거래해 보세요</h1
            <img src="./img/Img_home_01.png" class="main-popular-sell-image" alt="판다마켓 인기 상품 사진">
            <div class="main-theme-basic">
                <div>
-                    <h1 class="main-popular-sell-font-top">Hot item</h1>
+                    <h2 class="main-popular-sell-font-top">Hot item</h2>


h tag 계층 구조를 다시 확인해주세요! (여기서 꼭 h tag를 쓰지 않아도 괜찮습니다!)

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람

dongqui · 2025-02-06T02:25:29Z

pages/login.html

@@ -13,21 +13,23 @@
    </div>
    <!-- form -->
    <form class="container-box">
-        <h1 class="email-password-font">이메일</h1>
-        <div class="email-password-container">
+        <label class="email-password-font">


label을 의미뿐 아니라 기능도 가지고 있는 태그입니다! 해당 기능을 위해서는 for을 사용하셔야 합니다 :) 참고해주세요~!
https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

dongqui · 2025-02-06T02:26:20Z

pages/login.html

        <button class="login-button">
-            <p class="login-button-font">로그인</p>
+            <h1 class="login-button-font">로그인</h1>


h tag는 해당 페이지의 제목을 표현합니다! 로그인 기능을 하는 버튼에 들어가는 것은 부적절해 보여요!

dongqui · 2025-02-06T02:35:13Z

style-login.css

+    .login-header-logo{ /**/
+        height: 66px;
+        width: 12.38rem;
+        height: 4.13rem;


height이 중복이군요 🤣

dongqui · 2025-02-06T02:38:17Z

style-login.css

+}
+
+/** ipad **/
+@media (max-width: 768px){


미디어 쿼리를 다시 확인해주세요~!
태블릿은 768~1199 입니다!

dongqui · 2025-02-06T02:38:35Z

style-login.css

+    }
+}
+
+@media (max-width: 375px){


여기도 다시 확인해주세요!

dongqui · 2025-02-06T02:39:38Z

style-login.css

+        margin-top: 14.385rem;
+    }
+
+    .login-header-logo{ /**/


반응형 이미지를 쓰실 때 picture를 써보셔도 좋아요!
지금은 큰 이미지를 다운 받고 css로 줄이고 있는데, 이미지는 페이지 성능에 큰 영향을 끼치는 요소중 하나입니다. 모바일 화면이라면 애초에 큰 이미지를 가져올 필요가 없는거죠 :)

dongqui · 2025-02-06T02:45:11Z

style-login.css

+    }
+
+
+    .email-box{


미디어쿼리 내부에 중복 스타일이 상당히 많이 들어가 있는 거 같습니다!
위에 정의한 스타일 외에 반응형에 추가로 필요한 요소만 넣어주시면 됩니다 :)

dongqui · 2025-02-06T02:53:22Z

index.html

버튼 확인해주세요~!

Sprint3

2b1efc7

ramong26 changed the title ~~Sprint 3~~ https://github.com/codeit-bootcamp-frontend/14-Sprint-Mission/pull/48 Feb 5, 2025

ramong26 self-assigned this Feb 5, 2025

ramong26 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Feb 5, 2025

ramong26 changed the base branch from main to Basic-김수연 February 5, 2025 11:57

ramong26 changed the title ~~https://github.com/codeit-bootcamp-frontend/14-Sprint-Mission/pull/48~~ [김수연] Sprint3 Feb 5, 2025

dongqui approved these changes Feb 6, 2025

View reviewed changes

dongqui merged commit 76523cc into codeit-bootcamp-frontend:Basic-김수연 Feb 6, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김수연] Sprint3 #52

[김수연] Sprint3 #52

ramong26 commented Feb 5, 2025 •

edited

Loading

ramong26 commented Feb 5, 2025

ramong26 commented Feb 5, 2025

dongqui left a comment •

edited

Loading

dongqui Feb 6, 2025

dongqui Feb 6, 2025

dongqui Feb 6, 2025

dongqui Feb 6, 2025

dongqui Feb 6, 2025

dongqui Feb 6, 2025

dongqui Feb 6, 2025

dongqui Feb 6, 2025

dongqui Feb 6, 2025

[김수연] Sprint3 #52

[김수연] Sprint3 #52

Conversation

ramong26 commented Feb 5, 2025 • edited Loading

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

ramong26 commented Feb 5, 2025

ramong26 commented Feb 5, 2025

dongqui left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ramong26 commented Feb 5, 2025 •

edited

Loading

dongqui left a comment •

edited

Loading