[박재현] Sprint1 #18

justhighway · 2025-02-25T01:58:11Z

요구사항

기본

랜딩 페이지의 url path는 루트('/')로 설정합니다.
title은 "판다마켓"로 설정합니다.
화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
[] 화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
"판다마켓" 클릭 시 루트 페이지('/')로 이동합니다.
'로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지)
"구경하러가기"버튼 클릭 시('/items')로 이동합니다.(빈 페이지)
"Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.

심화

사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)

주요 변경사항

스크린샷

멘토에게

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

GANGYIKIM

재현님 첫번째 PR 제출 고생하셨습니다!
리뷰 드린 코멘트는 모두 필수 반영사항은 아니고 코드에 정답은 없으니
보고 마음에 드시는 방향으로 수정하시면 좋겠습니다!
다음 주차도 화이팅입니다~

commit 단위를 나눠 진행하신 것은 좋습니다. 다만 어떤 작업을 수행하신 건지 알 수 있는 commit 메세지로 적어주시면 좋겠습니다!
다음에는 배포주소도 같이 올려주시면 확인할때 더 좋을 것 같습니다~
다음 PR 올리실때, target branch를 main이 아니라 재현님 할당 브랜치인 Basic-박재현으로 설정해주세요~

GANGYIKIM · 2025-02-26T00:40:49Z

.DS_Store

❗️ 수정요청
재현님 해당 파일은 mac에서 작업하실 때 생성되는 파일입니다.
해당 폴더에 대한 정보를 가지고 있는 파일로, 이러한 파일들은 git repo에 올라갈 이유가 없습니다~
git repo에는 공유할필요가 있는 파일들만 올라가면 되기 때문에 이러한 파일들은 git에 올라가지 않도록 관리하는 것이 좋습니다.
관련한 블로그 글이 있으니 읽어보시고, 제거하시는 것을 추천드릴께요~

블로그

GANGYIKIM · 2025-02-26T00:48:46Z

assets/landing-page/img/landing/Rectangle 2993.png

❗️ 수정요청
확인해보니 사용하지 않는 이미지가 많이 포함된 것 같아요~
사용하지 않는 이미지들은 지워주시는 게 좋아요.
이미지는 용량도 크고, 나중에는 어떤 이미지가 사용하는 이미지인지 알기 어려우니 필요한 친구들만 넣어주세요~

💬 여담
figma에서 그때 그때 필요한 이미지만 추출하시는 것을 추천드려요~
아마 같이 사용하는 디자인 파일이라 export 탭에서 export 처리된 친구들을 다 추출하게 되시면
불필요한 친구들도 같이 딸려올 가능성이 큽니다!

GANGYIKIM · 2025-02-26T00:56:23Z

assets/landing-page/main-1.png

❗️ 수정요청
해당 이미지 파일의 크기를 보면 588× 444로 되어 있습니다.
저희는 반응형 사이트를 만들고 있고, 이런 이미지들은 모바일에서도 사용할 것이기 때문에 추출하실때, 1배수가 아닌 2배수로 추출해주시는 것이 화질면에서 좋습니다.
아래처럼 figma export 탭에서 2x 로 설정하고 추출해주세요~

GANGYIKIM · 2025-02-26T01:04:30Z

index.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="kr">


❗️ 수정요청

html lang 속성은 스크린리더, 검색 엔진등에게 해당 사이트가 어떤 언어 기반으로 작성되었는지 설명하는 속성입니다.
해당 속성에는 이미 특정 언어들을 의미하는 예약어가 들어가야 합니다. 예를들어 en은 english 즉 영어를 의미합니다.
kr은 신기하게도 Kanuri 어를 의미합니다. 한국어는 ko를 써야합니다~

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/lang
(해당 페이지 sidebar LockUp 에서 kr과 ko를 검색해보세요~)
https://r12a.github.io/app-subtags/

Suggested change

<html lang="kr">

<html lang="ko">

GANGYIKIM · 2025-02-26T01:59:51Z

index.html

+    <header>
+      <nav class="nav-bar">
+        <a href="/" class="nav-logo">
+          <img src="assets/logos/nav-logo.png" alt="img-nav-logo" />


💊 제안

img 태그의 alt 속성은 alternative 라는 의미로, 이미지 파일을 다운로드하는 것에 실패해서 이미지 파일을 보여줄 수 없을 때
어떤 이미지인지 파악할 수 있게 대신 제공되거나, 스크린리더로 읽혀지는 문자를 의미합니다.
따라서 가능한 이미지를 설명할 수 있는 대체 텍스트를 입력해주세요~

GANGYIKIM · 2025-02-26T02:02:47Z

index.html

+          <img src="assets/logos/nav-logo.png" alt="img-nav-logo" />
+        </a>
+        <div class="nav-spacer"></div>
+        <a href="/login" class="nav-login-button"> 로그인 </a>


❗️ 수정요청

지금 단계에서 페이지 이동을 구현하시기 위해서는 확장자를 포함시켜주셔야 합니다.
관련 이슈를 첨부해드리니 한번 확인해보시면 좋을 것 같습니다.

