Skip to content
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

[송효정] sprint2 #51

Merged
merged 2 commits into from
May 7, 2024
Merged

[송효정] sprint2 #51

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3678e93
sprint1 modify
ylem76 May 3, 2024
b80f284
sprint2 mission
ylem76 May 3, 2024
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
59 changes: 34 additions & 25 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
<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/static/pretendard.min.css" />
<link rel="stylesheet" href="./src/css/reset.css" />
<link rel="stylesheet" href="./src/css/style.css" />
<link rel="stylesheet" href="./src/css/global.css" />
<link rel="stylesheet" href="./src/css/home.css" />
</head>
<body>
<header>
Expand All @@ -13,17 +15,18 @@
<a href="/login" class="btn btn_small">로그인</a>
</nav>
</header>
<div class="kv">
<div class="inner">
<img src="./src/img/main/img_home_top.png" alt="" />
<h1>일상의 모든 물건을 <br />거래해 보세요</h1>
<a class="btn btn_large" href="/items">구경하러 가기</a>
</div>
</div>

<main>
<section class="hero">
<div class="inner">
<img src="./src/img/main/img_home_top.png" alt="인사하는 판다 일러스트" />
<h1>일상의 모든 물건을 <br />거래해 보세요</h1>
<a class="btn btn_large" href="/items">구경하러 가기</a>
</div>
</section>
<div class="wrapper">
<section class="inner">
<img src="./src/img/main/img_home_01.png" alt="" />
<img src="./src/img/main/img_home_01.png" alt="물건을 구경하는 판다 일러스트" />
<div class="desc">
<h2>
<span>Hot item</span>
Expand All @@ -33,7 +36,7 @@ <h2>
</div>
</section>
<section class="inner">
<img src="./src/img/main/img_home_02.png" alt="" />
<img src="./src/img/main/img_home_02.png" alt="돋보기 일러스트" />
<div class="desc">
<h2>
<span>Search</span>
Expand All @@ -43,7 +46,7 @@ <h2>
</div>
</section>
<section class="inner">
<img src="./src/img/main/img_home_03.png" alt="" />
<img src="./src/img/main/img_home_03.png" alt="카테고리 일러스트" />
<div class="desc">
<h2>
<span>Register</span>
Expand All @@ -53,7 +56,7 @@ <h2>
</div>
</section>
</div>
<div class="bv">
<div class="banner">
<div class="inner">
<div class="desc">
<h2>
Expand All @@ -63,7 +66,7 @@ <h2>
</div>
</div>

<img src="./src/img/main/img_home_bottom.png" alt="" />
<img src="./src/img/main/img_home_bottom.png" alt="대화하는 판다 일러스트" />
</div>
</main>
<footer>
Expand All @@ -74,20 +77,26 @@ <h2>
<li><a href="/faq">FAQ</a></li>
</ul>
<ul class="sns">
<li
><a target="_blank" href="https://www.facebook.com">
<img src="./src/img/common/ic_facebook.svg" alt="facebook logo" />
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com">
Copy link
Collaborator

Choose a reason for hiding this comment

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

마침 멘토링 때 소개할까 고민했는데 noopener, noreferrer을 넣어주셨네요. 👍👍
보안, 성능상 유리해서 별도 프레임워크 없이 작성할 때는 작성해주는 것이 좋은 것 같습니다.

