[전유진] sprint3 #153

yuj2n · 2025-03-22T18:15:32Z

📝요구사항

배포 사이트 URL : https://yuj2n-pandamarket.netlify.app/

📕기본

브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다. 
PC: 1200px 이상
Tablet: 768px 이상 ~ 1199px 이하
Mobile: 375px 이상 ~ 767px 이하
375px 미만 사이즈의 디자인은 고려하지 않습니다
Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.

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

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

📖심화

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

📌주요 변경사항

미션2 반영

login.css -> auth.css
가상 요소 삭제 후 padding-top을 통해 색상 적용
reset.css와 겹치는 내용 auth.css에서 삭제
등등 이전 피드백 사항 반영

💻스크린샷

🙇‍♀️멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.

…nd/15-Sprint-Mission into Basic-전유진-sprint3

yuj2n

최대한 피그마 디자인과 비슷할 수 있게 노력하였으며 css에서 선택자와 관련하여 좋지 않은 방법으로 접근한 경우가 있다면 피드백 부탁드립니다!!🙇‍♀️

yuj2n · 2025-03-23T05:43:50Z

css/auth.css

+@media (max-width: 767px) {
+  main {
+    width: 100%;
+    max-width: 40rem; /* 최대 너비 400px */
+    padding: 0 1.6rem; /* 좌우 여백 16px */
+  }
+  .logo-box {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  form {
+    margin-top: 0;
+    width: 100%; /* 부모(main)의 너비를 따름 */
+  }
+  .logo {
+    width: 5.2rem; /* 로고 크기 줄이기 */
+    height: auto;
+  }
+  .pandamarket {
+    width: 13.3rem; /* 텍스트 로고 크기 조절 */
+    height: auto;
+  }
+}


main 내부에 logo-box와 form이 있어
body와 main을 통해 간결하게 작성하고자 했는데 먹지 않아서 logo-box와 form에 따로 css를 넣어주었는데
body와 main만으로 작성할 수도 있을까요?

어떤 질문이신지 제가 잘 모르겠습니다~ 먹지 않는 이유가 무엇인지, 어떤 것을 바라시는지에 따라 가능한지 아닌지가 나뉠 것 같아요.
다만 body와 main 은 태그이니 저는 클래스 선택자로 작성하시는 것이 더 명확하고 좋다고 생각합니다.

css/base.css

login.html

yuj2n · 2025-03-23T05:48:29Z

index.html

+                  <h3>일상의 모든 물건을 </h3>
+                  <h3>거래해 보세요</h3>


반응형으로 인해 pc에서는 줄넘김, 태블릿에서는 한 줄로 보이도록 하기 위해
각 h3태그로 감싸준 뒤 태블릿 환경에서 display: inline;을 활용하였는데 괜찮은 방법인지 궁금합니다!

반응형 처리를 위해 태그로 구분하신 점은 좋습니다~ 다만 h3 태그로 구분하시기보다 h3 태그안에 span 태그로 구분하시는 것을 추천드러요. h 태그는 heading 태그라서 span이 더 적절할 것 같습니다

yuj2n · 2025-03-23T05:49:39Z

index.html

-                  </h3>
-                  <p class="info">
+                  <h3 class="hot">인기 상품을 확인해 보세요</h3>
+                  <p id="check" class="info">


class를 통해 디자인을 하고자 할 때 작동을 하지 않아 id태그를 주고 적용을 하였는데 이럴 때 id태그를 주는 것이 맞을까요?

클래스를 통해 css 선택자를 입력했을 때 작동을 하지 않았다면 우선순위가 낮았을 수 있습니다.
아이디 선택자의 경우 클래스 선택자보다 우선순위가 높기 때문에 위의 경우 해결책이 된 것 같아요.
다만 이런경우 정확히 왜 동작하지 않는지 이유를 찾아야 아이디 선택자를 쓰는 것이 좋은지 판단할 수 있습니다~

yuj2n · 2025-03-23T05:51:30Z

css/index.css

-.reverse .text-box {
-  width: 100%;
-  height: 20rem;
-}
-
-.reverse p {
-  width: 100%;
-  height: 11.2rem;
-}
-
-.reverse .info {
-  width: 100%;
-}
-
-.icon-img {
-  height: auto;
-}
-


없어도 작동하는 부분이기에 삭제하였습니다.

CSS에서 중복되거나 불필요한 부분은 추후 찾으려고 하면 어렵기 때문에 이렇게 작업하실때 가지치기 해주시는 것이 중요합니다!
너무 잘하셨어요~

css/index.css

GANGYIKIM

유진님 3번째 미션 제출 고생하셨습니다!
반응형 작업이 처음에는 특히 쉽지 않은데 잘 하셨어요.
남겨주신 코멘트들에 피드백 남겨드리고 추가적으로 코멘트 남겼으니 도움이 되면 좋겠습니다.
다음 미션도 화이팅입니다!

GANGYIKIM · 2025-03-27T06:32:42Z

index.html

+    <meta property="og:title" content="판다 마켓">
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+    <meta property="og:url" content="https://yuj2n-pandamarket.netlify.app/"> <!-- 실제 URL 입력 -->
+    <meta property="og:image" content="https://yuj2n-pandamarket.netlify.app/images/image.png"> <!-- 썸네일 이미지 URL -->


💬 여담
이러한 메타태그가 제대로 되어 있는지 확인할 수 있는 방법이 여러가지 있습니다~
참고로 각 SNS 에서 제공하는 개발자 페이지에서도 확인이 가능합니다~

GANGYIKIM · 2025-03-27T06:34:34Z

index.html

+            <a href="/" class="logo-box">
+              <img class="logo" src="images/logo.png" width="45" height="45" />
+              <img src="images/pandamarket.png" height="51" />
+            </a>


❗️ 수정요청
디자인 상에서 화면이 작아지면 "판다마켓"이라는 글자만 남게됩니다~ 확인해보시고 디자인처럼 수정해보세요!

GANGYIKIM · 2025-03-27T06:35:51Z

index.html

+    <div class="unsupported-screen">
+      <div class="unsupported-message">
+        현재 기기에서는 지원하지 않습니다.<br />
+        375px 이상의 화면에서 이용해 주세요.
+      </div>
+    </div>


👍 칭찬
지원하는 화면 사이즈 미만의 경우 안내해주시는 것 좋아요~

GANGYIKIM · 2025-03-27T06:39:43Z

css/index.css

+  flex-shrink: 0; /* Prevent shrinking */
+  min-width: 300px; /* Set a minimum width */


💊 제안
주석을 다는 것은 좋은 습관입니다. 다만 주석 또한 읽어야 하는 정보라 중복되지 않는 내용을 입력해주시는 것이 가독성면에서 더 좋아요.
지금 주석은 css 속성과 중복되는 내용이라 없어도 될 것 같습니다~

GANGYIKIM · 2025-03-27T06:45:58Z

index.html

        </article>
        <section>
-          <div class="section">
+          <div class="section top">


❗️ 수정요청
화면 사이즈가 (min-width: 1200px) 일 때 section의 width 가 90%가 되면서 왼쪽에 붙게되네요.
피그마 디자인처럼 중앙에 올 수 있게 수정해주시면 좋겠어요!

GANGYIKIM · 2025-03-27T06:53:16Z

css/index.css

+}
+
 /* main section */
 section {


❗️ 수정요청
section 의 경우 position 속성이 없으니 top 속성이 적용되지 않습니다~
불필요한 속성의 경우 지워주세요!

GANGYIKIM · 2025-03-27T07:00:47Z

index.html

+            <div id="opposite" class="content">
              <div class="reverse content-box">
                <p>Search</p>
                <div class="text-box">


❗️ 수정요청
해당 태그의 width가 길어 가로 스크롤이 생기네요~
확인 후 가로 스크롤이 생기지 않게 수정해보세요.

GANGYIKIM · 2025-03-27T07:04:59Z

css/auth.css

+.easy-login {
+  width: 64rem;


❗️ 수정요청
해당 태그의 경우 디자인대로 처리가 안 된 것 같아요!
아래처럼 width를 반응형 단위로 해 부모가 줄어들면 같이 줄어들게 해주고, max-width를 통해 제한을 해주면 디자인대로 잘 동작할 것 같아요.

Suggested change

.easy-login {

width: 64rem;

.easy-login {

max-width: 64rem;

width: 100%;

yuj2n added 23 commits March 20, 2025 11:42

feat: login.css 파일명을 좀 더 포괄적인 auth.css로 변경

e204978

불필요한 세팅 제거 및 이동

f648040

login페이지 에 불필요한 index.css 불러오기 삭제 및 login과 signup 페이지에 동일한 상단 여백 주기

c0d14f8

feat: class 추가로 태그 선택자 삭제

a5d5d55

Merge branch 'Basic-전유진' of https://github.com/codeit-bootcamp-fronte…

cb45e1d

…nd/15-Sprint-Mission into Basic-전유진-sprint3

style: 반응형에 따른 css 수정

03c32ed

상단 바 css 조정

46d2b13

css 일부 변경

c1768f7

태블릿 사이즈 section css 수정 및 작성

1b14f59

불필요한 코드 삭제 및 섹션 내용 좌우정렬

cdc780b

모바일 사이즈 섹션 css 작성

d48d7ae

모바일 사이즈 footer 작성

1f2abae

공유 디버거 이미지 추가

6aab6c8

375px 이하 화면 가리는 기능 추가

f0205ba

공유 디버거 사진 변경

274f54b

login과 signup 페이지 모바일 사이즈 반응형 구현 및 placeholder와 inactive 기능 추가

5ec8813

주석 추가

2aed9d0

reset.css와 중복 내용 삭제

be0919c

불필요한 공백 삭제

1f1b2c2

눈 아이콘 버튼 태그로 감싸기

54c9e03

form에 적합하지 않은 내용 외부로 이동

872b906

필요없는 주석 삭제

b4b040e

코드 최종 수정

585ed28

yuj2n changed the title ~~Basic 전유진 sprint3~~ [전유진] sprint3 Mar 22, 2025

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

yuj2n requested a review from GANGYIKIM March 22, 2025 18:17

yuj2n commented Mar 23, 2025

View reviewed changes

GANGYIKIM approved these changes Mar 27, 2025

View reviewed changes

GANGYIKIM merged commit 1160ac3 into codeit-bootcamp-frontend:Basic-전유진 Mar 27, 2025

		<h3>일상의 모든 물건을 </h3>
		<h3>거래해 보세요</h3>

		flex-shrink: 0; /* Prevent shrinking */
		min-width: 300px; /* Set a minimum width */

[전유진] sprint3 #153

[전유진] sprint3 #153

Uh oh!

Conversation

yuj2n commented Mar 22, 2025

📝요구사항

배포 사이트 URL : https://yuj2n-pandamarket.netlify.app/

📕기본

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

📖심화

📌주요 변경사항

💻스크린샷

🙇‍♀️멘토에게

Uh oh!

yuj2n left a comment

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!

Uh oh!

Uh oh!

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!

Uh oh!

Uh oh!

GANGYIKIM 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

GANGYIKIM left a comment •

edited

Loading