Skip to content

[배수민] Sprint1 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
addiescode-sj merged 3 commits into from
Apr 7, 2025
Merged

[배수민] Sprint1 #10

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efca996
스프린트 미션 작업
Apr 2, 2025
eaf83f9
코드리뷰 수정사항 반영
Apr 4, 2025
c07e11a
common.css 추가
Apr 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added img/Img_home_01.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Img_home_02.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Img_home_03.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Img_home_bottom.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Img_home_top.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/ic_facebook.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/ic_instagram.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/ic_twitter.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/ic_youtube.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
99 changes: 99 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
</head>
<body>
<header>
<div class="header-content">
<a href="/"><img src="img/logo.png" alt="판다마켓 로고" class="logo"></a>
<a href="/login" class="login-btn">로그인</a>
Copy link
Collaborator

@addiescode-sj addiescode-sj Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

login-btn의 경우에도 특정 기능에 종속되어있어 재사용이 어려울수있어요 :)
그리고 items-btn과 겹치는 스타일이 꽤 있는것같은데, 공통 btn 스타일을 추출해서 재사용성을 높이는 방식으로 개선해볼까요? 이건 css 파일에서 코멘트 드려볼게요!

Copy link
Collaborator Author

@summerDev96 summerDev96 Apr 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

공통 버튼 스타일 추출하여 수정하였습니다!

</div>
</header>

<main>
<!-- 상단 배너 -->
<section class="banner">
<div class="banner-content">
<div class="banner-left">
Copy link
Collaborator

@addiescode-sj addiescode-sj Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

클래스이름에 위치, 색상 등의 키워드를 포함해 네이밍을 사용하시는건 적절치않아요.
이유는 디자인이 변경된다면 실제 스타일과 클래스명이 불일치할 수 있고, 이는 곧 재사용성의 저해로 이어지기때문입니다.
따라서, 다음부터는 해당 엘리먼트의 목적과 역할을 보다 직관적으로 이해할 수 있게끔 염두에 두고 작업해보시는걸 추천드립니다 :)

Copy link
Collaborator

@addiescode-sj addiescode-sj Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

top-img, bottom-img 도 마찬가지!

Copy link
Collaborator Author

@summerDev96 summerDev96 Apr 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

클래스명 수정하였습니다!

<span class="banner-title">
일상의 모든 물건을<br>
거래해 보세요
</span>
<a href="/items" class="items-btn">구경하러 가기</a>
</div>
<img src="img/Img_home_top.png" alt="판다마켓 메인배너 이미지" class="top-img">
</div>
</section>

<!-- 섹션 1 -->
<section class="container">
<div class="section-content">
<img src="img/Img_home_01.png" class="section-img">
<div class="section-text">
<span class="section-point">Hot item</span>
<span class="section-title">인기 상품을<br>확인해 보세요</span>
<span class="section-subtitle">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</span>
</div>
</div>
</section>

<!-- 섹션 2 -->
<section class="container">
<div class="section-content">
<div class="section-text text-right">
<span class="section-point">Search</span>
<span class="section-title">구매를 원하는<br>상품을 검색하세요</span>
<span class="section-subtitle">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</span>
</div>
Copy link
Collaborator

@addiescode-sj addiescode-sj Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전체적으로 굉장히 일반적인 클래스이름을 사용했고, 계층구조가 명확히 보이지않는 단점이 있는것같아요.
이런식으로 네이밍해주는건 어떨까요?

.feature > .feature__content > .feature__content__title, .feature__content__subtitle

좀더 계층 관계가 명확히 드러나면서도 내부 요소들을 쉽게 식별할수있지않을까요?

Copy link
Collaborator Author

@summerDev96 summerDev96 Apr 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

예시로 들어주신 내용 반영하여 수정하였습니다!

<img src="img/Img_home_02.png" class="section-img">
</div>
</section>

<!-- 섹션 3 -->
<section class="container">
<div class="section-content">
<img src="img/Img_home_03.png" class="section-img">
<div class="section-text">
<span class="section-point">Register</span>
<span class="section-title">판매를 원하는<br>상품을 등록하세요</span>
<span class="section-subtitle">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</span>
</div>
</div>
</section>

<!-- 하단 배너 -->
<section class="bottom-banner">
<div class="bottom-banner-content">
<span class="bottom-banner-title">믿을 수 있는<br>판다마켓 중고 거래</span>
<img src="img/Img_home_bottom.png" alt="판다마켓 하단 배너" class="bottom-img">
</div>
</section>

</main>

<!-- 푸터 -->
<footer>
<div class="footer-content">
<span class="copyright">codeit - 2024</span>

<div class="link">
<a href="/privacy">Privacy Policy</a>
<a href="/faq">FAQ</a>
</div>

<div class="sns">
<a href="https://www.facebook.com" target="_blank"><img src="img/ic_facebook.png"></a>
<a href="https://x.com" target="_blank"><img src="img/ic_twitter.png"></a>
<a href="https://www.youtube.com" target="_blank"><img src="img/ic_youtube.png"></a>
<a href="https://www.instagram.com/" target="_blank"><img src="img/ic_instagram.png"></a>
</div>
</div>

</footer>
</body>
</html>
200 changes: 200 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Pretendard Variable";
}

a {
cursor: pointer;
}

header {
padding: 9.5px 0;
}
Copy link
Collaborator

@addiescode-sj addiescode-sj Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스타일 전역 처리는 따로 css파일을 만들어 필요할때마다 import해오는 방식으로 구현해보셔도 좋습니다 :)

  • reset.css (스타일 초기화)
  • common.css (전역 스타일)

