[나소연] sprint1 #24

Sophia-parang · 2025-04-04T10:27:18Z

요구사항

UI 디자인 기초 토픽을 수강해 보세요.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
HTML, CSS 파일을 Netlify로 배포해 주세요.
PC사이즈만 고려해 주어진 디자인으로 구현합니다.

기본

심화

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

주요 변경사항

index.html 구조 설계
style.css 랜딩 페이지 반응형 레이아웃 완성

배포사이트

https://sprintmission-w1-nsy.netlify.app/

스크린샷

멘토에게

심화 조건인 반응형 구현 방법을 찾아보며 clamp () 함수를 처음 접하게 되었고, 직접 계산하여 요소마다 적용해보았습니다. 다만, 각각 요소에 일일이 clamp 값을 지정하는 방식이 다소 번거롭다고 느껴 이를 효율적으로 관리할 수 있는 방법을 고민하던 중 CSS 변수(var)를 사용하는 방식과 미디어 쿼리에 대해 알게 되었습니다. 아직은 변수나 미디어쿼리 사용이 익숙하지 않아 이번 미션에서는 직접 값을 넣는 방식을 유지하였지만, 이후에는 변수 기반 또는 미디어쿼리 스타일 관리도 적용해보고자 합니다. 반응형 페이지 제작에 있어 위와 같은 접근 방법이 적절한 방법인지 질문하고 싶습니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

addiescode-sj

수고하셨습니다!
다음 미션부터는 클래스네이밍을 좀더 신중히 고려해보고, 포맷팅 규칙을 일관적으로 지켜서 작성해볼까요?

주요 리뷰 포인트

클래스이름 작성
코드 중복 제거
불필요한 div 중첩 & 스타일 명세 제거

addiescode-sj · 2025-04-08T07:49:16Z

Mission01/index.html

+                <a href="index.html">
+                    <img src="Icon/Panda-logo-md.png" class="panda-logo-md" alt="판다마켓 로고">


접근성 향상을 위해 aria-label="홈으로 이동" 과 같이 관련있는 요소에 aria-label 혹은 role을 사용해볼까요?
아래 아티클 참고해보시고 접근성을 향상시키기 위해 어떤 노력을 할수있는지 더 찾아보시면 좋은 공부 될 것같아요 :)

https://joyhong-91.tistory.com/22
https://velog.io/@a_in/WAI-ARIA-role-aria-label

addiescode-sj · 2025-04-08T07:50:30Z

Mission01/index.html

+                <a href="index.html">
+                    <img src="Icon/Panda-logo-md.png" class="panda-logo-md" alt="판다마켓 로고">
+                </a>
+                <a href="login.html" class="login-button is-clickable button-deco">로그인</a>


button-deco가 조금 모호한 네이밍처럼 느껴지네요.
항상 클래스이름을 어떻게하면 더 잘 지을수있을지 고민해주면 좋아요.
엘리먼트의 역할에 따라 클래스이름을 잘 지을수있도록 고려해주면 유지보수할때 편해지겠죠?

addiescode-sj · 2025-04-08T07:55:39Z

Mission01/index.html

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


언어 설정을 "ko"로 변경하시면, 한국어 사용자에 맞춰 스크린리더가 사용될수있고 검색엔진에서도 페이지의 언어를 한국어 콘텐츠로 인식하게끔 만들어줄 수 있습니다. 웹 접근성을 생각했을때 스크린리더를 사용한다면 lang="en" 상태에서는 한국어 콘텐츠를 영어 발음으로 읽을 가능성이 있기때문에, 한국어 사용자를 대상으로한다면 "ko"로 변경하시는게 옳습니다 :)

Suggested change

<html lang="en">

<html lang="ko">

addiescode-sj · 2025-04-08T07:57:52Z

Mission01/index.html

+                        <li><a href="faq.html">FAQ</a></li>
+                    </ul>
+                    <ul class="footer-list">
+                        <li><a href="https://www.facebook.com" target="_blank"><img src="Icon/ic_facebook.png"


외부 링크의 경우, 보안을 위해 rel="noopener noreferrer"를 추가해주세요! :)

noopener: 새 탭에서 열린 페이지가 원본 페이지에 접근하는 것을 방지
noreferrer: 리퍼러 정보가 새 페이지로 전달되는 것을 방지

addiescode-sj · 2025-04-08T08:00:34Z

Mission01/index.html

+                </div>
+            </section>
+        </header>
+        <main class="contents">


contents보다는 feature-section으로 변경하시고, 아래 카드 영역과 콘텐트영역 클래스이름도 feature-card, feature-content 등등으로 변경하시면 좀더 클래스명이 직관적으로 보일거예요.

