Skip to content

[양지선] sprint1 #25

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

[양지선] sprint1 #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a076178
미션 구현을 위한 html 생성
geesunny Feb 24, 2025
4d03f52
미션제출
geesunny Feb 26, 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 .DS_Store
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.

❗️ 수정요청
지선님 해당 파일은 mac에서 작업하실 때 생성되는 파일입니다.
해당 폴더에 대한 정보를 가지고 있는 파일로, 이러한 파일들은 git repo에 올라갈 이유가 없습니다~
git repo에는 공유할필요가 있는 파일들만 올라가면 되기 때문에 이러한 파일들은 git에 올라가지 않도록 관리하는 것이 좋습니다.
관련한 블로그 글이 있으니 읽어보시고, 제거하시는 것을 추천드릴께요~

블로그

Binary file not shown.
Binary file added images/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added images/click_main.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.

❗️ 수정요청
해당 이미지를 사용하지 않는 것으로 확인되네요~ 불필요한 파일들은 없는것이 관리측면에서 좋습니다~

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_login.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_pandamarket_logo.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.

❗️ 수정요청
ic는 icon의 의미로 해당 이미지는 icon이 아니니 logo.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/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.
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_hotitem.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.

❗️ 수정요청
해당 이미지에서 아래 부분만 이미지로 쓰시고 나머지는 html로 작성하시는 것이 좋아요.
이미지는 추후 반응형 디자인시 변경하기가 어렵기 때문에 Hot item, 인기 상품을 확인해 보세요 등을 html로 작성하시고 css를 통해 디자인을 바꿔주시는 방식으로 하셔야합니다~

스크린샷 2025-02-27 오후 3 53 37

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.

❗️ 수정요청
해당 이미지 파일의 크기를 보면 988 × 444로 되어 있습니다.
저희는 반응형 사이트를 만들고 있고, 이런 이미지들은 모바일에서도 사용할 것이기 때문에 추출하실때, 1배수가 아닌 2배수로 추출해주셔야 해상도가 더 높은 모바일에서도 잘 나옵니다.
아래처럼 figma export 탭에서 2x 로 설정하고 추출해주세요~

스크린샷 2025-02-24 오전 9 58 17

현재 파일 크기입니다.
스크린샷 2025-02-27 오후 3 59 30

아래는 위에서 말씀드린 이미지 영역을 2x 추출했을 시 크기입니다.
스크린샷 2025-02-24 오전 9 59 10

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_main.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.

❗️ 수정요청
위에서 리뷰 드린것처럼 해당 이미지에서 인사하는 판다만 빼고, 파란 배경과 글자들은 다 html로 작성해주세요!

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_main2.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_resister.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_search.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.
67 changes: 67 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
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.

❗️ 수정요청

html lang 속성은 스크린리더, 검색 엔진등에게 해당 사이트가 어떤 언어 기반으로 작성되었는지 설명하는 속성입니다.
해당 속성에는 이미 특정 언어들을 의미하는 예약어가 들어가야 합니다. 예를들어 en은 english 즉 영어를 의미합니다.
한국어는 ko를 써야합니다~

Suggested change
<html lang="en">
<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">
</head>
<body>
<header>
<div class="header">
<a href="/" >
<img src="images/ic_pandamarket_logo.png" alt="판다마켓 로고" class="logo"></a>
Comment on lines +12 to +13
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.

💊 제안

현재 코드에서는 태그와 태그가 들여쓰기 없이 한 줄로 붙어 있어 가독성이 조금 떨어질 수 있습니다.
태그 간 계층 구조를 명확하게 표현하기 위해 아래처럼 작성하시는 것을 추천드려요~

Suggested change
<a href="/" >
<img src="images/ic_pandamarket_logo.png" alt="판다마켓 로고" class="logo"></a>
<a href="/" >
<img src="images/ic_pandamarket_logo.png" alt="판다마켓 로고" class="logo">
</a>

<a href="/login">
<img src="images/ic_login.png" alt="로그인" class="login"></a>
</div>
</header>
<section class="headline-wrap">
<div class="headline">
<div class="headline-content">
<h1 class="headline-heading">
일상의 모든 물건을<br>
거래해 보세요
</h1>
Comment on lines +21 to +24
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.

👍 칭찬
상단 배너 이미지가 아니라 html로 작업하신 것 좋습니다~ 다른 부분도 이렇게 해주시면 👍

<a href="/items">
<h2 class="headline-button" alt="구경하러가기">구경하러 가기</h2></a>
</div>
<img class="headline-image" src="images/img_home_top.png"
alt="판다" width="746px" height="340px">
</div>
</section>
<section class="wrap">
<div class="content">
<img src="images/img_hotitem.png" alt="핫 아이템" id="hotitem" class="content1">
<img src="images/img_search.png" alt="검색" id="search" class="content2">
<img src="images/img_resister.png" alt="등록" id="resister" class="content3">
</div>
</section>
<div>
<img src="images/img_main2.png" alt="하단이미지" class="main2">
</div>
<footer>
Copy link
Collaborator Author

@geesunny geesunny Feb 26, 2025

Choose a reason for hiding this comment

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

a태그를 눌러서 링크로 연결되지 않아요 혹시 확인부탁드립니다.

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.

코멘트를 달아주신 부분은 footer 태그이지만 해당 페이지의 a 태그가 왜 동작이 안되는지에 대한 질문이라 이해하고 답변드리겠습니다~
현재 페이지에서 link는 걸어주셨지만 해당하는 페이지가 없어 그 페이지로 이동했을시 notFound 에러가 나는 것입니다.
우선 각 링크에 해당하는 페이지들-privacy.html, login.html 등-을 만들어주시고 이를 연결해주시면 됩니다.
다만 주의할 점은 현재 단계에서 href에 입력해주실때, 확장자를 포함하셔야 한다는 것입니다.
따라서 파일 만드시고 아래처럼 작성해주시면 잘 동작할거에요~

