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

[김승석] Sprint1 #21

Merged
merged 5 commits into from
Oct 29, 2024
Merged

[김승석] Sprint1 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f5821a
read.me 생성
kss53043 Oct 26, 2024
23ef219
sprint1 upload
kss53043 Oct 26, 2024
44192ab
readme edit
kss53043 Oct 26, 2024
8b9727b
readme edit
kss53043 Oct 26, 2024
fa3c199
readme edit
kss53043 Oct 26, 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
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
## FE12 김승석 스프린트 미션1


### [판다마켓] (https://fe12pandamarket.netlify.app/)
Empty file added faq
View file
Open in desktop
Empty file.
3 changes: 3 additions & 0 deletions img/ic_facebook.svg
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.
3 changes: 3 additions & 0 deletions img/ic_instagram.svg
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.
3 changes: 3 additions & 0 deletions img/ic_twitter.svg
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.
10 changes: 10 additions & 0 deletions img/ic_youtube.svg
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.
Binary file added img/main_img1.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/main_img2.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/main_img3.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/main_obj1.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/main_obj2.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.
93 changes: 93 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!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" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
Copy link
Contributor

Choose a reason for hiding this comment

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

스타일링만을 위한 선택자는 class를 권장해요.

  • id 는 보통 개발작업시 요소 선택을 위한 방편으로 많이 사용해요.
  • id 선택자는 class보다 우선순위가 높아 id에 속한 스타일을 class로 덮어쓸 수 없어 유지보수와 확장성에 불리할 수 있어요.
  • id는 페이지 내에서 고유해서 재사용에 좋지 않지만, class는 재사용 가능해요.

Copy link
Contributor

Choose a reason for hiding this comment

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

다른 페이지로 이동하기 쉽도록 상단에 링크를 두는 요소는 nav태그가 더 좋을 것 같아요.
header태그는 콘텐츠의 제목이나 소개 또는 탐색하는 영역에 사용해요.

<div class="emp"></div>
<div class="hd_inner">
<div class="logo"><a href="/"><img src="img/logo.png" alt=""></a></div>
Copy link
Contributor

Choose a reason for hiding this comment

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

태그가 달라질 때 줄바꿈이 있으면 보기 편할 것 같아요.

Copy link
Contributor

Choose a reason for hiding this comment

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

alt 들어갈 단어에 고민이 생길 때 참고하면 좋아요.

<div class="login_btn"><a class="ab btn_sml" href="/login">로그인</a></div>
</div>
<div class="emp"></div>
</header>
<main id="main">
<section class="main_bgbox main_visual">
<div class="bgbox_inner">
<div class="cont">
<div class="tit">일상의 모든 물건을 <br>거래해 보세요</div>
Copy link
Contributor

Choose a reason for hiding this comment

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

개발/프로덕트에서 일반적으로 줄여서 사용하는 단어(button -> btn, click to action -> cta, error -> err 등)가 아닌 경우엔 그냥 단어 자체를 써주는게 이해하기 좋아요.

<div class="btn">
<a class="ab btn_lg" href="/items">구경하러 가기</a>
</div>
</div>
</div>
</section>
<section class="main_mid">
<div class="mid_inner">
<ul class="main_list">
<li>
<div class="box">
<div class="thum"><img src="img/main_img1.png" alt=""></div>
<div class="cont">
<div class="cate">Hot item</div>
<div class="tit">인기 상품을 확인해 보세요</div>
<div class="desc">가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="thum"><img src="img/main_img2.png" alt=""></div>
<div class="cont">
<div class="cate">Search</div>
<div class="tit">구매를 원하는 상품을 검색하세요</div>
<div class="desc">구매하고 싶은 물품은 검색해서 쉽게 찾아보세요</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="thum"><img src="img/main_img3.png" alt=""></div>
<div class="cont">
<div class="cate">Register</div>
<div class="tit">판매를 원하는 상품을 등록하세요</div>
<div class="desc">어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<div class="main_line"></div>
<section class="main_bgbox main_btm">
<div class="bgbox_inner">
<div class="cont">
<div class="tit">믿을 수 있는 <br>판다마켓 중고 거래</div>
</div>
<div class="bg"></div>
</div>
</section>
</main>
<footer id="footer">
<div class="ft_inner">
<div class="copy">©codeit - 2024</div>
<ul class="ft_menu">
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/faq">FAQ</a></li>
</ul>
<ul class="ft_icon">
<li><a href="https://www.facebook.com" target="_blank"><img src="img/ic_facebook.svg" alt=""></a></li>
Copy link
Contributor

Choose a reason for hiding this comment

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

_blank 설정할 때 noopener, noreferrer 설정도 고려하면 좋아요. (참고)

<li><a href="https://www.x.com" target="_blank"><img src="img/ic_twitter.svg" alt=""></a></li>
<li><a href="https://www.youtube.com" target="_blank"><img src="img/ic_youtube.svg" alt=""></a></li>
<li><a href="https://www.instagram.com" target="_blank"><img src="img/ic_instagram.svg" alt=""></a></li>
</ul>
</div>
</footer>
</body>
</html>
Copy link
Contributor

Choose a reason for hiding this comment

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

파일의 마지막에 빈 줄이 포함되는 것이 좋아요.
동작에 문제가 있는 건 아니지만 잠재적 문제를 없애기 위함 입니다. (참고)
사용하는 에디터에서 end of line 또는 eol이라는 키워드로 설정할 수 있어요