또한 로그인 글자에 공백이 있는데 가능하면 필수적이지 않은 공백은 제거하는 것이 좋습니다.
css 로 스타일링 할때 의도치 않은 동작을 할 수도 있고, 의도가 있는 공백인지 아닌지 이해하기 어렵기 때문입니당.

Suggested change

<a href="/login" class="nav-login-button"> 로그인 </a>

<a href="/login.html" class="nav-login-button">로그인</a>

💬 여담
구현을 완료하신 후에는 작업하신 사항들이 잘 구현되엇는지, a tag, button tag들을 눌러보시면서 확인하시면 좋습니다~

GANGYIKIM · 2025-02-26T02:08:07Z

index.html

+        />
+        <article class="main-content-text">
+          <h2 class="category hot-item">Hot item</h2>
+          <h1 class="title hot-item">


❗️ 수정요청
h1 태그는 heading 1이라는 의미의 태그입니다. 이러한 h1~h6까지의 태그들은 시멘틱한 작성에 중요한 역할을 합니다.
그중 h1 태그는 제목에 해당하는 친구입니다.
목차나 영화를 생각해보시면 제목은 늘 1개입니다. 그래서 h1태그는 한 페이지에 한번만 사용하는 것이 좋습니다.
다만 이는 접근성을 위한 권고사항일 뿐 필수사항은 아닙니다 그래도 권고니 지키는것이 더 좋습니다!

mdn

GANGYIKIM · 2025-02-26T02:09:46Z

index.html

+        <div class="footer-social">
+          <a href="https://www.facebook.com"
+            ><i class="fa-brands fa-facebook"></i
+          ></a>
+          <a href="https://www.x.com"><i class="fa-brands fa-twitter"></i></a>
+          <a href="https://www.youtube.com"
+            ><i class="fa-brands fa-youtube"></i
+          ></a>
+          <a href="https://www.instagram.com"
+            ><i class="fa-brands fa-instagram"></i
+          ></a>
+        </div>


💊 제안
이 영역은 로고들의 모음이라고 할 수 있습니다. 관련된 요소들끼리 묶인 목록이니 의미록적인 마크업을 작성한다면 list 관련 태그로 작성하시는 것을 추천드립니다.

Suggested change

<div class="footer-social">

<a href="https://www.facebook.com"

></a>

<a href="https://www.x.com"></a>

<a href="https://www.youtube.com"

></a>

<a href="https://www.instagram.com"

></a>

</div>

<ul class="footer-social">

<li>

<a href="https://www.facebook.com">



</a>

</li>

</ul>

GANGYIKIM · 2025-02-26T02:11:06Z

style.css

+a {
+  cursor: pointer;
+  text-decoration: none;
+}


💊 제안
브라우저 마다 자체적으로 스타일을 가지고 있습니다.
위의 코드에서 a 태그의 text-decoration: none을 적용해주신건, 이미 text-decoration: underline 속성을 가지고 있기 때문이죠~
이런식으로 이미 가지고 있는 스타일을 없애 원하는 스타일을 적용하기 위한 작업이 필요합니다.
주로 이러한 역할을 하는 css 파일을 reset.css 혹은 normalize.css 라는 이름으로 만들어서 관리합니다.
재현님께서는 지금 필요한 태그의 스타일만 초기화하고 사용하셨지만 reset.css 같은 파일을 만드셔서
다른 태그들의 기본 스타일도 초기화하고 작업하시는 것이 예상치 못한 동작을 방지할 수 있어서 추천드려요!

혹시 어떤 내용들이 들어가는지 궁금하시다면 reset.css, normalize.css 를 구글에 검색해보시면 다양한 파일이 나오니
확인해보시고 마음에 드는 것을 참고하시면 좋을 것 같습니다.

GANGYIKIM · 2025-02-26T02:12:39Z

style.css

+  font-weight: 600;
+}
+
+/* 메인 컨텐츠 */


👍 칭찬
파악하기 쉽게 관련된 css 들을 모아두시고 주석으로 구분해주신점 좋습니다!

justhighway added 4 commits February 25, 2025 00:51

init

cbb3340

화면 구현 완료

235c614

.

ee1a064

레이아웃 간격 수정

fdbc74a

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

justhighway added 2 commits February 25, 2025 11:07

Add faq, items, login, privacy html

cfc10f5

Add README.md

896affa

justhighway requested a review from GANGYIKIM February 25, 2025 02:14

GANGYIKIM changed the title ~~Basic 박재현 sprint1~~ [박재현] Sprint1 Feb 25, 2025

GANGYIKIM changed the base branch from main to Basic-박재현 February 25, 2025 04:16

GANGYIKIM approved these changes Feb 26, 2025

View reviewed changes

GANGYIKIM merged commit 1ea30e4 into codeit-bootcamp-frontend:Basic-박재현 Feb 26, 2025

	<a href="/login" class="nav-login-button"> 로그인 </a>
	<a href="/login.html" class="nav-login-button">로그인</a>

[박재현] Sprint1 #18

[박재현] Sprint1 #18

Uh oh!

Conversation

justhighway commented Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GANGYIKIM Feb 26, 2025 • 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

justhighway commented Feb 25, 2025 •

edited

Loading

GANGYIKIM left a comment •

edited

Loading

GANGYIKIM Feb 26, 2025 •

edited

Loading