Copy link
Collaborator Author

@summerDev96 summerDev96 Apr 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reset.css, common.css 추가하여 코드 분리하였습니다!


header .header-content {
padding: 0 200px;
max-width: 1520px;
margin: 0 auto;
color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
}

header .header-content .logo {
width: 153px;
}

header .header-content .login-btn {
background-color: #3692FF;
Copy link
Collaborator

@addiescode-sj addiescode-sj Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

예시)

:root {
    /* Colors */
    --color-primary: #3692FF;
    --color-primary-dark: #3b82f6;
    --color-text-primary: #333;
    --color-text-secondary: #374151;
    --color-background: #ffffff;
    --color-background-light: #FCFCFC;
    --color-background-blue: #dbeafe;
    --color-footer: #111827;
    --color-footer-text: #E5E7EB;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 40px;
    --spacing-xxl: 60px;
    --spacing-xxxl: 100px;

    /* Font Sizes */
    --font-size-xs: 16px;
    --font-size-sm: 18px;
    --font-size-md: 20px;
    --font-size-lg: 24px;
    --font-size-xl: 40px;

    /* Border Radius */
    --border-radius-sm: 8px;
    --border-radius-lg: 40px;

    /* Container Widths */
    --container-padding: 32px;
    --container-max-width: 1200px;
}

Copy link
Collaborator

@addiescode-sj addiescode-sj Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

만약 반복되는 공용 스타일을 따로 분리해서 사용하고있다면, 해당 값도 변수로 관리해볼까요? 유지보수할때 편리하겠죠?

:root {
    /* Button Colors */
    --btn-primary: #3692FF;
    --btn-primary-hover: #2B7AE0;
    --btn-primary-active: #1F5DB3;
    --btn-text-light: #F3F4F6;
    
    /* Button Sizes */
    --btn-height-small: 36px;
    --btn-height-medium: 48px;
    --btn-height-large: 56px;
}```

Copy link
Collaborator Author

@summerDev96 summerDev96 Apr 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

color, border-radius, font-size 속성 변수로 추가하여 사용하였습니다!

border-radius: 8px;
text-decoration: none;
color: #F3F4F6;
padding: 12px 20px;
min-width: 128px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
}

.banner {
background-color: #CFE5FF;
}

.banner-left {
display: flex;
flex-direction: column;
margin-bottom: 100px;
}

.banner-content {
max-width: 1110px;
padding-top: 200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
}

.banner-title {
font-size: 40px;
font-weight: 700;
margin-bottom: 32px;
color: #374151;
}

.items-btn {
Copy link
Collaborator

@addiescode-sj addiescode-sj Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

공통적으로 button에 적용되는 스타일을 아래 예시와 같이 추출해주고

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

만약, 변형된 버전이 사이즈에 의해 생긴다면:

.btn-small {
    padding: 8px 16px;
    height: 36px;
    min-width: 100px;
    font-size: 14px;
    border-radius: 6px;
}

이렇게 변형된 버전에 따른 스타일 규칙을 따로 .btn-small 선택자로 묶어준다음,
사용하실땐
<button class="btn btn-small">버튼</button>

이런식으로 클래스이름들을 조합해서 사용하실수있어요 :)

Copy link
Collaborator Author

@summerDev96 summerDev96 Apr 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

예시처럼 공통 스타일 추출하여 버튼 클래스 수정하였습니다!

background-color: #3692FF;
border-radius: 40px;
text-decoration: none;
color: #F3F4F6;
padding: 12px 20px;
max-width: 357px;
min-width: 150px;
height: 56px;
display: flex;
justify-content: center;
align-items: center;
}

.top-img {
max-width: 746px;
width: 80%;
}

.container {
padding: 138px 0;
}

.section-content {
max-width: 988px;
margin: 0 auto;
background-color: #FCFCFC;
border-radius: 12px;
display: flex;
align-items: center;
gap: 64px;
}

.section-img {
max-width: 579px;
width: 60%;
}

.section-text {
display: flex;
flex-direction: column;
flex-grow: 1;
}

.section-point {
font-size: 18px;
font-weight: 700;
color: #3692FF;
}

.section-title {
font-size: 40px;
font-weight: 700;
color: #374151;
margin-top: 12px;
margin-bottom: 24px;
}

.section-subtitle {
font-size: 24px;
font-weight: 500;
color: #374151;
}

.text-right {
text-align: right;
}

/* 하단 배너 */
.bottom-banner {
background-color: #CFE5FF;
}

.bottom-img {
max-width: 746px;
width: 80%;
}

.bottom-banner-content {
max-width: 1110px;
padding-top: 143px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
}

.bottom-banner-title {
font-size: 40px;
font-weight: 700;
color: #374151;
padding-bottom: 172px;
}

/* 푸터 */
footer {
background-color: #111827;
padding: 32px 0 108px;
}

.footer-content {
max-width: 1120px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.copyright {
font-size: 16px;
font-weight: 400;
color: #9CA3AF;
}


.link a {
text-decoration: none;
color: #E5E7EB;
font-size: 16px;
font-weight: 400;
}

.link a:not(:last-child) {
margin-right: 30px;
}

.sns a:not(:last-child) {
margin-right: 12px;
}
Copy link
Collaborator

@addiescode-sj addiescode-sj Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

link들 사이의 간격을 조절하고싶으셨다면 .link 선택자에 display: flex 속성을 써서 정렬 및 간격 조절을 하는게 더 편하지않을까요? :)

Copy link
Collaborator Author

@summerDev96 summerDev96 Apr 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

link, sns flex 속성으로 간격 조정하는 것으로 바꿨습니다!