[이은주] sprint3 #99

eund00 · 2024-11-05T01:57:30Z

요구사항

기본

공통

브라우저에 현재 보이는 화면의 영역(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 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
주소와 이미지는 자유롭게 설정하세요.

스크린샷

https://eundoo.netlify.app/ 에 담아서 심화 요구사항 링크 미리보기 확인했습니다~

멘토에게

화면이 모바일 기기로 줄어들었을 때, 푸터의 copyright부분을 absolute로 띄웠어요. 이렇게 해도 될까요? copyright 정보가 담긴 텍스트를 absolute로 띄워 두는 게 맞나 싶어서요. (bottom이 두 번 들어간 건 실수입니당..)

색상을 변수에 담아서 사용해보았어요. 그런데 사용하는 색상들이 점점 많아지고, 또 자주 사용하는 색상이 있는 반면 한 두 번 사용되는 색상이 있어서요. 보통은 자주 사용하는 색상만 변수에 담고 나머지 한 두 번 사용되는 색상은 #fffff나 rba(255,255,255)처럼 직접 사용하는 게 좋을까요? 변수에 담는 색상의 기준이 궁금해요

피씨/태블릿/모바일에 대한 CSS를 캡쳐의 이미지처럼 각각 3개의 미디어쿼리 안에 담았어요. 기기별로 보기가 편할 것 같아서요. 그런데 이렇게 해도 될까요? 아니면 피씨는 굳이 미디어쿼리 안에 넣지 않는 게 좋을까요?

태블릿과 모바일의 미디어쿼리를 (min-width: 768px) and (max-width: 1199px)처럼 딱 지정한 너비에서만 css가 적용되게끔 했어요. 그런데 사진처럼 태블릿이 PC의 css를 내려받고, 또 모바일이 태블릿의 css를 내려받는 방식으로 하는 게 좋을까요?
지금은 루트폴더에 css, font, img폴더를 만들어서 파일들을 관리하고 있는데요. 이 방식이 맞을까요? html파일들만 폴더 밖으로 내놓는 게 맞는지, index.html을 제외한 페이지들의 html파일도 따로 폴더를 생성하여 그 안에 넣어 관리해야 하는지 궁금합니다.

…nd/12-Sprint-Mission into Basic-이은주

1005hoon · 2024-11-05T14:14:31Z

화면이 모바일 기기로 줄어들었을 때, 푸터의 copyright부분을 absolute로 띄웠어요. 이렇게 해도 될까요? copyright 정보가 담긴 텍스트를 absolute로 띄워 두는 게 맞나 싶어서요. (bottom이 두 번 들어간 건 실수입니당..)

음 absolute으로 띄워야만 하는 이유가 있으신가요!? 굳이 absolute으로 띄울 필요가 없어보입니다

1005hoon · 2024-11-05T14:16:40Z

색상을 변수에 담아서 사용해보았어요. 그런데 사용하는 색상들이 점점 많아지고, 또 자주 사용하는 색상이 있는 반면 한 두 번 사용되는 색상이 있어서요. 보통은 자주 사용하는 색상만 변수에 담고 나머지 한 두 번 사용되는 색상은 #fffff나 rba(255,255,255)처럼 직접 사용하는 게 좋을까요? 변수에 담는 색상의 기준이 궁금해요

좋은 고민 영역입니다.
이제 개발하면서 어느 수준부터 재사용 가능한 요소로 만들것인지 고민하게 될텐데요.
이에 대해서도 정답은 없습니다.

다만, 몇가지 이야기 해볼 수 있는게

지금처럼 디자인 시안에서 디자이너가 명시적으로 해당 스타일은 어떤 이름으로 칭합시다! 라고 이야기를 했다면 그 값에 대해서는 변수를 만들어주는게 좋아요. 만약 지금은 gray 700을 사용하고있다가, 디자이너가 gray 700을 800으로 일괄적으로 바꿔주세요라는 요청이 들어올 수도 있거든요.

그게 아니라면 개발자가 판단해서 임의로 변수화를 하면 좋답니다.

1005hoon · 2024-11-05T14:17:36Z

피씨/태블릿/모바일에 대한 CSS를 캡쳐의 이미지처럼 각각 3개의 미디어쿼리 안에 담았어요. 기기별로 보기가 편할 것 같아서요. 그런데 이렇게 해도 될까요? 아니면 피씨는 굳이 미디어쿼리 안에 넣지 않는 게 좋을까요?

이것도 고민을 많이 하셨을텐데요, 이제 어떤 값을 기준으로 마크업을 시작하셨는지에 따라 달라집니다.
만약 모바일 스타일을 먼저 작업하셨다면, tablet / desktop뷰에 대한 미디어 쿼리만 작업해주시면 되겠고

데스크탑 스타일을 먼저 작업하셨다면 tablet / mobile 뷰에 대한 미디어 쿼리만 작업해주시면 될거에요.

그리고 readme에서 우리 마크업이 어떤 스타일을 기준으로 만들었는지 작성해준다면 다른 개발자들도 편하게 개발할 수 있겠죠

1005hoon · 2024-11-05T14:18:51Z

지금은 루트폴더에 css, font, img폴더를 만들어서 파일들을 관리하고 있는데요. 이 방식이 맞을까요? html파일들만 폴더 밖으로 내놓는 게 맞는지, index.html을 제외한 페이지들의 html파일도 따로 폴더를 생성하여 그 안에 넣어 관리해야 하는지 궁금합니다.

이 내용은 멘토링에서 이야기 해볼게요!

1005hoon

은주님 너무 좋습니다 👍🏻

스타일도 너무 잘 구조화 되어가고있고, 마크업 영역도 왜 이렇게 구분하셨는지 잘 이해가 되어서 크게 손볼 부분은 없어보여요. 다만 아직 BEM 관점에서 좋은 이름을 붙이는데에 어려워하시는게 보여요.
이거는 계속 블록 이름을 뭐라할지 고민하고 적용해나가다보면 개선되는 영역이랍니다.
좋은 방향으로 고민하고 계셔요.

이에 대한 자세한 리뷰는 코드단에 남겨두었으니참고 부탁드립니다.
고생 많으셨어요

1005hoon · 2024-11-05T14:21:13Z

css/common.css

@@ -50,10 +50,27 @@
  font-weight: 100;
 }

