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 #28

Merged
merged 1 commit into from
Apr 30, 2024
Merged

[강한솔] Sprint1 #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 Group 19.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_home_01.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_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 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 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 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 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 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 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 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.
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="en">
Copy link
Collaborator

Choose a reason for hiding this comment

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

HTMLElement.lang속성은 요소의 특성값과 텍스트 내용의 기본언어를 가져오거나 설정합니다!
한국어 사용자 대상으로 하는 사이트이므로 "en"이 아닌 "ko"가 되어야 할것 같아요! 😄
추가로 특별히 지역특성을 강조하고자 할 때는 '언어-지역(대문자)' 로 설정을 한답니다!

MDN과 이부분참고부탁드릴게요!

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="판다 얼굴.png"/>
<title>판다마켓</title>
</head>
<body>
<header>
<div id="header-container">
<a id="logo" href="index.html"><img alt="판다마켓 로고" src="Group 19.png"/></a>
<a id="login" class="btn" href="login.html">로그인</a>
</div>
</header>
<main>
<section class="blue-container">
<div class="pandas"><img alt="메인 팬더 이미지" src="Img_home_top.png"/></div>
<div id="main-show">
<div class="text">일상의 모든 물건을 <br>거래해 보세요</div>
<a id="go-to" class="btn" href="items.html">구경하러 가기</a>
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
<a id="go-to" class="btn" href="items.html">구경하러 가기</a>
<a id="go-to" class="botton" href="items.html">구경하러 가기</a>

</div>
</section>
<div id="white-containers">
<section class="white-container">
<img class="white-container-img" alt="옷을 보는 팬더들" src="Img_home_01.png"/>
<div class="explains">
<div class="small-text">
Hot item
</div>
<div class="text">
인기 상품을 <br>
확인해 보세요
</div>
<div class="middle-text">
가장 HOT한 중고거래 물품을<br>
판다 마켓에서 확인해 보세요
</div>
</div>
</section>
<section id="section2" class="white-container">
<img class="white-container-img" alt="돋보기 이미지" src="Img_home_02.png"/>
<div id="explain2" class="explains">
<div class="small-text">
Search
</div>
<div class="text">
구매를 원하는 <br>
상품을 검색하세요
</div>
<div class="middle-text">
구매하고 싶은 물품은 검색해서<br>
쉽게 찾아보세요
</div>
</div>
</section>
Comment on lines +42 to +57
Copy link
Collaborator

Choose a reason for hiding this comment

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

css파일을 확인해보면section2는 순서를 바꿔주고 있어요. css를 따로 적용하기 보단 html안에서 순서를 바꾸는게 더 직관적일 것 같습니다!

Suggested change
<section id="section2" class="white-container">
<img class="white-container-img" alt="돋보기 이미지" src="Img_home_02.png"/>
<div id="explain2" class="explains">
<div class="small-text">
Search
</div>
<div class="text">
구매를 원하는 <br>
상품을 검색하세요
</div>
<div class="middle-text">
구매하고 싶은 물품은 검색해서<br>
쉽게 찾아보세요
</div>
</div>
</section>
<section class="white-container">
<div id="explain2" class="explains">
<div class="small-text">
Search
</div>
<div class="text">
구매를 원하는 <br>
상품을 검색하세요
</div>
<div class="middle-text">
구매하고 싶은 물품은 검색해서<br>
쉽게 찾아보세요
</div>
</div>
<img class="white-container-img" alt="돋보기 이미지" src="Img_home_02.png"/>
</section>

<section class="white-container">
Copy link
Collaborator

Choose a reason for hiding this comment

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

클래스명을 가독성 있도록 잘 지어주셨어요👍
여기에 BEM방법론도 참고하셔서 추가해보는것도 더 좋을 것 같습니다!

<img class="white-container-img" alt="폴더와 상품들 이미지" src="Img_home_03.png"/>
<div class="explains">
<div class="small-text">
Register
</div>
<div class="text">
판매를 원하는 <br>
상품을 등록하세요
</div>
<div class="middle-text">
어떤 물건이든 판매하고 싶은 상품을<br>
쉽게 등록하세요
</div>
</div>
</section >
</div>
<section id="bottom-blue" class="blue-container">
<div class="pandas"><img src="Img_home_bottom.png"/></div>
<div id="bottom-text" class="text">믿을 수 있는<br>판다마켓 중고거래</div>
</section>
</main>
<footer>
<div id="footer-container">
<div class="footer-text">©codeit - 2024</div>
<div id="footer-mid-text"class="footer-text"><div>Privacy Policy</div><div>FAQ</div></div>
<div id="footer-img">
<img alt="facebook아이콘" src="ic_facebook.png"/>
<img alt="twitter아이콘" src="ic_twitter.png"/>
<img alt="youtube아이콘" src="ic_youtube.png"/>
<img alt="instagram아이콘" src="ic_instagram.png"/>
</div>
</div>
</footer>
</body>
</html>
Copy link
Collaborator