<img src="./src/img/common/ic_facebook.svg" alt="페이스북 로고" />
</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.twitter.com">
<img src="./src/img/common/ic_twitter.svg" alt="트위터 로고" />
</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com">
<img src="./src/img/common/ic_youtube.svg" alt="유튜브 로고" />
</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com">
<img src="./src/img/common/ic_instagram.svg" alt="인스타그램 로고" />
</a>
</li>
<li
><a target="_blank" href="https://www.twitter.com"> <img src="./src/img/common/ic_twitter.svg" alt="twitter logo" /> </a
></li>
<li
><a target="_blank" href="https://www.youtube.com"> <img src="./src/img/common/ic_youtube.svg" alt="youtube logo" /> </a
></li>
<li
><a target="_blank" href="https://www.instagram.com"> <img src="./src/img/common/ic_instagram.svg" alt="instagram logo" /> </a
></li>
</ul>
</div>
</footer>
Expand Down
42 changes: 42 additions & 0 deletions src/css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
:root {
--white: #fff;
--gray900: #1b1d1f;
--gray800: #26282b;
--gray600: #454c53;
--gray500: #72787f;
--gray400: #9ea4a8;
--gray200: #e5e7eb;
--gray100: #e8ebed;
--gray50: #f7f7f8;
--blue: #3692ff;
--skyblue: #cfe5ff;
--red: #f74747;
--deepblue: #1967d6;
}

body {
overflow-x: hidden;
}

/* common */
.inner {
max-width: 1200px;
margin: 0 auto;
}
/* gnb */
header {
border-bottom: 1px solid var(--gray100);
margin-bottom: 70px;
}
.gnb {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
max-width: 1520px;
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
max-width: 1520px;

max-width 속성은 제외하시는 게 좋을 것 같습니다. width 속성을 덮어쓰면서 gnb의 너비를 제한해 넓은 모니터에서 gnb가 잘려 보일 것 같아요

margin: 0;
align-items: center;
position: fixed;
z-index: 2;
padding: 0 200px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

gnb에 대해 background-color가 필요해 보입니다. 별도의 색상이 없어 스크롤를 내리다 보면 뒤에 있는 요소와 겹쳐 보이고 있어서요.

Copy link
Collaborator

Choose a reason for hiding this comment

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

position: fixed 설정 이후에
top:0, left:0 도 설정해 주시면 좋을 것 같습니다. 명시적으로 최상단에 고정함을 확실히하고 크로스 브라우징에도 유리해서요.

58 changes: 9 additions & 49 deletions src/css/style.css → src/css/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,24 @@
:root {
--gray900: #1b1d1f;
--gray800: #26282b;
--gray600: #454c53;
--gray500: #72787f;
--gray400: #9ea4a8;
--gray200: #e5e7eb;
--gray100: #e8ebed;
--gray50: #f7f7f8;
--blue: #3692ff;
--skyblue: #cfe5ff;
--red: #f74747;
}

body {
overflow-x: hidden;
}

/* common */
.inner {
max-width: 1200px;
margin: 0 auto;
}
/* gnb */
header {
border-bottom: 1px solid var(--gray100);
/* padding: 0 24px; */
padding: 0 200px;
/* 아니 왜 굳이 200px 씩이나...*/
}
.gnb {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
max-width: 1520px;
margin: 0 auto;
align-items: center;
}

.kv {
.hero {
height: 540px;
background: var(--skyblue);
position: relative;
}

.kv .inner {
.hero .inner {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px;
}
.kv h1 {
.hero h1 {
font-family: Pretendard;
font-size: 40px;
font-weight: 700;
line-height: 56px;
text-align: left;
}
.kv img {
.hero img {
position: absolute;
bottom: 0;
left: 50%;
Expand All @@ -72,14 +32,14 @@ header {
justify-content: center;
align-items: center;
background: var(--blue);
color: #fff;
color: var(--white);
font-weight: 600;
font-size: 16px;
line-height: 1;
}

.btn:hover {
background: #1967d6;
background: var(--deepblue);
}

.btn_small {
Expand Down Expand Up @@ -136,19 +96,19 @@ header {
letter-spacing: 0.08em;
}

.bv {
.banner {
background-color: var(--skyblue);
height: 540px;
margin-top: 140px;
position: relative;
}

.bv .desc {
.banner .desc {
margin: 0;
height: 100%;
}

.bv img {
.banner img {
position: absolute;
bottom: 0;
left: 50%;
Expand Down