너무 일반적이거나 모호한 클래스명은 가독성, 유지보수성, 확장성이 모두 떨어질 수 있습니다. 그 이유는 너무 일반적인 클래스명은 프로젝트내에서 반복적으로 사용될 가능성이 있고, 나중에 다른 개발자가 동일한 클래스명으로 스타일을 또 만들면 스타일이 충돌되거나 꼬이는 문제가 생길 수도 있기 때문입니다. 모호한 클래스명의 경우에도 유지보수를 어렵게한다는 단점이 생깁니다.

이런 문제를 최대한 방지하기위해서는 거듭 강조하지만
"너무 일반적이거나 모호한 이름을 사용하면 어떤 문제가 있는지" 이해하고,
그 문제를 해결하기위해 신경써서 작업해보시는걸 추천드립니다! :)

addiescode-sj · 2025-04-08T08:06:47Z

Mission01/style.css

+
+.gnb {
+    display: flex;
+    flex-direction: row;


flex 속성을 사용하면 기본적으로 flex-direction: row; 가 적용돼요.
이렇게 기본 적용되는 디폴트 값을 잘 이해하면 불필요한 스타일 명세도 없애줄수있겠죠?

addiescode-sj · 2025-04-08T08:07:13Z

Mission01/style.css

+.banner {
+    display: flex;
+    flex-direction: row;
+    padding: clamp(66px, 13vw, 200px) 0 0;


clamp를 잘 활용하시네요! 👍

addiescode-sj · 2025-04-08T08:08:09Z

Mission01/style.css

@@ -0,0 +1,197 @@
+body {


용도를 나눠 css 파일을 관리해볼까요?

reset.css (css 초기화)

common.css (전역 스타일 처리)

addiescode-sj · 2025-04-08T08:09:16Z

Mission01/style.css

+    flex-direction: row;
+    padding: clamp(66px, 13vw, 200px) 0 0;
+    width: 100%;
+    background-color: #cfe5ff;


자주 사용되는 값들은 css 변수로 처리해서 재사용해주면 코드 중복을 줄일수있어요 :)

예시)

/* Variables */ :root { --primary-color: #3692ff; --text-primary: #374151; --text-secondary: #9ca3af; --text-light: #e5e7eb; --background-primary: #fcfcfc; --background-secondary: #cfe5ff; --background-dark: #111827; --border-radius-sm: 8px; --border-radius-lg: 12px; --border-radius-xl: 40px; --container-width: 1120px; --content-width: 988px; }

addiescode-sj · 2025-04-08T08:10:10Z

Mission01/style.css

+
+.footer-bottom {
+    background-color: #111827;
+


여기 공백은 없어도 됩니다! :)

addiescode-sj · 2025-04-08T08:21:33Z

질문에 대한 답변

멘토에게

심화 조건인 반응형 구현 방법을 찾아보며 clamp () 함수를 처음 접하게 되었고, 직접 계산하여 요소마다 적용해보았습니다. 다만, 각각 요소에 일일이 clamp 값을 지정하는 방식이 다소 번거롭다고 느껴 이를 효율적으로 관리할 수 있는 방법을 고민하던 중 CSS 변수(var)를 사용하는 방식과 미디어 쿼리에 대해 알게 되었습니다. 아직은 변수나 미디어쿼리 사용이 익숙하지 않아 이번 미션에서는 직접 값을 넣는 방식을 유지하였지만, 이후에는 변수 기반 또는 미디어쿼리 스타일 관리도 적용해보고자 합니다. 반응형 페이지 제작에 있어 위와 같은 접근 방법이 적절한 방법인지 질문하고 싶습니다.

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

네, 반응형을 고려하실땐 직접 값을 계산해서 사용하는 방식보다는 css 변수기반으로 미디어 쿼리로 스타일 분기를 관리하시는게 좀 더 일반적인 방식입니다 :)

Soyeon Na added 3 commits April 3, 2025 16:22

feat: Upload Sprint Mission 1 - Panda Market Landing Page

b7d2c9b

Refactor folder structure and apply responsive styles

ca7e7b2

fix: add missing 'margin: auto' to center the content section

159e9ef

Sophia-parang requested a review from addiescode-sj April 4, 2025 10:30

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

Sophia-parang changed the title ~~[나소연]sprint1~~ [나소연] sprint1 Apr 4, 2025

fix: wrap copyright with <p> tag

1a61046

addiescode-sj approved these changes Apr 8, 2025

View reviewed changes

addiescode-sj merged commit b3b46f1 into codeit-bootcamp-frontend:Basic-나소연 Apr 10, 2025

		<a href="index.html">
		<img src="Icon/Panda-logo-md.png" class="panda-logo-md" alt="판다마켓 로고">

[나소연] sprint1 #24

[나소연] sprint1 #24

Uh oh!

Conversation

Sophia-parang commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

기본

심화

주요 변경사항

배포사이트

스크린샷

멘토에게

Uh oh!

addiescode-sj 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!

addiescode-sj commented Apr 8, 2025

질문에 대한 답변

멘토에게

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Sophia-parang commented Apr 4, 2025 •

edited

Loading