<a href='/login.html' /> // 입력한 파일의 주소가 맞는지 확인하셔야해요.

<div class="footer-content">
<div class="footer-one">
<p>©codeit - 2024</p>
</div>

<div class="footer-two">
<a href="/privacy">Privacy Policy</a>
<a href="/fnq">FAQ</a>
</div>

<div class="footer-icons">
<a href="https://www.facebook.com">
<img src="images/ic_facebook.png" alt="페이스북" id="facebook"></a>
<a href="https://www.twitter.com">
<img src="images/ic_twitter.png" alt="트위터" id="twitter"></a>
<a href="https://www.youtube.com">
<img src="images/ic_youtube.png" alt="유튜브" id="youtube"></a>
<a href="https://www.instagram.com">
<img src="images/ic_instagram.png" alt="인스타그램" id="instagram"></a>
</div>

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

html {
display: block;
}

.header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 400px;
width: 1920px;
height: 70px;
color: #ffffff;
margin: 0 auto;
gap: 10px;
border-bottom: 1px;
}

.logo{
width: 153px;
height: 51px;
margin: 0 auto;
display: block;
cursor: pointer;
}

.login{
width: 128px;
height: 48px;
border-radius: 8px;

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: 10px;
margin: 0 200;
display: block;
}

.headline-wrap{
display: flex;
justify-content: center;
align-items:center;
padding-top: 200px;
width: 1920px;
height: 540px;
margin: 0 auto;
background-color: #CFE5FF;
width: 100%;
}

.headline{
display: flex;
justify-content: center;
align-items: center;
width: 1110px;
height: 340px;
gap: 7px;
margin: 0 auto;
}

.headline-content{
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
width: 357px;
height: 260px;
padding: auto 60px;
gap: 32px;
}

.headline-heading{

margin: 0 auto;
height: 112px;
font-size: 40px;
font-weight: 700;
line-height: 56px;
font-family: Pretendard;
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.

❗️ 수정요청
font-famliy 속성은 해당 요소들에 모두 공통 적용되므로 body 태그나 html 태그자체에 적용해주시고 나머지는 지우시는게
반복을 줄이고 관리하기도 좋습니다.

Suggested change
font-family: Pretendard;
html {
font-family: Pretendard; // html 요소의 자식들은 해당 속성을 물려받음
}

color: #374151;
}

.headline-button{
text-decoration: none;
width: 357px;
height: 56px;
border-radius: 40px;
padding: 16px 120px;
background-color: #3B82F6;
color: #F9FAFB;
font-size: 20px;
font-weight: 500;
text-align: center;
font-family: Pretendard;
cursor: pointer;
}

.headline-content a {
text-decoration: none;
}
Comment on lines +105 to +107
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.

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

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


.headline-image{
display: flex;
}

.wrap{
display: flex;
justify-content: center;
width: 1920px;
height: 2160px;
position: relative;
top: 610px;
padding: 138px 466px;
gap: 10px;
margin: 0 auto;
}

.content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 988px;
height: 444px;
border-radius: 12px;
gap: 138px;
margin: 0 auto;
}
Comment on lines +113 to +135
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.

❗️ 수정요청
해당 .wrap 요소가 html 흐름을 벗어나 띄워져 있고 특정 height를 가지고 있기 때문에
footer의 privacyPolicy, FAQ, SNS 링크들을 가려 클릭할 수 없게 합니다.

또한 특정 요소들을 position 속성을 이용해 배치하는 것은 css 작성을 어렵게하므로 추천드리지 않습니다.

스크린샷 2025-02-27 오후 4 21 23

따라서 내부 요소에 의해 자연스럽게 width, height값을 가지게 되므로 아래의 값만 남겨두시는 것을 추천드려요.

Suggested change
.wrap{
display: flex;
justify-content: center;
width: 1920px;
height: 2160px;
position: relative;
top: 610px;
padding: 138px 466px;
gap: 10px;
margin: 0 auto;
}
.content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 988px;
height: 444px;
border-radius: 12px;
gap: 138px;
margin: 0 auto;
}
.wrap{
display: flex;
justify-content: center;
gap: 10px;
}
// content 요소도 height 값이 너무 작게 입력되어 있어 디자인대로 나오지 않아 height, width값을 제거해주었습니다.
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 12px;
gap: 138px;
}


.main2{
display: flex;
justify-content: center;
align-items: center;
width: 1920px;
height: 540px;
top: 2908px;
margin: 0 auto;
}

footer {
display: flex;
justify-content: center;
align-items: center;
width: 1920px;
height: 160px;
top: 3348px;
padding: 32px 400px;
background-color: #111827;
gap: 10px;
margin: 0 auto;
}

.footer-content {
display: flex;
justify-content:space-between;
align-items: center;
width: 1120px;
height: 20px;
top: -20px;
padding-bottom: 50px;
}

.footer-one{
display: flex;
width: 112px;
height: 19px;
font-family: pretendard;
font-weight: 400px;
font-size: 16px;
line-height: 19.09px;
text-align: center;
color: #9CA3AF;
}

.footer-two{
display: flex;
height: 19px;
gap: 30px;
font-family: pretendard;
font-size: 16px;
line-height: 19.09px;
text-align: center;
color: #E5E7EB;
text-decoration: none;
}

.footer-two a{
color: #E5E7EB;
text-decoration: none;
}

.footer-icons{
display: flex;
width: 116px;
height: 20px;
gap: 12px;
}
Loading