Choose a reason for hiding this comment

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

현재 filechanged를 보시면 아래 사진처럼 하나의 오류가 나오게 됩니다.
이는 "End Of Line(EOL)" 이 없다는 경고입니다. 이를 없애려면 파일 내 코드 마지막 줄 뒤에 개행을 해주셔야 해요.

image

이 블로그를 보시면서 왜 마지막 줄에 개행이 없을 때 깃헙에서 오류를 보여주는지 확인해보시고, 사용하시는 코드에디터에서 설정을 해보시는 것을 추천드립니다! (물론 해결을 안해도 코드상에선 문제가 없지만, 코드리뷰할 때 불필요하게 이것에 한번 더 눈이 가는것을 줄일 수 있습니다!)

11 changes: 11 additions & 0 deletions items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>
11 changes: 11 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

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

현재 안보이는 인덴트(띄어쓰기)가 존재하네요!
저는 이런 부분을 확인하기 위해 TrailingSpaces라는 익스텐션을 vsc에서 사용하고 있습니다. 또한 설정에서도 저장 시 자동으로 불필요한 띄어쓰기는 삭제 처리를 해주고 있답니다~

한솔님도 이런 부분은 설정을 셋팅해서 자동으로 삭제하게 한다면 신경쓰지 않고 코딩할 수 있을 것 같아요!

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

header{ /*메뉴 부분*/
padding: 10px 200px;
height: 70px;
}

#header-container{ /*메뉴 버튼 모음*/
display: flex;
justify-content: space-between;
}

#logo{ /*판다마켓 로고*/
width: 153px;
height: 51px;
}

.btn{ /*버튼 디자인*/
background-color: #3692FF;
color: #ffffff;
font-weight: 600;
}

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

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

.btn:enabled{
background-color:#9CA3AF;
}

#login{ /*로그인 버튼*/
width: 128px;
height: 48px;
padding: 12px 20px;
border-radius: 8px;
text-decoration-line: none;
text-align: center;
font-size: 16px;
line-height: 19.09px;
}

.blue-container{ /*파란색 부분*/
height: 540px;
background-color: #CFE5FF;
position: relative;
}

.white-container{ /*하얀색 부분*/
height: 720px;
background-color: #ffffff;
display: flex;
align-items: center;
gap: 64px;
}

.pandas{ /*팬더 이미지들*/
position: absolute;
bottom: 0;
left: 701px;
}

.text{ /*큰 글자*/
font-weight: 700;
font-size: 40px;
line-height: 56px;
color: #374151;
}

#main-show{ /*items로 가는 버튼과 설명*/
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
top: 170px;
left: 360px;
width: 357px;
height: 200px;
white-space: nowrap;
}

#go-to{ /*items로 가는 버튼*/
width: 355px;
height: 56px;
border-radius: 40px;
padding: 16px 124px;
text-decoration-line: none;
text-align: center;
font-size: 20px;
}

#white-containers{ /*흰색 컨테이너 부분*/
display: flex;
flex-direction: column;
align-items: center;
width: auto;
}

.white-container-img{ /*흰색 컨테이너 부분 이미지 크기*/
width: 588px;
height: 444px;
}

.explains{ /*흰색 컨테이너 텍스트들*/
display: flex;
flex-direction: column;
gap: 12px 24px;
}

.small-text{ /*작고 파란색 텍스트*/
color: #3692FF;
font-weight: 700;
font-size: 18px;
margin-bottom: 12px;
}

.middle-text{ /*중간 크기 텍스트*/
font-weight: 500;
font-size: 24px;
color: #374151;
line-height: 28.8px;
margin-top: 24px;
}

#section2{ /*두 번째 섹션 */
flex-direction: row-reverse;
}

#explain2{ /*두 번째 섹션 안 텍스트*/
text-align: right;
}

#bottom-blue{ /*흰색과 아래쪽 파란색 컨테이너 사이의 공간*/
margin-top: 300px;
}

#bottom-text{ /*아래쪽 텍스트*/
position: absolute;
top: 214px;
left: 360px;
}

footer{ /*바닥 요소 디자인*/
height: 160px;
padding: 32px 200px;
background-color: #111827;
}

#footer-container{ /*바닥 요소*/
width: 1520px;
height: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap
}

.footer-text{ /*바닥 텍스트 디자인*/
font-weight: 400;
font-size: 16px;
line-height: 19.09px;
text-align: center;
color: #9CA3AF;
}

#footer-mid-text{ /*Privacy Policy FAQ*/
display: flex;
gap: 30px;
}
Binary file added 판다 얼굴.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.
Loading