[염성진] Sprint3 #87

MELATONIN99 · 2024-06-07T10:58:01Z

요구사항

기본

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

주요 변경사항

메인 페이지 상단, 하단 이미지를 디자인 요소라 판단해 img 태그에서 백그라운드 이미지로 수정하였습니다.
메인, 로그인, 회원가입 페이지 반응형 웹 페이지 기능 추가 하였습니다.
메타 태그 설정하였습니다 ( 배포는 하지 않아 미리 보기 X )

스크린샷

멘토에게

CSS 파일을 어떻게 관리해야 할지 잘 모르겠습니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

* 이미지 파일명을 좀더 직관적으로 수정하였습니다. * meta태그의 미리보기용 이미지를 추가하였습니다.

* prettier가 제대로 동작하지 않아 설정 후 적용하였습니다. * reset css를 위해 코드를 추가하였습니다.

* PC: 1200px 이상, Tablet: 768px 이상~1199px 이하, Mobile: 375px 이상~767px 이하 (375px 미만 사이즈의 디자인은 고려하지 않았습니다)메인 페이지 반응형 웹 디자인의 기능을 추가 하였습니다.

* Mobile: 767px이하 반응형 웹 디자인 기능을 추가 하였습니다. * Mobile 에서 내부 요소들이 400px을 넘지 않습니다. * 사용하지 않는 코드 삭제하였습니다.

arthurkimdev

멘토링 & 리뷰 때 말씀드린 내용 하나도 놓치지 않고 반영해주시느라 수고하셨습니다 🙏

arthurkimdev · 2024-06-08T22:02:13Z

login.html

+          h = d.documentElement,
+          t = setTimeout(function () {
+            h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive';
+          }, config.scriptTimeout),
+          tk = d.createElement('script'),
+          f = false,
+          s = d.getElementsByTagName('script')[0],
+          a;
+        h.className += ' wf-loading';
+        tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
+        tk.async = true;
+        tk.onload = tk.onreadystatechange = function () {
+          a = this.readyState;
+          if (f || (a && a != 'complete' && a != 'loaded')) return;
+          f = true;
+          clearTimeout(t);
+          try {
+            Typekit.load(config);
+          } catch (e) {}
+        };
+        s.parentNode.insertBefore(tk, s);
+      })(document);
+    </script>


해당 스크립트는 뭔가 웹 폰트를 불러오는 코드 같은데요? 아래 처럼 태그를 사용해서 추가해보는 방법은 어떨까요~?

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />

arthurkimdev · 2024-06-08T22:02:36Z

signup.html

-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="ko">


리뷰 반영 굳! 👍

arthurkimdev · 2024-06-08T22:05:59Z

index.html

+        <div class="sns-links">
+          <a href="/facebook" target="_blank">
+            <img class="sns-link-mini" src="/image//icon/ic_facebook.png" />
+          </a>
+          <a href="/twitter" target="_blank">
+            <img class="sns-link-mini" src="/image//icon/ic_twitter.png" />
+          </a>
+          <a href="/youtube" target="_blank">
+            <img class="sns-link-mini" src="/image//icon/ic_youtube.png" />
+          </a>
+          <a href="/instagram" target="_blank">
+            <img class="sns-link-mini" src="/image//icon/ic_instagram.png" />
+          </a>
        </div>


아래처럼 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-08T22:07:21Z

index.html

+    <footer class="footer-contents">
+      <div class="footer-contents-background">


일반적으로 html 페이지에서 footer 태그는 한 개만 사용하는 것을 권장하기 때문에, 특별한 경우가 아니라면 다른 태그를 사용해보는 것도 좋겠어요! section 등도 있답니다.

arthurkimdev · 2024-06-08T22:10:55Z

login.html

    <title>판다마켓 로그인</title>
-    <link rel="stylesheet" href="join.css">
+    <link rel="stylesheet" href="join.css" />


CSS 파일을 어떻게 관리해야 할지 잘 모르겠습니다.

