Skip to content

[명지우] sprint1 #23

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
GANGYIKIM merged 10 commits into from
Feb 27, 2025
Merged

[명지우] sprint1 #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
79774ad
docs: 요구사항 목록 정리
MyungJiwoo Feb 23, 2025
bd69ddd
feat: 기본 HTML 구조
MyungJiwoo Feb 23, 2025
a2deb41
style: 기본 스타일 초기화(reset css) 및 기본 레이아웃 설정
MyungJiwoo Feb 23, 2025
5a3735f
refactor: 경로, 파일명 수정 및 빈 페이지 추가
MyungJiwoo Feb 25, 2025
d5c4207
docs: 진행 상황 수정
MyungJiwoo Feb 25, 2025
080c138
style: 기본 UI 디자인 적용
MyungJiwoo Feb 25, 2025
dddc7da
docs: 진행 상황 수정
MyungJiwoo Feb 25, 2025
267a516
feat: 타블릿, 핸드폰 반응형 추가
MyungJiwoo Feb 25, 2025
b68e7e4
docs: 진행 상황 수정
MyungJiwoo Feb 25, 2025
9310fc8
docs: 진행 상황 수정 & 배포
MyungJiwoo Feb 25, 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
26 changes: 26 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
## 판다마켓

### 기본 요구사항

- [x] 피그마 디자인에 맞게 페이지 제작
- [x] UI 라이브러리 없이 진행
- [x] HTML, CSS 파일을 Netlify로 배포
-> https://myungjiwoo-panda-market.netlify.app/
- [x] PC 사이즈 기준

### 체크 리스트 (기본)

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

### 체크 리스트 (심화)

- [x] 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정 (상세 설정은 자유)
9 changes: 9 additions & 0 deletions faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - FAQ</title>
</head>
<body></body>
</html>
Binary file added images/Img_home_01.png
View file
Open in desktop
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 27, 2025

Choose a reason for hiding this comment

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

💊 제안
한 레포안에서는 동일한 룰을 따르는 것이 좋습니다.
따라서 다른 이미지 파일명처럼 소문자로 이루어지게 img_home_01.png로 변경하시는 걸 추천드려요~

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 images/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 images/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 images/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 images/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 images/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.
Binary file added images/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 images/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 images/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 images/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.
130 changes: 130 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
Comment on lines +8 to +11
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 27, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
제가 알기로는 디자인에서 Pretendard 만 사용하고 notoSans는 사용하지 않는 걸로 알아요~
사용하지 않는 폰트라면 제거해주시고 Pretendard를 사용해주세요~

<link rel="stylesheet" href="styles/base.css" />
<link rel="stylesheet" href="styles/header.css" />
<link rel="stylesheet" href="styles/banner.css" />
<link rel="stylesheet" href="styles/section.css" />
<link rel="stylesheet" href="styles/footer.css" />
<!-- 반응형 : 타블렛, 핸드폰 지원 -->
<link rel="stylesheet" href="styles/tablet.css" />
<link rel="stylesheet" href="styles/phone.css" />
Comment on lines +12 to +19
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 27, 2025

Choose a reason for hiding this comment

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

💊 제안
css를 목적별로 분리해주신 점 좋습니다~
다만 이렇게 되면 해당 파일에서 불러와야 하는 css 파일이 너무 많아지니 아래와 같은 방식을 추천드려요.

Suggested change
<link rel="stylesheet" href="styles/base.css" />
<link rel="stylesheet" href="styles/header.css" />
<link rel="stylesheet" href="styles/banner.css" />
<link rel="stylesheet" href="styles/section.css" />
<link rel="stylesheet" href="styles/footer.css" />
<!-- 반응형 : 타블렛, 핸드폰 지원 -->
<link rel="stylesheet" href="styles/tablet.css" />
<link rel="stylesheet" href="styles/phone.css" />
<link rel="stylesheet" href="styles/base.css" />
<link rel="stylesheet" href="styles/index.css" />

페이지에 대응하는 css 파일을 만들고 내부적으로 해당 페이지 구현을 위해 필요한 css 들을 import하는 방식입니다.
이렇게 하시면 index.html 은 필요한 파일만 가지게 되고 관리측면에서도 편리합니다.

<title>판다마켓</title>
</head>