1 change: 1 addition & 0 deletions items
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

Empty file added login
View file
Open in desktop
Empty file.
Empty file added privacy
View file
Open in desktop
Empty file.
55 changes: 55 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
Copy link
Contributor

Choose a reason for hiding this comment

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

Pretendard 폰트가 적용될 수 있도록 설정해 주세요.
(font-family 작성한 순서대로 우선해서 적용하고 먼저 나온 설정이 없는 경우 다음 대체할 폰트가 적용되는 방식입니다.)

body {font-size: 12px; line-height: 1.3333; color: #374151; }
Copy link
Contributor

Choose a reason for hiding this comment

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

* {
  box-sizing: border-box;
}

body {
  margin: ~;
  color: ~;
  ...
}

요소 별로, css 속성 별로 줄바꿈 또는 빈줄로 구분해주면 가독성에 좋아요.

ol, ul, li {list-style: none;}
a {color: #374151; text-decoration: none;}

/* common */
.ab {display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; padding: 0; margin: 0; box-shadow: none; font: inherit; color: inherit; cursor: pointer; outline: none;}
Copy link
Contributor

Choose a reason for hiding this comment

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

ab라는 이름을 보면 어떤 의미인지 알기 힘든데, 어떤 의미인지 알기 쉬운 이름이면 좋을 것 같아요.

.inp {display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; padding: 0; margin: 0; box-shadow: none; font: inherit; color: inherit;}
.btn_sml {display: block; width: 128px; padding: 12px 20px; background-color: #3692FF; border-radius: 8px; color: #F3F4F6; font-size: 16px; font-weight: 600; line-height: 1.5; text-align: center; transition: all 0.2s;}
Copy link
Contributor

Choose a reason for hiding this comment

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

transition 좋아요~👍

.btn_sml:hover {background-color: #1967D6;}
.btn_sml:active {background-color: #1251AA;}
.btn_sml.disabled {background-color: #9CA3AF;}
.btn_lg {display: block; width: 357px; padding: 12px 20px; background-color: #3692FF; border-radius: 50px; color: #F3F4F6; font-size: 20px; font-weight: 600; line-height: 1.6; text-align: center; transition: all 0.2s;}
.btn_lg:hover {background-color: #1967D6;}
.btn_lg:active {background-color: #1251AA;}
.btn_lg.disabled {background-color: #9CA3AF;}

/* header */
#header {display: grid; grid-template-columns: minmax(200px, 1fr) minmax(720px, 1120px) minmax(200px, 1fr); width: 100%; height: 70px; background-color: #fff;}
#header > .hd_inner {display : flex; align-items: center; justify-content: space-between; height: 100%;}
#header .logo > a img {height: 50px;}

/* main */
.main_bgbox {width: 100%; height: 540px; background-color: #CFE5FF;}
.main_bgbox .bgbox_inner {position: relative; max-width: 1110px; width: 100%; height: 100%; margin: 0 auto; padding-top: 240px; background: no-repeat 100% 100% / 746px;}
.main_bgbox .cont .tit {font-size: 40px; font-weight: 700; line-height: 1.4;}
.main_bgbox .cont .btn {margin-top: 32px;}

#main .main_visual .bgbox_inner {background-image: url(img/main_obj1.png);}

.main_mid > .mid_inner {max-width: 988px; width: 100%; margin: 0 auto;}
.main_mid .main_list > li {padding: 138px 0;}
.main_mid .main_list > li > .box {overflow: hidden; display : flex; align-items: center; justify-content: space-between; gap: 64px; background-color: #FCFCFC; border-radius: 12px;}
.main_mid .main_list > li .thum img {display: block; height: 444px;}
.main_mid .main_list > li .cont {flex:1; padding-right: 42px; word-break: keep-all;}
.main_mid .main_list > li:nth-child(even) .cont {order: -1; padding-left: 42px; padding-right: 0; text-align: right;}
.main_mid .main_list > li .cont .cate {margin-bottom: 12px; color: #3692FF; font-size: 18px; font-weight: 700; line-height: 1.4444;}
.main_mid .main_list > li .cont .tit {margin-bottom: 24px; font-size: 40px; font-weight: 700; line-height: 1.4;}
.main_mid .main_list > li .cont .desc {font-size: 24px; font-weight: 500; line-height: 1.3333;}

.main_line {width: 100%; height: 138px; background-color: #FCFCFC;}

#main .main_btm .bgbox_inner {padding-top: 250px; background-image: url(img/main_obj2.png);}

/* footer */
#footer {background-color: #111827; height: 160px; padding-top: 32px;}
#footer > .ft_inner {display : flex; align-items: center; justify-content: center; max-width: 1120px; width: 100%; margin: 0 auto;}
#footer .copy {flex:1; color: #9CA3AF; font-size: 16px; font-weight: 400;}
#footer .ft_menu {flex:1; display : flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 400;}
#footer .ft_menu > li {padding: 0 15px;}
#footer .ft_menu > li > a {color: #E5E7EB;}
#footer .ft_icon {flex:1; display : flex; align-items: center; justify-content: flex-end;}
#footer .ft_icon > li + li {margin-left: 12px;}
#footer .ft_icon > li > a > img {display: block; height: 18px;}
Loading