-* {
+body {
  font-family: "pretendard";


font의 경우, pretendard는 외부에서 불러와 사용하는 폰트잖아요. 불러오는데에 실패하거나 오류가 발생한 경우, html은 브라우저에서 제공하는 못생긴 기본 폰트를 입혀서 제공해줍니다.
따라서 폰트 설정할때는 항상 fallback을 제공해줄 필요가 있어요

1005hoon · 2024-11-05T14:22:14Z

css/common.css

+:root {
+  --white: #ffffff;
+
+  --gray-900: #1b1d1f;
+  --gray-800: #26282b;
+  --gray-600: #454c53;
+  --gray-500: #72787f;
+  --gray-400: #9ea4a8;
+  --gray-200: #e5e7eb;
+  --gray-100: #e8ebed;
+  --gray-50: #f7f7f8;
+
+  --blue1: #3692ff;
+  --blue2: #1967d6;
+  --blue3: #1251aa;
+  --blue4: #cfe5ff;
+  --blue5: #e6f2ff;
+
+  --red: #f74747;
 }


변수들을 common으로 둔거 좋습니다!
만약 조금만 더 구조화를 욕심내어본다면 variables.css라는 녀석으로 분리해보면 어떨까요?

그리구, --gray-900 처럼 --color-### 형태로 갖고가고 계시잖아요?
이걸 계속 활용해서 --blue-900 형식으로 맞춰보면 어떨까요?

1005hoon · 2024-11-05T14:22:47Z

css/index.css

+/* PC view */
+@media screen {


기본값이라면 굳이 미디어를 씌우지 않아도 괜찮아요.
다만, 유일한 예외로는 프린트 할 때 스타일이 달라져야 한다면 스크린과 프린트 등 분리를 할 필요가 생길때도 있답니다

1005hoon · 2024-11-05T14:23:39Z

css/index.css

+    position: relative;
+    padding-left: 50px;
+    font-family: "ROKAF";
+    font-size: 26px;


html에게 font-size: 10px 를 제공하고, 이후 요소들에게는 rem유닛을 한번 적용시켜보면 어떤가요?

1005hoon · 2024-11-05T14:24:32Z

css/index.css

+  .footer p,
+  .footer a {


BEM을 사용하면서는 굳이 child element에대한 설정을 하기보다 명시적으로 BEM 요소로 적용시키는게 좋지 않을까 생각합니다.
만약 block 요소 전체적으로 활용되어야 하는 스타일이라면 block에게 적용을 해보아도 좋겠어요

1005hoon · 2024-11-05T14:28:55Z

login.html

+                id="email"
+                name="email"


id와 name 잘 설정해주셨어요!

다만, 이 인풋은 이메일 값을 입력받기를 기대하고 있죠? 그런 관점에서 type=text 보다는 type=email이 더 적합해보여요

1005hoon · 2024-11-05T14:30:14Z

login.html

+              <button
+                class="form__password-hidden"
+                aria-label="비밀번호 숨기기"
+              ></button>


요녀석의 경우, hide-password 라는 클래스로도 충분해보여요.
왜냐하면 form 그룹에 속해있긴 하지만 명확하게 비밀번호를 숨기기 위한 요소로 존재하잖아요.

aria-label 작성해주신거 너무 좋습니다

이 버튼이 input을 기준으로 위치가 잡혀야 할텐데요, 그 관점에서 input과 button을 감싸고 있는 래퍼를 하나 만들어서, absolute 포지셔닝을 잡아주면 어떨까요?

1005hoon · 2024-11-05T14:30:59Z

login.html

+                aria-label="비밀번호 숨기기"
+              ></button>
+            </div>
+            <button type="submit" class="form__button">로그인</button>


type=submit 설정 좋습니다

1005hoon · 2024-11-05T14:31:14Z

login.html

+            </div>
+            <button type="submit" class="form__button">로그인</button>
+          </form>
+          <section class="social_login">


오 간편 로그인이라고 디자인이 나왔음에도 소셜로그인이라는 이름 사용하신거 너무 잘하셨어요 👍🏻

1005hoon · 2024-11-05T14:31:30Z

signup.html

로그인 페이지 피드백 한번 참고해서 여기도 적용해볼까요?

eund00 added 4 commits October 31, 2024 15:29

Reflect code review feedback

6f83cc0

폴더 수정

f6c2bed

Merge branch 'Basic-이은주' of https://github.com/codeit-bootcamp-fronte…

f1d8fe6

…nd/12-Sprint-Mission into Basic-이은주

add mission3

edc769d

eund00 requested a review from 1005hoon November 5, 2024 01:57

eund00 added the 순한맛🐑 마음이 많이 여립니다.. label Nov 5, 2024

eund00 changed the base branch from main to Basic-이은주 November 5, 2024 11:23

1005hoon approved these changes Nov 5, 2024

View reviewed changes

1005hoon merged commit f523888 into codeit-bootcamp-frontend:Basic-이은주 Nov 5, 2024

eund00 self-assigned this Nov 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[이은주] sprint3 #99

[이은주] sprint3 #99

eund00 commented Nov 5, 2024 •

edited

Loading

1005hoon commented Nov 5, 2024

1005hoon commented Nov 5, 2024

1005hoon commented Nov 5, 2024 •

edited

Loading

1005hoon commented Nov 5, 2024

1005hoon left a comment

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

1005hoon Nov 5, 2024

[이은주] sprint3 #99

[이은주] sprint3 #99

Conversation

eund00 commented Nov 5, 2024 • edited Loading

요구사항

기본

공통

랜딩 페이지

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

심화

스크린샷

멘토에게

1005hoon commented Nov 5, 2024

1005hoon commented Nov 5, 2024

1005hoon commented Nov 5, 2024 • edited Loading

1005hoon commented Nov 5, 2024

1005hoon left a 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

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

eund00 commented Nov 5, 2024 •

edited

Loading

1005hoon commented Nov 5, 2024 •

edited

Loading