[김다솜] Sprint3 #99

KimDasom521 · 2024-06-07T17:11:23Z

기본 요구사항
Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
체크리스트 [기본]
공통

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

arthurkimdev

다솜님 스프린트3 과제 제출하시느라 수고 많으셨습니다! 👍

arthurkimdev · 2024-06-09T15:21:22Z

login/signup/index.html

+    <link rel="stylesheet" href="styles/global.css" />
+    <link rel="stylesheet" href="styles/auth.css" />


css를 모듈별로 잘 분리하셨네요! 👍

arthurkimdev · 2024-06-09T15:23:09Z

login/signup/index.html

+        <a href="/"
+          ><img src="images/logo/logo.svg" alt="판다마켓 홈" width="396"
+        /></a>


해당 내용보면 Prettier 설정이 정상적으로 되어있지 않는 것 같아요~
아래 주소 보고 한번 더 설정 확인 해보세요🙏

https://velog.io/@gangk_99/VS-Code-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

arthurkimdev · 2024-06-09T15:24:33Z

login/login.css

+* {
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Pretendard Variable", Pretendard, -apple-system,
+    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
+    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+}
+a {
+  text-decoration: none;
+  color: inherit;
+}
+


뭔가 공통된 reset.css 파일을 찾기가 어려운데요, 아래 주소 값을 reset.css 파일을 별도로 만들어서 적용 후 공통 페이지에 적용해보면 어떨까요!?

https://meyerweb.com/eric/tools/css/reset/

arthurkimdev · 2024-06-09T15:25:25Z

index.html

+    <footer class="footer-container">
+      <div class="footer-inner">
+        <p class="footer-left">©codeit - 2024</p>
+        <div class="footer-center">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/faq">FAQ</a>
+        </div>
+        <ul class="footer-right">
+          <li>
+            <a href="http://twitter.com" target="_blank"></a>
+          </li>
+          <li>
+            <a href="http://youtube.com" target="_blank"></a>
+          </li>
+          <li>
+            <a href="http://instagram.com" target="_blank"></a>
+          </li>
+          <li>
+            <a href="http://facebook.com" target="_blank"></a>
+          </li>
+        </ul>
+      </div>
+    </footer>


지금도 시멘틱한 태그를 사용하고자 노력하신점이 보이는데요,

아래처럼 address, nav, ul, li 등을 사용해서 조금 더 시멘틱한 html 구조로 footer를 만들 수 있습니다.

<footer class="footer-link-bar-background"> <div class="footer-link-bar"> <address class="company-info">@codeit - 2024</address> <nav class="sns-links"> <ul> <li> <a href="/facebook" target="_blank"> <img class="sns-icon" src="/image/icon/ic_facebook.png" alt="Facebook" /> </a> </li> <li> <a href="/twitter" target="_blank"> <img class="sns-icon" src="/image/icon/ic_twitter.png" alt="Twitter" /> </a> </li> <li> <a href="/youtube" target="_blank"> <img class="sns-icon" src="/image/icon/ic_youtube.png" alt="YouTube" /> </a> </li> <li> <a href="/instagram" target="_blank"> <img class="sns-icon" src="/image/icon/ic_instagram.png" alt="Instagram" /> </a> </li> </ul> </nav> </div> </footer>

arthurkimdev · 2024-06-09T15:25:38Z

items/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">


html lang="ko" 값으로 변경 되어야합니다~

- 언어 하위태그(필수) 두 세 글자로 구성된 코드로 기본 언어를 정의하며, 보통 모두 소문자로 표기합니다. 예를 들어 영어의 언어 태그는 en이고, 한국어의 언어 태그는 ko입니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/lang

arthurkimdev · 2024-06-09T15:26:13Z

faq/faq.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">


html lang="ko" 값으로 변경 되어야합니다~

되어있는 페이지가 있고, 아닌 페이지가 있어서 코멘트 남겨놓습니다!

- 언어 하위태그(필수) 두 세 글자로 구성된 코드로 기본 언어를 정의하며, 보통 모두 소문자로 표기합니다. 예를 들어 영어의 언어 태그는 en이고, 한국어의 언어 태그는 ko입니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/lang

arthurkimdev · 2024-06-09T15:26:51Z

index.html

+    <main class="main-whole">
+      <div class="main-top">
+        <div class="top-inner">
+          <p>
+            일상의 모든 물건을&nbsp<br class="br-tag banner-br" />거래해 보세요
+          </p>
+          <a href="/items" class="top-btn"><span>구경하러가기</span></a>
+        </div>
+      </div>
+      <div class="main-container">
+        <section class="main-sections">
+          <img src="images/main_first.png" class="main-img" />
+
+          <div class="main-txt">
+            <span class="section-logo">Hot item</span>
+            <p class="section-title">
+              인기 상품을&nbsp<br class="br-tag" />확인해 보세요
+            </p>
+            <p class="section-detail">
+              가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요
+            </p>
+          </div>
+        </section>


이렇게 <main> <section> 태그를 사용해서 레이아웃을 구분하신 점 좋아요.

arthurkimdev · 2024-06-09T15:27:11Z

index.html

+      <div class="header-nav">
+        <a href="/">
+          <div class="header-logo">
+            <img src="images/logo.svg" /><img src="images/logo-txt.svg" /></div


여기선 이미지가 왜 2개가 일까요!? 🥲

arthurkimdev · 2024-06-09T15:27:25Z

index.html

+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓</title>
+    <meta property="og:url" content="" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta
+      property="og:image"
+      content=""
+    />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:locale" content="ko_KR" />


지난번 리뷰 사항 반영해주셨네요! 굳 👍

sprint3

6067f1a

KimDasom521 requested a review from arthurkimdev June 8, 2024 03:16

arthurkimdev changed the base branch from main to Basic-김다솜 June 9, 2024 15:20

arthurkimdev approved these changes Jun 9, 2024

View reviewed changes

arthurkimdev merged commit 3fa5f54 into codeit-bootcamp-frontend:Basic-김다솜 Jun 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김다솜] Sprint3 #99

[김다솜] Sprint3 #99

KimDasom521 commented Jun 7, 2024

arthurkimdev left a comment

arthurkimdev Jun 9, 2024

arthurkimdev Jun 9, 2024

arthurkimdev Jun 9, 2024

arthurkimdev Jun 9, 2024

arthurkimdev Jun 9, 2024

arthurkimdev Jun 9, 2024

arthurkimdev Jun 9, 2024

arthurkimdev Jun 9, 2024

arthurkimdev Jun 9, 2024

		<link rel="stylesheet" href="styles/global.css" />
		<link rel="stylesheet" href="styles/auth.css" />

[김다솜] Sprint3 #99

[김다솜] Sprint3 #99

Conversation

KimDasom521 commented Jun 7, 2024

arthurkimdev 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