-> 위 처럼 모듈별로 나누는 방법을 사용하는게 맞습니다. 잘하셨어요! 보통 common한 성격에 css 파일들과 특정 페이지에서만 사용하는 파일들이 있기 때문에 위 처럼 나누는 방법을 사용한답니다. 여기선 로그인 페이지이기 때문에, 기본적인 reset css등을 제공하는 style.css 파일과 로그인 페이지에서만 사용하는 join.css 둘다 있어야겠죠!?

arthurkimdev · 2024-06-08T22:11:40Z

login.html

+          <div class="input-box">
+            <label>이메일</label>
+            <input type="email" placeholder="이메일을 입력해주세요" class="input" />
+          </div>
+          <div class="input-box">
+            <label>비밀번호</label>
+            <input type="password" placeholder="비밀번호를 입력해주세요" class="input" />
+            <img src="image/icon/btn_icon/visibilty_off.png" width="24px" height="24px" class="visibilty" />
+          </div>


전반적으로 들여쓰기 2 와 Prettier 가 적용되니깐 가독성이 한결 나아졌어요 굳 👍

arthurkimdev · 2024-06-08T22:12:45Z

login.html

+      <div class="sign-up-text"><span>판다마켓이 처음이신가요?</span> <a href="./signup.html">회원가입</a></div>
+    </footer>


줄 띄움도 몇 칸으로 되어있는지 궁금하네요. 보통은 80~120 사이를 한답니다.

<footer> <div class="sign-up-text"> <span>판다마켓이 처음이신가요?</span> <a href="./signup.html">회원가입</a> </div> </footer>

120이 적용되어 있으나 120글자가 넘지 않아 자동으로 한 줄 처리되었던 것 같네요!
100으로 변경하였더니 예시처럼 바뀌었습니다 감사합니다!
리뷰해 주신 내용 잘 참고하여 스프린트2도 파이팅 해 보겠습니다..!

스프린트1 멘토링 하시느라 정말 수고하셨습니다! 또다시 멘토님으로 만날 기회가 있었으면 좋겠습니다!
감사합니다!👏👏👏

@MELATONIN99 저도 감사했어요! 언젠가 또 만나요! 😄

MELATONIN99 added 4 commits June 4, 2024 14:08

chore. 기존 이미지 파일명 변경, 추가

e5fadcf

* 이미지 파일명을 좀더 직관적으로 수정하였습니다. * meta태그의 미리보기용 이미지를 추가하였습니다.

refactor. 코드 전체 간격 수정, reset css 값 추가

939c884

* prettier가 제대로 동작하지 않아 설정 후 적용하였습니다. * reset css를 위해 코드를 추가하였습니다.

feat. 로그인, 회원가입 페이지 반응형 웹 디자인 구현

c9b2401

* Mobile: 767px이하 반응형 웹 디자인 기능을 추가 하였습니다. * Mobile 에서 내부 요소들이 400px을 넘지 않습니다. * 사용하지 않는 코드 삭제하였습니다.

MELATONIN99 requested a review from arthurkimdev June 7, 2024 10:58

MELATONIN99 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 7, 2024

arthurkimdev approved these changes Jun 8, 2024

View reviewed changes

arthurkimdev merged commit 3fdfdd3 into codeit-bootcamp-frontend:Basic-염성진 Jun 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[염성진] Sprint3 #87

[염성진] Sprint3 #87

MELATONIN99 commented Jun 7, 2024

arthurkimdev left a comment

arthurkimdev Jun 8, 2024

arthurkimdev Jun 8, 2024

arthurkimdev Jun 8, 2024

arthurkimdev Jun 8, 2024

arthurkimdev Jun 8, 2024

arthurkimdev Jun 8, 2024

arthurkimdev Jun 8, 2024

MELATONIN99 Jun 10, 2024

arthurkimdev Jun 12, 2024

		<footer class="footer-contents">
		<div class="footer-contents-background">

		<div class="sign-up-text"><span>판다마켓이 처음이신가요?</span> <a href="./signup.html">회원가입</a></div>
		</footer>

[염성진] Sprint3 #87

[염성진] Sprint3 #87

Conversation

MELATONIN99 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