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

Jump to bottom

Basic 김가희 #54

Merged
merged 5 commits into from
Aug 28, 2024
Merged

Basic 김가희 #54

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
e1555b3
alt 추가 및 SNS 링크 연결
stella-418 Aug 23, 2024
315ab10
리뷰 수정
stella-418 Aug 24, 2024
b63fc6d
font 안 먹던 버그 수정
stella-418 Aug 24, 2024
9d2a09f
반응형 navbar 구현
stella-418 Aug 24, 2024
a12df96
navbar 아래 구현
stella-418 Aug 24, 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
41 changes: 26 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,32 @@
<meta charset="UTF-8">
<title>판다 마켓</title>
<link rel="stylesheet" href="style.css">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
/>
<link rel="stylesheet" href="reset.css" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

수정 요청 사항 잘 반영해 주셨습니다. 👍

</head>
<body>
<div class="navbar">
<div class="logo">
<img src="image/Group_22.png">
<img src="image/Group_22.png" class="panda-logo">
<a href ="/">
<img src="image/logo.svg" class="logotxt"></img>
<img src="image/logo.svg" class="logotxt" alt='판다마켓 글자'></img>
Copy link
Collaborator

Choose a reason for hiding this comment

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

대체 텍스트는 이미지를 보지 못하는 사용자에게 노출되는 텍스트입니다!
실제 사용자 입장에서 의미 있는 텍스트를 넣어주시면 좋을 것 같습니다.

</a>
</div>
<div>
<button class="navbtn txt" onclick="location.href='login.html'">로그인</button>
<a class="navbtn txt" href='login.html'>로그인</a>
</div>
</div>
<div class="top-back">
<div class="txtbtn">
<span class="top-text">일상의 모든 물건을 <br> 거래해 보세요</span>
<button class="topbtn txt" onclick="location.href='lookaround.html'">구경하러 가기</button>
<div class="top-box">
<div class="txtbtn">
<div class="txt-align-box">
<span class="top-text">일상의 모든 물건을&nbsp</span>
Copy link
Collaborator

@hoody-jellybean hoody-jellybean Aug 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

&nbsp; 로 넣으셔야 될 것 같은데 혹시 오타인가요?

<span class="top-text">거래해 보세요</span>
</div>
<a class="topbtn txt" href='lookaround.html'>구경하러 가기</a>
</div>

<img src="image/Img_home_top.png" class="top-img"></img>
</div>
<img src="image/Img_home_top.png" class="top-img">
</div>
<div class="floor-box">
<img src="image/desktop_02.png" class="secondimg">
Expand Down Expand Up @@ -54,10 +57,18 @@
</span>
</div>
<span>
<img src="image/facebook.png">
<img src="image/twitter.png">
<img src="image/youtube.png">
<img src="image/instagram.png">
<a href='https://www.facebook.com/?locale=ko_KR' target="_blank">
<img src="image/facebook.png">
</a>
<a href='https://x.com/?lang=ko' target="_blank">
<img src="image/twitter.png">
</a>
<a href="https://www.youtube.com/?hl=ko&gl=KR&app=desktop" target="_blank">
<img src="image/youtube.png">
</a>
<a href="https://www.instagram.com/sem/campaign/emailsignup/?campaign_id=13530338586&extra_1=s%7Cc%7C547419126947%7Ce%7Cinstagram%20c%7C&placement=&creative=547419126947&keyword=instagram%20c&partner_id=googlesem&extra_2=campaignid%3D13530338586%26adgroupid%3D126262419014%26matchtype%3De%26network%3Dg%26source%3Dnotmobile%26search_or_content%3Ds%26device%3Dc%26devicemodel%3D%26adposition%3D%26target%3D%26targetid%3Dkwd-1321618852491%26loc_physical_ms%3D9197620%26loc_interest_ms%3D%26feeditemid%3D%26param1%3D%26param2%3D&gad_source=1&gclid=EAIaIQobChMIzebolvaKiAMV0l4PAh0gcSwWEAAYASAAEgJlLvD_BwE" target="_blank">
Comment on lines +66 to +69
Copy link
Collaborator

@hoody-jellybean hoody-jellybean Aug 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

유튜브, 인스타그램의 도메인만 넣어주셔도 될 것 같습니다.

사용자의 상태(ex. 사용 언어 등)에 따른 상세 URL 처리는 해당 사이트 내부에서 처리해줄거에요~!

<img src="image/instagram.png">
</a>
</span>
</div>
</footer>
Expand Down
9 changes: 5 additions & 4 deletions login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
body{
display: flex;
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -37,7 +37,6 @@ body{
border-radius: 12px;
height: 56px;
padding-left: 24px;
/* gap:10px 이거 있고 없고의 차이가 무엇인가요 ?*/
}

.input:focus {
Expand All @@ -46,7 +45,6 @@ body{

.input::placeholder{
color: #9CA3AF;
font-family: 'Pretendard Variable';
font-weight: 400;
}

Expand Down Expand Up @@ -108,3 +106,6 @@ body{
font-weight: 500;
}

@media (min-width: 768px) {

}
8 changes: 4 additions & 4 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@
</div>
<main class="container">
<form class="email-box">
<label class="email-label">이메일</label>
<input class="input" placeholder="이메일을 입력해주세요">
<label class="email-label" for ="email">이메일</label>
<input class="input" placeholder="이메일을 입력해주세요" id="email">
</form>
<form class="pw-box">
<label class="pw-label">비밀번호</label>
<input class="input" placeholder="비밀번호를 입력해주세요" type="password">
<label class="pw-label" for ="pw">비밀번호</label>
<input class="input" placeholder="비밀번호를 입력해주세요" type="password" id="pw">
</form>
<button class="login-btn" onclick="location.href='/login'">로그인</button>
<article class="easy-login-box">
Expand Down
21 changes: 21 additions & 0 deletions reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,27 @@ dd {
margin-block-end: 0;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* 출처: https://keembloo.tistory.com/5 [keembloo:티스토리] */
Copy link
Collaborator

Choose a reason for hiding this comment

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

티스토리 등 블로그 내용은 참고만 해주시면 좋을 것 같습니다!
이런 자료는 커뮤니티에서 다수의 사용자가 추천한 자료를 사용하시는 걸 더 추천드려요~
(사실 이 블로그도 커뮤니티 내에서 많은 사용자들이 이용하는 reset css를 첨부해놓고 있긴 합니다.)


/* list를 role값으로 갖는 ul, ol 요소의 기본 목록 스타일을 제거합니다. */
ul[role='list'],
ol[role='list'] {
Expand Down
Loading
Loading