[맹은빈] sprint1 #20

evaain706 · 2025-02-25T05:36:57Z

요구사항

● UI 디자인 기초 토픽을 수강해 보세요.

● 피그마 디자인에 맞게 페이지를 만들어 주세요.

● React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

● HTML, CSS 파일을 Netlify로 배포해 주세요. (https://sprint1panda.netlify.app/)

● PC사이즈만 고려해 주어진 디자인으로 구현합니다.

기본

심화

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

주요 변경사항

스크린샷

멘토에게

강사님께서 보셨을때 HTML구조를 잘 짜서 작성하였는지 , css 클래스배분을 잘 하였는지 궁금합니다!
셀프 코드 리뷰를 통해 계속질문 이어가겠습니다.

GANGYIKIM

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

commit 단위를 나눠 자세히 commit 하신 점 좋습니다!
강사님께서 보셨을때 HTML구조를 잘 짜서 작성하였는지 , css 클래스배분을 잘 하였는지 궁금합니다!:
잘 했다는 것은 너무 추상적인 기준이라 말씀드리기 어렵지만..! 제 생각에 현재 가장 중요한건 구현 그자체라고 생각해요. 구현하신 것만으로 충분히 잘 하셨다고 생각합니다. 다만 html의 경우 잘 작성했다는 기준은 시멘틱한 태그 작성이라고 생각하는데 이를 좀 더 고민해서 작성하시면 좋겠습니다.

GANGYIKIM · 2025-02-26T05:21:18Z

images/icons/ic_facebook.png

👍 칭찬
유의미한 이미지명과 폴더를 만들어서 종류별로 이미지들을 분류하신 점 좋습니다~

GANGYIKIM · 2025-02-26T05:33:34Z

style.css

+:root{
+    --button-color : #3692ff;
+    --bg-color : #CFE5FF;
+    --main-font-color : #374151;
+    --secondary-font-color : #E5E7EB;
+    --button-hover-color : #1967D6;
+    --button-active-color : #1251AA;
+
+
+}


💊 제안

자주 사용하시는 color 값들을 변수로 저장해서 사용하신 점 좋습니다~

다만 해당 변수명을 피그마 변수명과 같게 하시는 것을 추천드려요!
예를 들어, 디자이너가 피그마에서 #1251AA 값을 primary-color로 지정했다면, CSS에서도 동일한 변수명을 사용하면 바로 적용할 수 있습니다.
만약 다른 이름을 사용하면 피그마에서 primary-color 값을 확인한 후 CSS에서 어떤 변수를 사용해야 하는지 다시 찾아야 하므로, 직관성이 떨어지고 유지보수도 어려워질 수 있어요.

또한, 디자이너와 같은 용어를 사용하면 의사소통이 훨씬 쉬워지고, 디자인 시스템을 적용할 때도 더욱 효율적으로 관리할 수 있습니다!

GANGYIKIM · 2025-02-26T05:34:02Z

style.css

+
+

❗️ 수정요청
불필요한 공백은 없는 것이 가독성 측면에서 좋습니다.

Suggested change

GANGYIKIM · 2025-02-26T05:36:54Z

style.css

+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');


💊 제안
은빈님 폰트 잘 적용하셨습니다.
다만 최적화를 위해 가변 글꼴이나 다이나믹 폰트를 사용하시는 것이 좋습니다.
지금 import 하신 폰트 명을 보면 Pretendard-Regular라고 되어 있습니다.
즉 regular, 400에 해당하는 굵기의 폰트파일이라는 의미입니다.
이 폰트 파일을 기반으로 bold, semi bold와 같이 font-weight를 조정하셔도 되지만
그것이 Pretendard-Bold, Pretendard-SemiBold와 동일한 결과값이라고 보장할 수는 없습니다.
따라서 Pretendard Variable과 같이 가변 굵기용 폰트를 쓰시는 것을 추천드립니다.

이는 최적화를 위한 제안이므로 시간이 되실때 적용해보시면 좋을 것 같습니다~

pretendard github

GANGYIKIM · 2025-02-26T05:39:23Z

style.css

💊 제안

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

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

GANGYIKIM · 2025-02-26T05:41:17Z

style.css

+.bottomLandingImg{
+    width: 746px;
+    height: 397px;
+}


💊 제안
상단의 다른 클래스명인 .footer-middle-text은 -로 단어를 구분하고, .bottomLandingImg 의 경우 카멜 표기법을 사용하고 있네요. 한 레포에서는 같은 룰을 공유하는 것이 좋습니다~

GANGYIKIM · 2025-02-26T05:42:41Z

index.html

+            <div class="footer-icons">
+                <a href="https://www.facebook.com/" target="_blank">
+                    <img src="/images/icons/ic_facebook.png" alt="facebook">
+                </a>
+                <a href="https://x.com/" target="_blank">
+                    <img src="/images/icons/ic_twitter.png" alt="twitter">
+                </a>
+                <a href="https://www.youtube.com/" target="_blank">
+                    <img src="/images/icons/ic_youtube.png" alt="youtube">
+                </a>
+                <a href="https://www.instagram.com/" target="_blank">
+                    <img src="/images/icons/ic_instagram.png" alt="instagram">
+                </a>
+            </div>


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

Suggested change

<div class="footer-icons">

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

<img src="/images/icons/ic_facebook.png" alt="facebook">

</a>

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

<img src="/images/icons/ic_twitter.png" alt="twitter">

</a>

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

<img src="/images/icons/ic_youtube.png" alt="youtube">

</a>

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

<img src="/images/icons/ic_instagram.png" alt="instagram">

</a>

</div>

<ul class="footer-icons">

<li>

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

<img src="/images/icons/ic_facebook.png" alt="facebook">

</a>

</li>

</ul>

GANGYIKIM · 2025-02-26T05:43:49Z

index.html

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


❗️ 수정요청
html lang 속성은 스크린리더, 검색 엔진등에게 해당 사이트가 어떤 언어 기반으로 작성되었는지 설명하는 속성입니다.
en은 english라는 의미이니 ko로 변경해주세요!

Suggested change

<html lang="en">

<html lang="ko">

GANGYIKIM · 2025-02-26T05:45:19Z

index.html

+    <header class="header">
+        <div class="header-content">
+            <a href="/">
+                <img class="logoImg" src="/images/logo.png" alt="logo">


💊 제안

img 태그의 alt 속성은 alternative 라는 의미로, 이미지 파일을 다운로드하는 것에 실패해서 이미지 파일을 보여줄 수 없을 때
어떤 이미지인지 파악할 수 있게 대신 제공되거나, 스크린리더로 읽혀지는 문자를 의미합니다.
따라서 가능한 해당 이미지를 설명하는 내용을 넣어주면 좋습니다~
지금의 경우 해당 이미지가 안 보일때 제공되면 좋을 텍스트는 이미지에 들어간 문자인 "판다마켓"이 되겠네요~

Suggested change

<img class="logoImg" src="/images/logo.png" alt="logo">

<img class="logoImg" src="/images/logo.png" alt="판다마켓">

GANGYIKIM · 2025-02-26T05:52:43Z

index.html

+                    <p class="section-text-top">Register</p>
+                    <p class="section-text-middle">판매를 원하는<br>상품을 등록하세요</p>
+                    <p class="section-text-bottom">어떤 물건이든 판매하고싶은 상품을<br>쉽게 등록하세요</p>


💊 제안

classname을 지으실때 위치에 대한 이름은 추천드리지 않습니다.
나중에 디자인이 변해 태그의 순서가 변했을때, 혹은 반응형 사이트라 화면 크기에 따라 태그 위치가 변할 수 있기 때문에
해댱 요소를 잘 설명하지 못하기 때문입니다.
따라서 가능하면 해당 태그의 역할이나 내용을 설명하는 이름을 사용하는 것이 좋습니다.

Suggested change

Register

판매를 원하는 상품을 등록하세요

어떤 물건이든 판매하고싶은 상품을 쉽게 등록하세요

Register

판매를 원하는 상품을 등록하세요

어떤 물건이든 판매하고싶은 상품을 쉽게 등록하세요

이렇게 클래스명을 작성하면 이름을 통해 태그의 역할을 추측할 수 있게되고 위치가 바뀌더라도 코드를 더 잘 이해할 수 있습니다.

evaain706 added 17 commits February 22, 2025 15:27

개인 branch 생성후 커밋

a4e2f60

초기 레이아웃구현

e52f0c1

상단요소 css작성

0014062

section 레이아웃수정

3612840

footer 컨텐츠요소 배치

6e0cb4e

가상선택자를 통한 css색상적용 추가

408357c

폰트적용

f6addd5

footer 레이아웃 / 텍스트 스타일링

a0a6a53

a태그별 href / 호버 , 액티브상태별 컬러값 적용

857ec75

section-content 요소별간격 조정

d6d44d4

상단,하단 랜딩이미지컨테이너 이름수정/ img태그 width height 인라인이아닌 css파일로 이동

3ea5ba9

랜딩컨테이너div이름 재수정

a9ba0ce

랜딩 div 폰트사이즈 수정

9c19aec

html 주석추가

43d7a24

PR템플릿 작성

9220a7f

PR템플릿 수정

20e7c0a

클릭 가능한요소에 css수정

945a3f2

evaain706 requested a review from GANGYIKIM February 25, 2025 05:37

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

GANGYIKIM approved these changes Feb 26, 2025

View reviewed changes

GANGYIKIM merged commit 74327e4 into codeit-bootcamp-frontend:Basic-맹은빈 Feb 26, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[맹은빈] sprint1 #20

[맹은빈] sprint1 #20

Uh oh!

evaain706 commented Feb 25, 2025 •

edited

Loading

Uh oh!

GANGYIKIM left a comment

Uh oh!

GANGYIKIM Feb 26, 2025

Uh oh!

GANGYIKIM Feb 26, 2025

Uh oh!

GANGYIKIM Feb 26, 2025

Uh oh!

GANGYIKIM Feb 26, 2025

Uh oh!

GANGYIKIM Feb 26, 2025

Uh oh!

GANGYIKIM Feb 26, 2025

Uh oh!

GANGYIKIM Feb 26, 2025

Uh oh!

GANGYIKIM Feb 26, 2025

Uh oh!

GANGYIKIM Feb 26, 2025

Uh oh!

GANGYIKIM Feb 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<img class="logoImg" src="/images/logo.png" alt="logo">
	<img class="logoImg" src="/images/logo.png" alt="판다마켓">

[맹은빈] sprint1 #20

[맹은빈] sprint1 #20

Uh oh!

Conversation

evaain706 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

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

evaain706 commented Feb 25, 2025 •

edited

Loading