[정성현] sprint3 #56

jsh1147 · 2024-08-24T14:59:12Z

요구사항

기본

공통

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

주요 변경사항

2주차 피드백 적용
사이트에 반응형 디자인 적용
오픈그래프 설정

스크린샷

메인 페이지 모바일 뷰
로그인 페이지 PC 뷰
로그인 페이지 모바일 뷰(750px)
로그인 페이지 모바일 뷰(350px)
오픈그래프

멘토에게

한 달 동안 멘토링 & 피드백 해주셔서 감사합니다!
제목/문단에서 실제 줄바꿈 없이 CSS로만 줄바꿈을 맞추려 하니, 공간 width를 건들어야 하는 아쉬운 상태라 다음 주에 수정해보려고 합니다!
(현재 text-wrap: balance; word-break: keep-all; overflow-wrap: break-word; 사용중입니다)
부족한 점이나 개선점이 있다면 언제든 피드백 해주세요! 수고하셨습니다 👍

- 'row-reverse'를 통한 요소 순서 결정 - 새 창에서의 기존 창 접근 방지를 위해 <a> 요소에 'rel="noopener noreferrer" 속성 추가 - <form> 요소에 적절한 method, type, name 속성 할당 - 초기화/전역CSS/CSS변수를 구분하도록 CSS 구조 변경 및 관련 파일 경로 변경

- 클래스 네이밍 규칙에 BEM(with camel) 방식을 적용함 - 변경된 클래스 네이밍 규칙에 맞춰 HTML/CSS 수정 - 추가적으로, form 내 field 구성 방식 통일

- 배포 경로를 변경함

- 1199px 이하(태블릿), 767px 이하(모바일)에 맞춰 구조, 여백, 글씨 크기가 달라지도록 CSS 작성

- 메인 페이지에 대한 오픈그래프를 작성함

- 767px 이하(모바일)에 맞춰 여백, 글씨 크기가 달라지도록 CSS 작성 - 구조를 위해 main 안에 main__contentWrapper 추가

hoody-jellybean · 2024-08-28T12:30:55Z

index.html

-      <a class="head-login" href="/login.html">로그인</a>
+        />
+      </a>
+      <a class="header__loginButton" href="/login.html">로그인</a>


클래스 명 내에서 Camel Case + __를 사용하셔서 더 명확하게 읽히네요. 너무 좋습니다! 👍

hoody-jellybean · 2024-08-28T12:32:44Z

index.html

-      <a href="/"
-        ><img
-          class="head-logo"
+  <body class="body">


HTML 문서 내에서 Body Element는 하나만 존재할 수 있어서 클래스로 구분하지 않으셔도 괜찮을 것 같습니다!

https://developer.mozilla.org/ko/docs/Web/HTML/Element/body

hoody-jellybean · 2024-08-28T12:43:38Z

styles/login_signup.css


-input {
+.formField__input {


TextField, Button 등의 순수한 공통 UI 요소는 별도의 디자인 시스템 CSS 파일로 분리하여 사용하셔도 좋을 것 같아요~!
물론 이제 React에서 컴포넌트 기반으로 개발하시기 때문에 하지 않으셔도 크게 지장은 없지만,
예전에 사용되던 Bootstrap의 방식과 유사하셔서 공유드립니다. :)

hoody-jellybean · 2024-08-28T12:44:27Z

index.html

-        <li><a href="/privacy.html">Privacy Policy</a></li>
-        <li><a href="/faq.html">FAQ</a></li>
+    <footer class="footer">
+      <address class="footer__address">&copy;codeit - 2024</address>


시멘틱 태그를 잘 활용하시네요. 좋습니다. 👍

hoody-jellybean · 2024-08-28T12:46:58Z

index.html

지금은 줄 바꿈 문자를 삽입하기 어려우셔서 줄바꿈 처리가 어려우실 수 있는데요.
추후에는 줄바꿈이 필요한지 여부에 따라 공백 문자를 white-space를 normal 또는 pre-wrap로 나누어 처리하시면, 반응형을 더 쉽게 처리하실 수 있습니다. :)

관련해서 토스 랜딩 페이지가 어떻게 하고 있는지 참고하시면 좋을 것 같아 공유드립니다~~!
(중간에 헤드라인 내에 줄바꿈 있는 요소를 개발자 도구로 보시면 됩니다.)

https://toss.im/

hoody-jellybean · 2024-08-28T12:48:59Z

signup.html

+              type="password"
+              placeholder="비밀번호를 다시 한 번 입력해 주세요"
+            />
+            <button class="formField__toggleButton" type="button">


제출 버튼이 아닌 경우 type으로 구분 잘 하셨습니다. 👍

hoody-jellybean · 2024-08-28T12:51:27Z

styles/common/global.css

+웹 접근성을 고려한 요소 은폐
+*/
+
+.blind {


웹 접근성까지 고려하신 것 너무 좋습니다! 👍
다만 스타일 초기화보다는 유틸리티 클래스에 가까운 것 같아, 분리하여 관리해주시면 더욱 좋을 것 같습니다!

아 초기화 파일이 아니라 전역 스타일 파일이었군요. 제가 잘못 봤습니다.
유틸리티 클래스가 많은게 아니면 아직은 그대로 쓰셔도 문제는 없을 것 같습니다. :)

hoody-jellybean · 2024-08-28T12:55:24Z

