[고서영] Sprint 3 #120

K0seoyoung · 2025-04-10T03:17:15Z

요구사항

기본

공통

브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
- PC: 1200px 이상
- Tablet: 768px 이상 ~ 1199px 이하
- Mobile: 375px 이상 ~ 767px 이하
- 375px 미만 사이즈의 디자인은 고려하지 않습니다

랜딩 페이지

Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.

로그인, 회원가입 페이지 공통

Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

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

주요 변경사항

h 계층 구조 완벽 이해!
button 설정을 하니까 img 위치가 변하길래 css 수정도 했습니다.
css가 많아지다보니 좀 더 잘 구분되도록 주석 추가했습니다.

스크린샷

멘토에게

footer css 부분에 대한 자세한 피드백 부탁드립니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

dongqui

서영님, 이번 미션도 깔끔하게 잘 마무리해 주셨네요! 👍
자바스크립트도 기대하겠습니다! :)

코멘트 주신 부분은 리뷰 참고해 주세요!

dongqui · 2025-04-10T05:09:19Z

index.html

-    <link rel="stylesheet" href="./styles/components/footer.css" />
-    <link rel="stylesheet" href="./styles/components/gnb.css" />
+        <!-- Open Graph (OG) 메타 태그 -->
+        <meta property="og:title" content="판다마켓" />


og를 챙겨주셨군요! 👍

dongqui · 2025-04-10T05:09:55Z

index.html

+        />
+        <meta
+            property="og:image"
+            content="https://www.google.com/imgres?q=%ED%8C%90%EB%8B%A4&imgurl=https%3A%2F%2Fi.namu.wiki%2Fi%2FN7XtnLu7mENPBU1wMlAoOo5_w13roksendvuswR8gkFw_8SilcxCpT3kTTdzaP42jSpZAQ2-R4x3aNxaj6A3JA.webp&imgrefurl=https%3A%2F%2Fnamu.wiki%2Fw%2F%25ED%258C%2590%25EB%258B%25A4&docid=5YXeSdnyXQW-OM&tbnid=L95TdOcl4sN4TM&vet=12ahUKEwiptZXLvcyMAxU7sVYBHUTEITMQM3oECG4QAA..i&w=578&h=385&hcb=2&ved=2ahUKEwiptZXLvcyMAxU7sVYBHUTEITMQM3oECG4QAA"


음.. 지금은 사실 크게 중요하지는 않지만, 이미지가 아니라 나무위키 이미지 페이지를 불러오는 거 같네요! 🤣

dongqui · 2025-04-10T05:12:28Z

login.html

+                            name="password"
+                            placeholder="비밀번호를 입력해 주세요"
+                        />
+                        <button>


form 안에 있는 버튼은 type이 submit으로 됩니다 :) submit이 아니라 다른 기능이라면 type을 명시해 주셔야 해요!

dongqui · 2025-04-10T05:17:06Z

styles/components/buttons.css

+        width: 100%;
+        padding: 16px 71px;
+        font: var(--text-2lg-semibold);
+        transition: 0.5s;


깨알 같은 transition.. 🤣 👍

dongqui · 2025-04-10T05:31:38Z

styles/components/Home.css

+    .landing-text h2 {
+        text-align: center;
+    }
+    .landing-text.top {


경우에 따라 width로 줄바꿈을 조절하는 것도 가능하지만, br 과 display를 활용해 보시면 조금 더 쉽게 원하는 UI를 만들 수 있습니다!

dongqui · 2025-04-10T05:42:18Z

styles/components/footer.css

+        padding: 32px 32px 0 32px;
+    }
+
+    .footer-info {


footer css 부분에 대한 자세한 피드백 부탁드립니다.
-> 특별히 리뷰 드릴 부분 없이 너무 잘 하셨습니다 👍 absolute의 경우 기준이 되는 요소의 크기가 변하면 깨질 가능성이 크지만, 현재 footer의 경우 크기가 고정 되어있으니 상관 없을 거 같습니다 :)

다른 방법을 쓰고 싶으시다면 flex와 order, grid와 grid-template-areas 등을 사용해 보실 수 있습니다!

dongqui · 2025-04-10T05:42:56Z

styles/components/footer.css

+    .footer-links {
+        justify-content: space-between;
+        width: 50%;
+        margin-right: auto;


크게 상관 없지만, footer-wrapper가 이미 flex를 가지고 있으므로 footer-wrapper에 space-beteen을 추가해줘도 되겠네요 :)

dongqui · 2025-04-10T05:48:30Z

styles/components/sign.css

    right: 24px;
    top: 50%;
-    transform: translateY(-50%);
+    transform: translateY(-80%);


버튼에 absolute가 들어가야 합니다!
지금은 이미지에 abolute가 걸리면서 버튼에서 탈출했고, 버튼은 height을 차지하면서 레이아웃이 깨진 거 같네요!

dongqui · 2025-04-10T05:50:51Z

index.html

+                            alt="home-card02"
+                        />
+                        <div class="section-home-text reverse">
+                            <h1>Search</h1>


h tag가 참 성가시죠.. 😭

h1 tag는 페이지에 하나만 사용됩니다~! 🤣
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람

dongqui · 2025-04-10T05:54:21Z

styles/components/Home.css

-
 }

 .section-home-text h2 {


모바일 폰트 크기를 확인해 주세요 :)

K0seoyoung added 3 commits April 10, 2025 11:01

feat: home page 반응형 구현

d49ea27

feat: 반응형 추가

b2719ef

feat: landing page meta 설정

d784625

K0seoyoung requested a review from dongqui April 10, 2025 03:17

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

dongqui approved these changes Apr 10, 2025

View reviewed changes

dongqui merged commit 020adf5 into codeit-bootcamp-frontend:Basic-고서영 Apr 10, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[고서영] Sprint 3 #120

[고서영] Sprint 3 #120

Uh oh!

K0seoyoung commented Apr 10, 2025

Uh oh!

dongqui left a comment •

edited

Loading

Uh oh!

dongqui Apr 10, 2025

Uh oh!

dongqui Apr 10, 2025

Uh oh!

dongqui Apr 10, 2025

Uh oh!

dongqui Apr 10, 2025

Uh oh!

dongqui Apr 10, 2025

Uh oh!

dongqui Apr 10, 2025

Uh oh!

dongqui Apr 10, 2025

Uh oh!

dongqui Apr 10, 2025

Uh oh!

dongqui Apr 10, 2025

Uh oh!

dongqui Apr 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

[고서영] Sprint 3 #120

[고서영] Sprint 3 #120

Uh oh!

Conversation

K0seoyoung commented Apr 10, 2025

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

dongqui left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dongqui left a comment •

edited

Loading