Skip to content

Basic 류정훈 sprint3 #81

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
kiJu2 merged 3 commits into from
Jul 17, 2025
Merged

Basic 류정훈 sprint3 #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc5eb0e
meta tag commit
Silicagel12 Jul 14, 2025
d598047
commit for style.css (index.html)
Silicagel12 Jul 16, 2025
f0dbd72
commit for loginstyle.css
Silicagel12 Jul 16, 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
16 changes: 11 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,27 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 스프린트 미션 3 meta 태그 -->
<meta property="og:type" content="website">
<meta property="og:title" content="판다마켓">
<meta property="og:description" content="일상의 모든 물건을 거래해보세요.">
<meta property="og:image" content="https://sprint-mission.netlify.app/img/Img_home_top.png">
<meta property="og:url" content="https://sprint-mission.netlify.app/">
Comment on lines +7 to +11
Copy link
Collaborator

@kiJu2 kiJu2 Jul 17, 2025

Choose a reason for hiding this comment

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

훌륭합니다 ~! 메타 태그를 적절히 설정하셨네요 👍👍

<title>판다마켓</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />

</head>
<body>
<header>
<a href="/" id="logo"><img src="img/logo.png">판다마켓</a>
<a href="/" id="logo"><img src="img/logo.png" id="loico">판다마켓</a>
<a href="/login.html" id="login">로그인</a>
</header>
<main>
<div class="hometop">
<div class="htbox">
<span class="textbox">
<div id="tbt1">일상의 모든 물건을 </br> 거래해 보세요</div>
<div id="tbt1">일상의 모든 물건을 거래해 보세요</div>
<div><a href="/items.html" id="itembtn">구경하러 가기</a></div>
</span>
<img src="img/Img_home_top.png" class="img">
Expand All @@ -28,7 +34,7 @@
<img src="img/Img_home_01.png" class="img">
<span class="htxt">
<div class="txtindex">Hot item</div>
<div class="txtmsg">인기 상품을 <br>확인해 보세요</div>
<div class="txtmsg">인기 상품을 확인해 보세요</div>
<div class="txttxt">가장 HOT 한 중고거래 물품을 <br>판다 마켓에서 확인해 보세요 </div>
</span>
</div>
Expand All @@ -37,7 +43,7 @@
<div class="hbox sec">
<span class="htxt">
<div class="txtindex">Search</div>
<div class="txtmsg">구매를 원하는 <br>상품을 검색하세요</div>
<div class="txtmsg">구매를 원하는 상품을 검색하세요</div>
<div class="txttxt">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</div>
</span>
<img src="img/Img_home_02.png" class="img">
Expand All @@ -48,7 +54,7 @@
<img src="img/Img_home_03.png" class="img">
<span class="htxt">
<div class="txtindex">Register</div>
<div class="txtmsg">판매를 원하는<br>상품을 등록하세요</div>
<div class="txtmsg">판매를 원하는 상품을 등록하세요</div>
<div class="txttxt">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</div>
</span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
</header>
<main>
<label for="email" class="labels">이메일</label>
<input id="email" type="email" name="useremail" class="inputbox">
<input id="email" type="email" name="useremail" class="inputbox"placeholder="이메일을 입력해 주세요.">
<label for="password" class="labels" >비밀번호</label>
<div class="passwordbox">
<input id="password" type="password" name="password" class="inputbox">
<input id="password" type="password" name="password" class="inputbox" placeholder="비밀번호를 입력해 주세요.">
<span class="blindIco"><img src="/img/password_on.svg" alt="blinder"></span>
</div>
<button type="submit">로그인</button>
Expand Down
35 changes: 31 additions & 4 deletions loginstyle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,7 @@ main{
margin:60px auto;
display:flex;
flex-direction: column;
gap:16px;

gap:16px;
}
.inputbox,
.labels{
Expand All @@ -48,6 +47,7 @@ main{
width: 100%;
height : 56px;
padding-right: 50px;
padding-left: 24px;
border-radius: 12px;
border: 2px;
border-color: #3182F6;
Expand All @@ -72,7 +72,7 @@ button{
height : 56px;
border-radius: 40px;
color: var(--gray100);
background-color: var(--blue);
background-color: var(--gray400);
width : 100%;
font-size: 20px;
font-weight: 600;
Expand Down Expand Up @@ -113,5 +113,32 @@ button{
.blindIco{
position: absolute;
right : 17px;
top : 17px;
top : 17px;
}
/*태블릿*/
@media(min-width : 768px) and (max-width : 1199px){

}
/*모바일*/
@media(max-width : 767px){
header{
margin-top: 24px;
}
Comment on lines +124 to +126
Copy link
Collaborator

@kiJu2 kiJu2 Jul 17, 2025

Choose a reason for hiding this comment

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

(제안) 만약 스타일 선택자 목적이라면 태그보다는 class를 선택자로 사용하는게 어떨까요?

클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !

좀 더 자세히 🤔

유지보수가 어려워질 수 있어요.

특정 p 태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.

태그 의미를 명확히 부여하기 어려워요.

스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.

만약 다음 코드의 스타일을 태그 선택자로만 지정한다면 ?

<p class="error-message">오류가 발생했습니다.</p>

물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.

예를 들어서 p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:

p {
    margin: 0;
}

그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요:

.paragraph {
    font-size: 16px;
    color: #333;
}

.highlight {
    background-color: yellow;
}

해당 피드백은 이 전에도 드렸었으나 혹시 몰라 첨부드립니다.
하나의 DOM에서 여러 header가 존재할 수 있으므로 제안드려 봅니다 ~! 😉

#logo{
font-size: 33px;
margin-bottom: 0;
}
.img{
width: 52px;
}
main{
width: 100%;
margin :32px auto;
padding-left: 16px;
padding-right: 16px;
max-width: 432px;
}
Comment on lines +134 to +140
Copy link
Collaborator

@kiJu2 kiJu2 Jul 17, 2025

Choose a reason for hiding this comment

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

혹시 아직 프리티어가 적용되지 않으셨을까요?

Suggested change
main{
width: 100%;
margin :32px auto;
padding-left: 16px;
padding-right: 16px;
max-width: 432px;
}
main{
width: 100%;
margin: 32px auto;
padding-left: 16px;
padding-right: 16px;
max-width: 432px;
}

사소한 줄바꿈, 띄어쓰기 등 코드를 작성하시다보면 자연스럽게 불규칙해지는 경우가 많아요.
이를 돕기 위해서 개발 커뮤니티에서는 개발 경험 향상을 위한 여러가지 도구들이 있는데요.

보편적으로 많이 사용되는 툴은 prettier입니다 !

Prettier: https://prettier.io/

prettier는 vscode plugin에서 install하고 실행할 수 있습니다 ! 🤗

macos 경우 option + shift + f
windows의 경우 alt + shift + f

만약 프리티어 적용이 어려우시면 DM주세요 ~! 😉

Copy link
Author

@Silicagel12 Silicagel12 Jul 17, 2025

Choose a reason for hiding this comment

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

다운로드는 받았는데 실행을 따로 해야하나보네요..

.labels{
font-size: 14px;
}
}
8 changes: 4 additions & 4 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
<header><a href="/" id="logo"><img src="img/logo_big.png" class="img">판다마켓</a></header>
<main>
<label for="email" class="labels">이메일</label>
<input id="email" type="email" name="useremail" class="inputbox">
<input id="email" type="email" name="useremail" class="inputbox" placeholder="이메일을 입력해 주세요.">
<label for="nickname" class="labels">닉네임</label>
<input id="nickname" name="username" class="inputbox">
<input id="nickname" name="username" class="inputbox" placeholder="닉네임을 입력해 주세요.">
<label for="password" class="labels" >비밀번호</label>
<div class="passwordbox">
<input id="password" type="password" name="password" class="inputbox">
<input id="password" type="password" name="password" class="inputbox" placeholder="비밀번호를 입력해 주세요.">
<span class="blindIco"><img src="/img/password_on.svg" alt="blinder"></span>
</div>
<label for="passwordcheck" class="labels" >비밀번호 확인</label>
<div class="passwordbox">
<input id="passwordcheck" type="password" name="password" class="inputbox">
<input id="passwordcheck" type="password" name="password" class="inputbox" placeholder="비밀번호를를 다시 한 번 입력해 주세요.">
<span class="blindIco"><img src="/img/password_off.svg" alt="blinder"></span>
</div>
<button type="submit">회원가입</button>
Expand Down
173 changes: 172 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ header{
color : #f3f4f6;
background-color: #3691ff;
border-radius: 8px;
padding: 12px 23px;
padding: 12px 24px;
gap:10px;
}
.img{
Expand Down Expand Up @@ -72,6 +72,7 @@ header{
#tbt1{
margin: 0 62px 32px 0;
flex-shrink: 1;
line-height: 140%;
}
#itembtn{
display:block;
Expand All @@ -93,6 +94,7 @@ header{
font-weight: 700;
line-height: 140%;
flex-shrink: 1;
width: 357px;
}

.home{
Expand All @@ -110,6 +112,7 @@ header{
background-color: #fcfcfc;
gap:64px;
flex-shrink: 1;
width: 988px;
}
.sec{
text-align: right;
Expand All @@ -129,6 +132,9 @@ header{
font-weight: 700;
line-height: 140%;
flex-shrink: 1;
white-space: wrap;
word-break: normal;
overflow-wrap: normal;
}
.txttxt{
font-size: 24px;
Expand Down Expand Up @@ -169,4 +175,169 @@ footer{
.icons{
display:flex;
gap:12px;
}
/*태블릿*/
@media(min-width : 768px) and (max-width : 1199px){
Copy link
Collaborator

@kiJu2 kiJu2 Jul 17, 2025

Choose a reason for hiding this comment

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

굿굿 ~ 태블릿, PC 별로 미디어 쿼리를 잘 적용하셨네요 👍👍

header{
padding : 0 24px;
}
.htbox{
height : 100%;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.hometop{
padding-top: 84px;
height : 771px;
align-items: flex-start;
justify-content: center;
}
.textbox{
width : 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:24px;
text-align: center;
}
#tbt1{
margin:0;
width: 100%;
}
#itembtn{
width: 357px;
}
.homebottom{
height : 927px;
padding-top: 200px;
align-items: flex-start;
justify-content: center;
}
.home{
align-items: flex-start;
margin:52px 24px;
}
.hbox{
width: 100%;
height: 708px;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap:24px;
}
.sec{
flex-direction: column-reverse;
}
.htxt{
width:100%;
}
.txtmsg{
white-space: nowrap;
}
.txtmsg{
font-size: 32px;
}
.txttxt{
font-size:18px;
}
.img{
width : 100%;
max-height: 524px;
overflow: hidden;
}
}
/*모바일*/
@media(max-width : 767px){
header{
padding : 0 16px;
}
#loico{
display: none;
}
.htbox{
height : 100%;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.hometop{
padding-top: 48px;
height : 540px;
align-items: flex-start;
justify-content: center;
}
.textbox{
width : 240px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:18px;
text-align: center;
}
#tbt1{
margin:0;
width: 100%;
font-size: 32px;
}
#itembtn{
width: 240px;
height: 48px;
font-size: 18px;
line-height: 17px;
}
Comment on lines +280 to +290
Copy link
Collaborator

@kiJu2 kiJu2 Jul 17, 2025

Choose a reason for hiding this comment

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

(제안) 단순히 스타일을 위한 선택자라면 id보다는 class를 추천드립니다 ! 📌

클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !

그래서 왜 ? 🤔

id는 고유해요.

  • HTML 문서에서 동일한 id를 가진 요소는 존재할 수 없습니다. 따라서 같은 스타일을 여러 요소에 적용하려면 class를 사용하는 것이 더 적합합니다.
  • class는 여러 요소에 재사용 가능하기 때문에 반복적인 스타일에 적합합니다.

id의 CSS 우선순위가 높습니다.

  • id 선택자의 우선순위는 class보다 높아요.
    이는 CSS를 유지보수하거나 재정의할 때 예기치 않은 문제를 일으킬 수 있어요.
    • id: 우선순위 100
    • class: 우선순위 10
  • 필요 이상으로 높은 우선순위를 가진 id를 사용하면, 나중에 스타일을 덮어쓰기가 어려워질 수 있지요.

재사용성 및 유지보수성

  • class는 재사용 가능하므로 동일한 스타일을 여러 요소에 쉽게 적용할 수 있습니다.
  • id는 특정 요소에만 적용되므로 유연성이 떨어지고, 재사용을 하지 못합니다.

위 코멘트의 경우에도 이 전에 같은 피드백을 드린 적 있으나 혹시 몰라 첨부드립니다 !
이 후 만약 같은 패턴이 보여질 경우 정훈님께서 현재 정황을 판단하기로 아이디와 태그에 직접 스타일링 하는 것이 더 낫다고 판단하셨다고 생각하고 같은 피드백은 삼가도록 하겠습니다 🫡🫡

.homebottom{
height : 540px;
padding-top: 120px;
align-items: flex-start;
justify-content: center;
}
.home{
align-items: flex-start;
margin:40px 16px;
}
.hbox{
width: 100%;
height: 416px;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap:24px;
}
.sec{
flex-direction: column-reverse;
}
.htxt{
width:100%;
}
.txtindex{
font-size: 16px;
}
.txtmsg{
white-space: nowrap;
font-size: 24px;
}
.txttxt{
font-size:18px;
}
.img{
width : 100%;
max-height: 260px;
overflow: hidden;
}
footer{
flex-wrap: wrap;
justify-content: space-between;
padding : 32px;
height:160px;
}
#links>*{
margin-left: 0;
margin-right: 32px;
}
#bn{
order:3;
}
Comment on lines +340 to +342
Copy link
Collaborator

@kiJu2 kiJu2 Jul 17, 2025

Choose a reason for hiding this comment

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

bn은 어떤걸 의미할까요?

줄임말 보다는 의도를 명확히 전달해보는건 어떨까요?
물론 btn, pw 등 편의를 위해서 사용되기도 하나, 명확한 클래스 이름을 사용하시는게 더욱 의도된 바를 전달하기 쉽습니다.

이는 "닌자 코드"에 해당하는 문법입니다:
약어 사용하기
팀에 한 글자 짜리 변수나 모호한 변수명을 사용하지 못하게 하는 제약이 있다면 약어를 쓰는 기지를 발휘하세요. 변수명은 짧을수록 좋으니까요.

예시:

list → lst.
userAgent → ua.
browser → brsr.
등등…
모든 걸 줄여서 당신의 코드를 읽을 가치가 있는 직감이 뛰어난 개발자만 유지보수를 담당 할 수 있게 해 놓읍시다.

위 문서는 "이렇게 해라 !"가 아니라, "이를 지양하자 !"라는 것으로 작성된 문서 내용입니다. 😊
물론 oAuth(Open Authorization), sms(Short Message Service) 와 같이 내용이 길어서 통상적으로 줄임말을 사용하는 경우도 있기는 하기에 무조건 풀 텍스트를 사용하자 라는 차원은 아님을 전달드립니다. 😊

Copy link
Author

@Silicagel12 Silicagel12 Jul 17, 2025

Choose a reason for hiding this comment

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

회사 연혁같은걸 영어로 뭐라 부르는지 몰라서 검색한 후 앞글자만 따서 명명한것으로 기억하고 있습니다.

}
Loading