styles/index.css

+@import url("/styles/common/variable.css");
+@import url("/styles/common/global.css");


순수한 CSS 파일 내에서 @import 구문으로 다른 CSS를 불러올 때는 병렬이 아니라 직렬로 불러오기 때문에 최적화 이슈가 있는데요.

다만, 실제로 웹 서비스를 만들 때 함께 사용하는 Webpack, Rollup 등의 번들러에서 이러한 구문을 <head/> 태그 내 <link/> 또는 <style/>등으로 변환하거나 합쳐서 삽입해주기 때문에 문제는 없습니다.

번들러가 처리해주지 않는 경우 문제가 될 수 있다는 것만 아시면 문제 없을 것 같습니다!

다음은 번들러 Rollup 내의 옵션과 이를 위해 사용되는 PostCSS의 플러그인입니다.
지금은 참고로만 알아두세요~! :)

CSS @import 그리고 URL 재정의(Rebasing)

Github: postcss-import

hoody-jellybean · 2024-08-28T13:00:57Z

styles/index.css

  margin-left: 180px;
  text-align: right;
 }
+@media (max-width: 1199px) {
+  .card:nth-child(2n) {


선택자 활용하시는 것 너무 좋네요! 👍

hoody-jellybean · 2024-08-28T13:05:09Z

모바일 디바이스에서도 정상 노출되도록 반응형 작업을 너무 잘 해주셨습니다. 이미 관련된 메타 태그까지 처리해주셨네요. 👍
텍스트 줄바꿈 관련해서는 랜딩 페이지 HTML 파일에 코멘트 남겨드렸습니다. 참고해 주세요. :)

성현님도 한 달 동안 너무 잘 해주셨습니다.
순수한 HTML + CSS 만으로 작업하셨는데도 깊이 있게 작업해 주신 부분이 인상 깊네요.

남은 파트도 잘 마무리하셔서 원하는 결과 얻어 가셨으면 좋겠습니다. 화이팅입니다! 👍

jsh1147 added 5 commits August 21, 2024 02:40

refactor: 클래스명 BEM 방식 적용

c2cbac5

- 클래스 네이밍 규칙에 BEM(with camel) 방식을 적용함 - 변경된 클래스 네이밍 규칙에 맞춰 HTML/CSS 수정 - 추가적으로, form 내 field 구성 방식 통일

docs: 배포 경로 변경

d68a04a

- 배포 경로를 변경함

feat: 메인 페이지 반응형 CSS 작성

2e124bf

- 1199px 이하(태블릿), 767px 이하(모바일)에 맞춰 구조, 여백, 글씨 크기가 달라지도록 CSS 작성

feat: 메인 페이지 오픈그래프 작성

5797928

- 메인 페이지에 대한 오픈그래프를 작성함

jsh1147 requested a review from hoody-jellybean August 24, 2024 14:59

jsh1147 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Aug 24, 2024

feat: 로그인/회원가입 페이지 반응형 CSS 작성

37da3c4

- 767px 이하(모바일)에 맞춰 여백, 글씨 크기가 달라지도록 CSS 작성 - 구조를 위해 main 안에 main__contentWrapper 추가

jsh1147 removed the 미완성🫠 죄송합니다.. label Aug 24, 2024

hoody-jellybean reviewed Aug 28, 2024

View reviewed changes

hoody-jellybean merged commit 3839ae6 into codeit-bootcamp-frontend:Basic-정성현 Aug 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[정성현] sprint3 #56

[정성현] sprint3 #56

jsh1147 commented Aug 24, 2024 •

edited

Loading

hoody-jellybean Aug 28, 2024 •

edited

Loading

hoody-jellybean Aug 28, 2024

hoody-jellybean Aug 28, 2024 •

edited

Loading

hoody-jellybean Aug 28, 2024

hoody-jellybean Aug 28, 2024

hoody-jellybean Aug 28, 2024

hoody-jellybean Aug 28, 2024

hoody-jellybean Aug 28, 2024

hoody-jellybean Aug 28, 2024

hoody-jellybean Aug 28, 2024 •

edited

Loading

hoody-jellybean Aug 28, 2024 •

edited

Loading

hoody-jellybean Aug 28, 2024

hoody-jellybean commented Aug 28, 2024 •

edited

Loading

		@import url("/styles/common/variable.css");
		@import url("/styles/common/global.css");


		input {
		.formField__input {

[정성현] sprint3 #56

[정성현] sprint3 #56

Conversation

jsh1147 commented Aug 24, 2024 • edited Loading

요구사항

기본

공통

랜딩 페이지

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

심화

주요 변경사항

스크린샷

멘토에게

hoody-jellybean Aug 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hoody-jellybean Aug 28, 2024 • 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

hoody-jellybean Aug 28, 2024 • edited Loading

Choose a reason for hiding this comment

hoody-jellybean Aug 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hoody-jellybean commented Aug 28, 2024 • edited Loading

jsh1147 commented Aug 24, 2024 •

edited

Loading

hoody-jellybean Aug 28, 2024 •

edited

Loading

hoody-jellybean Aug 28, 2024 •

edited

Loading

hoody-jellybean Aug 28, 2024 •

edited

Loading

hoody-jellybean Aug 28, 2024 •

edited

Loading

hoody-jellybean commented Aug 28, 2024 •

edited

Loading