<body>
<header>
<a href="/">
<img src="images/Img_logo.png" alt="로고 이미지" class="image-logo" />
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 27, 2025

Choose a reason for hiding this comment

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

💊 제안

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

Suggested change
<img src="images/Img_logo.png" alt="로고 이미지" class="image-logo" />
<img src="images/Img_logo.png" alt="판다마켓" class="image-logo" />

</a>
<a href="login.html">
<div class="btn-login">로그인</div>
</a>
</header>

<div class="home-top-banner">
<div>
<div class="banner-content">
<p class="banner-title">
일상의 모든 물건을<br />
거래해 보세요
</p>
<a href="items.html">
<div class="btn-explore">구경하러 가기</div>
</a>
</div>
<img
src="images/Img_home_top.png"
alt="상단 배너 이미지"
class="image-top-banner"
/>
</div>
</div>

<section>
<div class="section-hot-item">
<img src="images/Img_home_01.png" alt="인기 상품 이미지" />
<div>
<p class="section-badge">Hot item</p>
<p class="section-title">
인기 상품을<br />
확인해 보세요
</p>
<p class="section-content">
가장 HOT한 중고거래 물품을<br />
판다 마켓에서 확인해 보세요
</p>
</div>
</div>

<div class="section-search">
<div class="right">
<p class="section-badge">Search</p>
<p class="section-title">
구매를 원하는<br />
상품을 검색하세요
</p>
<p class="section-content">
구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
</p>
</div>
<img src="images/Img_home_02.png" alt="상품 검색 이미지" />
</div>

<div class="section-register">
<img src="images/Img_home_03.png" alt="상품 등록 이미지" />
<div>
<p class="section-badge">Register</p>
<p class="section-title">판매를 원하는<br />상품을 등록하세요</p>
<p class="section-content">
어떤 물건이든 판매하고 싶은 상품을<br />
쉽게 등록하세요
</p>
</div>
</div>
</section>

<div class="bottom-banner">
<div>
<p class="banner-title">믿을 수 있는<br />판다마켓 중고 거래</p>
<img
src="images/Img_home_bottom.png"
alt="하단 배너 이미지"
class="image-bottom-banner"
/>
</div>
</div>

<footer>
<div>
<p class="footer-company">@codeit - 2024</p>
<div class="footer-links">
<a href="privacy.html">Privacy Policy</a>
<a href="faq.html">FAQ</a>
</div>
<div class="footer-sns">
<a href="https://www.facebook.com/" target="_blank">
<img src="images/Ic_facebook.png" alt="페이스북 아이콘"
/></a>
<a href="https://x.com/" target="_blank">
<img src="images/Ic_twitter.png" alt="트위터 아이콘"
/></a>
<a href="https://www.youtube.com/" target="_blank">
<img src="images/Ic_youtube.png" alt="유튜브 아이콘"
/></a>
<a href="https://www.instagram.com/" target="_blank">
<img src="images/Ic_instagram.png" alt="인스타그램 아이콘"
/></a>
</div>
Comment on lines +113 to +126
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 27, 2025

Choose a reason for hiding this comment

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

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

        <ul class="footer-sns">
          <li>
            <a href="https://www.facebook.com/" target="_blank">
              <img src="images/Ic_facebook.png" alt="페이스북" />
            </a>
          </li>
        </ul>

</div>
</footer>
</body>
</html>
9 changes: 9 additions & 0 deletions items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - Items</title>
</head>
<body></body>
</html>
9 changes: 9 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - Login</title>
</head>
<body></body>
</html>
9 changes: 9 additions & 0 deletions privacy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - Privacy</title>
</head>
<body></body>
</html>
83 changes: 83 additions & 0 deletions styles/banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/* top banner */
.home-top-banner {
width: 100%;
padding-top: 200px;

display: flex;
justify-content: center;
align-items: flex-end;

background-color: #cfe5ff;
}

.home-top-banner > div {
max-width: 1920px;
width: 100%;

display: flex;
justify-content: center;
align-items: center;
gap: 7px;
}

.banner-content {
width: 357px;
flex-shrink: 0;
}

.banner-title,
.section-title {
font-weight: 700;
font-size: 40px;
line-height: 56px;
color: #374151;
flex-shrink: 0;
}

