Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
252 changes: 252 additions & 0 deletions sprint1/assets/css/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

h2 {
font-size: 40px;
font-weight: 700;
line-height: 56px;
}

h6 {
font-size: 24px;
font-weight: 500;
line-height: 32px;
}

/* 헤더 */
.header {
background-color: #FFFFFF;
margin: 0 auto;
width: 100%;
height: 70px;
display: flex;
justify-content: center;
/* position: sticky;
top: 0px; */
Comment on lines +28 to +29
Copy link
Collaborator

Choose a reason for hiding this comment

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

💊 제안
주석은 히스토리상 필요하거나 코드설명이 필요한 경우처럼 필요한 경우만 남겨두는 것이 좋습니다.
만약 작업중 확인하시려고 넣으신거면 삭제해주세요~

Suggested change
/* position: sticky;
top: 0px; */

}

.navbar {
display: flex;
height: 100%;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1120px;
margin: 0 200px;
}

.logo a {
display: flex;
align-items: center;
text-decoration: none;
color: #3692FF;
font-size: 25.63px;
font-weight: 700;
gap: 8px;
white-space: nowrap
}

.logo img {
width: 40px;
}

.login-btn {
display: flex;
width: 128px;
height: 48px;
background-color: #3692FF;
color: #FFFFFF;
border-radius: 8px;
padding: 12px 23px;
font-size: 16px;
font-weight: 600;
text-align: center;
align-items: center;
justify-content: center;
text-decoration: none;
border: none;
white-space: nowrap;
cursor: pointer;
}

.login-btn:hover {
background-color: #1967D6;
}

.login-btn:active {
background-color: #1251AA;
}

/* 메인 */
Copy link
Collaborator

Choose a reason for hiding this comment

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

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

.main {
background-color: #FCFCFC;
}

.top-section {
width: 100%;
height: 540px;
background-color: #CFE5FF;
display: flex;
justify-content: center;
align-items: end;
gap: 7px;
}

.banner {
display: flex;
width: 100%;
max-width: 1120px;
margin: 0 200px;
align-items: center;
}

.banner img {
width: 746px;
}

.banner-text {
background-color: #CFE5FF;
display: flex;
flex-direction: column;
gap: 32px;
padding-bottom: 60px;
}

.items-btn {
display: flex;
height: 56px;
background-color: #3692FF;
color: #FFFFFF;
border-radius: 40px;
padding: 16px 124px;
font-size: 20px;
font-weight: 600;
text-align: center;
align-items: center;
justify-content: center;
text-decoration: none;
Copy link
Collaborator

Choose a reason for hiding this comment

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

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

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

border: none;
white-space: nowrap;
cursor: pointer;
}

.items-btn:hover {
background-color: #1967D6;
}

.items-btn:active {
background-color: #1251AA;
}

.center-section {
background-color: #FFFFFF;
margin: 0 auto;
width: 100%;
height: 720px;
display: flex;
justify-content: center;
padding: 138px 0;
}

.card {
display: flex;
align-items: center;
width: 988px;
background-color: #FCFCFC;
gap: 64px;
border-radius: 12px;
}

.card img {
width: 579px;
height: 444px;
}

.card-text {
display: flex;
flex-direction: column;
gap: 24px;
}

.text-left {
padding-left: 24px;
text-align: right;
}

.card-text span {
color: #3692FF;
font-size: 18px;
line-height: 26px;
font-weight: 700;
}

.bottom-section {
margin-top: 130px;
width: 100%;
height: 540px;
background-color: #CFE5FF;
display: flex;
justify-content: center;
align-items: end;
}

.bottom-banner {
gap: 69px;
}

/* 푸터 */
.footer {
background-color: #111827;
margin: 0 auto;
width: 100%;
height: 160px;
display: flex;
justify-content: center;
padding: 32px 0;
}

.icons {
color: #FFFFFF;
}

.footer-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1120px;
margin: 0 200px;
font-size: 16px;
font-weight: 400;
align-items: start;
}

.copyright {
color: #9CA3AF;
}

.footer-btn {
display: flex;
gap: 32px;
}

.footer-btn a {
color: #E5E7EB;
text-decoration: none;
cursor: pointer;
}

.icons {
display: flex;
font-size: 20px;
gap: 12px;
}

.icons a {
color: #FFFFFF;
cursor: pointer;
}
Binary file added sprint1/assets/images/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 sprint1/assets/images/Img_home_02.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 sprint1/assets/images/Img_home_03.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 sprint1/assets/images/Img_home_bottom.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 sprint1/assets/images/Img_home_top.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 sprint1/assets/images/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions sprint1/faq.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓</title>
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.css"
/>
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
faq
</body>
</html>
Loading
Loading