.btn-explore {
width: 100%;
border-radius: 40px;
padding: 16px 124px;
margin-top: 32px;

display: flex;
justify-content: center;
align-items: center;

background-color: #3692ff;
color: #ffffff;

cursor: pointer;
}

.image-top-banner {
width: 746px;
height: auto;

flex-shrink: 0;
}

/* bottom banner */
.bottom-banner {
width: 100%;
padding-top: 143px;

display: flex;
justify-content: center;
align-items: flex-end;
gap: 69px;
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 27, 2025

Choose a reason for hiding this comment

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

💊 제안
제가 봤을때 gap 속성은 없어도 될 것 같아요~
디자인 구현에 불필요한 속성들이 있으면 유지보수나 수정시 헷갈리니 이러한 속성들은 지워주시는 것을 추천드려요!

(만약 피그마를 따르셨다면, 피그마는 디자인 파일 기반으로 css 를 생성하기 때문에 특이한 값들을 자주 준답니다!)


background-color: #cfe5ff;
Comment on lines +62 to +70
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 27, 2025

Choose a reason for hiding this comment

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

❓ 질문
혹시 어떤 기준에 따라 css 속성들을 공백으로 구분하신걸까요?
어떤 기준이 있으신지 궁금합니다~

만약 기준이 없다면 공백이 없는게 가독성 측면에서 더 좋을 것 같아요~

Copy link
Collaborator Author

@MyungJiwoo MyungJiwoo Feb 27, 2025

Choose a reason for hiding this comment

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

개인적으로는 스타일링 코드가 길어지면 보기 힘들 때가 있어서,

  1. 요소의 크기
  2. 위치 (position, display..)
  3. 테두리 및 라운드
  4. 세부 스타일링 (배경 색, 폰트 색상 및 크기...)
  5. 애니메이션 및 커서

이런 기준으로 나눠서 작성하고 있습니다!

Copy link
Collaborator Author

@MyungJiwoo MyungJiwoo Feb 27, 2025

Choose a reason for hiding this comment

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

혹시 공백외에 css 코드가 길어질 때 관리하는 다른 방법이 있을까요??

}

.bottom-banner > div {
display: flex;
align-items: center;
}

.image-bottom-banner {
width: 746px;
height: auto;

flex-shrink: 0;
}
13 changes: 13 additions & 0 deletions styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import url(../styles/reset.css);

body {
display: flex;
flex-direction: column;
align-items: center;
Comment on lines +4 to +6
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 27, 2025

Choose a reason for hiding this comment

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

💊 제안
이 속성이 필요한지 모르겟습니다.
없어도 동일동작할 것 같아요~


background-color: #ffffff;
}

* {
transition: all 0.3s ease-in-out;
}
58 changes: 58 additions & 0 deletions styles/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
footer {
width: 100%;
padding: 32px 0 108px;

display: flex;
justify-content: center;
align-items: center;

background-color: #111827;
}

footer > div {
max-width: 1920px;
width: 100%;
padding: 0 200px;

display: flex;
justify-content: space-between;
align-items: center;
}

.footer-company {
font-weight: 400;
font-size: 16px;
line-height: 19px;
text-align: center;
text-wrap: nowrap;
color: #9ca3af;

flex-shrink: 0;
}

.footer-links {
display: flex;
gap: 30px;
text-wrap: nowrap;

flex-shrink: 0;
}

.footer-links > a,
.footer-links > a:visited {
color: #ffffff;
}

.footer-sns {
display: flex;
gap: 12px;

flex-shrink: 0;
}

.footer-sns img {
width: 20px;
height: 20px;

cursor: pointer;
}
40 changes: 40 additions & 0 deletions styles/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
header {
max-width: 1920px;
width: 100%;
padding: 9.5px 200px;

display: flex;
justify-content: space-between;
align-items: center;

position: relative;

background-color: #ffffff;
}

.image-logo {
width: 153px;
flex-shrink: 0;

cursor: pointer;
}

.btn-login {
width: 128px;
height: 48px;

flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;

border-radius: 8px;
background-color: #3692ff;

font-weight: 600;
font-size: 16px;
line-height: 26px;
color: #ffffff;

cursor: pointer;
}
Loading
Loading