Skip to content

Basic 남만재 sprint3 #138

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 2 commits into from
May 14, 2025
Merged

Basic 남만재 sprint3 #138

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
478e7fe
메인, 로그인, 회원가입 페이지의 반응형 추가 및 반응형을 위한 일부 css수정
10000jaeN Apr 30, 2025
c2a82d3
mission2 피드백 반엉
10000jaeN May 1, 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 modified .DS_Store
View file
Open in desktop
Binary file not shown.
11 changes: 9 additions & 2 deletions global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@
box-sizing: border-box;
}

body {
margin: 68px 0 0 0;
background-color: #ffffff;
color: #374151;
font-family: 'Noto Sans KR', sans-serif;
}

:root {
--color-gray900: #111827;
--color-gray800: #1f2937;
Expand All @@ -16,10 +23,10 @@
}

.button {
background-color: #3692ff;
background-color: var(--color-blue);
padding: 16px 124px;
border-radius: 9999px;
color: #f9fafb;
color: var(--color-gray50);
text-decoration: none;
font-size: 16px;
border: none;
Expand Down
Binary file added img/btn_large.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/btn_medium.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.
84 changes: 59 additions & 25 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
body {
margin: 68px 0 0 0;
background-color: #ffffff;
color: #374151;
font-family: 'Noto Sans KR', sans-serif;
}

.nav-wrapper {
position: fixed;
top: 0;
Expand Down Expand Up @@ -36,20 +29,26 @@ body {
width: 100%;
}

.imageSet {
height: auto;
max-width: 100%;
min-width: 0;
display: block;
}

.login {
padding: 16px 34px;
border-radius: 10px;
padding: 12px 41px;
border-radius: 8px;
color: #f3f4f6;
margin: 0;
flex-shrink: 0;
}

.title-helper {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin: 0 auto;
width: 1110px;
/* max-width: 1110px; */
}

.title {
Expand All @@ -68,37 +67,37 @@ body {
}

.subtitle {
font-size: 40px;
font-size: clamp(32px, 4vw, 40px);
font-weight: 700;
margin-bottom: 40px;
}


.home {
flex-shrink: 0;
}


section {
margin: 0 auto;
}

.badge {
font-size: 18px;
font-size: clamp(16px, 4vw, 18px);
font-weight: 700;
color: #3692ff;
line-height: 26px;
width: 100%;
}

.section-content {
padding-right: 24px;
}

.section-title {
font-size: 40px;
white-space: normal;
word-break: keep-all;
Copy link
Collaborator

Choose a reason for hiding this comment

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

white-space: normal; 은 기본값이라 써주시지않으셔도됩니다 :)

font-size: clamp(24px, 4vw, 40px);
font-weight: 700;
line-height: 140%;
margin: 0 64px;
}

.section-subtitle {
font-size: 24px;
font-size: clamp(16px, 4vw, 24px);
font-weight: 500;
line-height: 32px;
}
Expand Down Expand Up @@ -156,6 +155,7 @@ footer {
padding-top: 40px;
margin: 0 auto;
max-width: 1110px;
flex-wrap: wrap;
}

.link {
Expand All @@ -167,19 +167,53 @@ footer a {
padding: 0 10px;
}

@media (max-width: 1199px) {
body {
Copy link
Collaborator

Choose a reason for hiding this comment

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

현재 CSS파일에서 max-width: 1199px -> max-width: 767px 순서로 미디어쿼리가 작성되어있어 specificity 문제가 발생할수있습니다. 기본 스타일은 모바일에 맞추고, (작은 화면에서부터) 큰 화면으로 점차 확장해나가는 순서로 작성하시면 불필요한 스타일 재정의 및 코드 중복을 효과적으로 줄일 수 있습니다.

또, 미디어쿼리 조건 평가 시 max-width를 사용하게되면 max-width: 767px 이하의 화면에서는 두가지 미디어쿼리가 모두 적용됩니다. 이때 첫번째로 얘기한 specificity(특이성) 문제가 생길 수 있는데요! 두 미디어쿼리의 특이성이 동일하므로 나중에 선언된 스타일이 적용됩니다. 따라서 767px 이하 스크린에서 동일한 선택자의 속성을 재정의하지않으면 1199px이하에 적용되어있는 스타일이 동시에 적용됩니다. 관리에 그닥 좋지 않겠죠?

background-color: #fcfcfc;
}

@media all and (max-width: 1110px) {
.nav-inner {
padding: 0 20px;
padding: 0 24px;
}

.title-helper {
flex-direction: column;
align-items: center;
}

.title-p {
text-align: center;
}

.main-container {
gap: 52px;
}

.main-content {
flex-direction: column;

align-items: normal;
width: 100%;
padding: 24px;
}

.footer-name {
color: var(--color-gray200);
}
}

@media (max-width: 767px) {
.nav-inner {
padding: 0 16px;
}

.footer {
padding: 40 16px
}

.footer-name {
order: 3;
width: 100%;
text-align: left;
margin-top: 60px;
}
}
23 changes: 10 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,22 +33,21 @@
구경하러 가기
</a>
</div>
<img class="home" src="img/Img_home_top.png" alt="동산 위, 가운데 장바구니를 들고있는 판다마켓 캐릭터를 중심으로 왼 편에는 주거 건물을 표현한 그림이 있고 오른 편에는 나무 두 그루가 있다.">
<img class="imageSet" src="img/Img_home_top.png" alt="동산 위, 가운데 장바구니를 들고있는 판다마켓 캐릭터를 중심으로 왼 편에는 주거 건물을 표현한 그림이 있고 오른 편에는 나무 두 그루가 있다.">
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기 쓰인 이미지도 srcset과 sizes 사용을 고려한다면 반응형 이미지 리소스 최적화가 이루어질수있겠죠? 첫 화면에 보이는 이미지가 아닌 스크롤을 쭉 내려야 보이는 이미지라면 레이지로딩을 적용할수도있고요 :)

참고

</div>
</section>
</header>

<main>
<div class="main-container">
<section class="main-content hotItem">
<img src="img/Img_home_01.png" alt="두 판다 캐릭터의 뒷 모습과 그들 앞에 여러 품목 중 하트가 많은 상품을 고르는 듯 한 모습">
<img class="imageSet" src="img/Img_home_01.png" alt="두 판다 캐릭터의 뒷 모습과 그들 앞에 여러 품목 중 하트가 많은 상품을 고르는 듯 한 모습">
<div class="section-content">
<label class="badge">
Hot item
</label>
<h2 class="section-title">
인기 상품을<br>
확인해 보세요
인기 상품을 확인해 보세요
</h2>
<p class="section-subtitle">
가장 HOT한 중고거래 물품을 <br>
Expand All @@ -58,14 +57,13 @@ <h2 class="section-title">
</section>

<section class="main-content reverse search">
<img src="img/Img_home_02.png" alt="나열된 여러 아이템 중에 물음표가 그려져 있는 아이텐에 돋보기를 가져다 대는 그림">
<img class="imageSet" src="img/Img_home_02.png" alt="나열된 여러 아이템 중에 물음표가 그려져 있는 아이텐에 돋보기를 가져다 대는 그림">
<div class="section-content">
<label class="badge">
Search
</label>
<h2 class="section-title">
구매를 원하는<br>
상품을 검색하세요
구매를 원하는 상품을 검색하세요
</h2>
<p class="section-subtitle">
구매 하고싶은 물건은 검색해서<br>
Expand All @@ -75,17 +73,16 @@ <h2 class="section-title">
</section>

<section class="main-content register">
<img src="img/Img_home_03.png" alt="나열된 폴더 들 중 한 폴더 위에 각각 연필꽂이, 책, 하트모양 안경이 그려진 아이콘이 있고 요술봉으로 뭔가 하는 그림">
<img class="imageSet" src="img/Img_home_03.png" alt="나열된 폴더 들 중 한 폴더 위에 각각 연필꽂이, 책, 하트모양 안경이 그려진 아이콘이 있고 요술봉으로 뭔가 하는 그림">
<div class="section-content">
<label class="badge">
Register
</label>
<h2 class="section-title">
판매를 원하는<br>
상품을 등록하세요
판매를 원하는 상품을 등록하세요
</h2>
<p class="section-subtitle">
어떤 물건이든 판매 하고싶은 상품을 <br>
어떤 물건이든 판매 하고싶은 상품을</br>
쉽게 등록하세요
</p>
</div>
Expand All @@ -102,14 +99,14 @@ <h2 class="section-title">
판다마켓 중고 거래
</div>
</div>
<img class="home" src="img/Img_home_bottom.png" alt="동산 위에 장바구니를 들고있는 두 팬더 캐릭터들이 만족스럽게 거래를 마친 듯 리뷰와 댓글을 다는 듯한 모습을 말풍선으로 표현하였고 기분좋게 서로 인사하며 각자 갈 길을 걷고있다.">
<img class="imageSet" src="img/Img_home_bottom.png" alt="동산 위에 장바구니를 들고있는 두 팬더 캐릭터들이 만족스럽게 거래를 마친 듯 리뷰와 댓글을 다는 듯한 모습을 말풍선으로 표현하였고 기분좋게 서로 인사하며 각자 갈 길을 걷고있다.">
</div>
</section>
</div>

<footer>
<div class="footer">
<div>
<div class="footer-name">
©codeit - 2024
</div>
<div>
Expand Down
25 changes: 18 additions & 7 deletions login.css
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 파일에서도 위에서 코멘트 드렸던 미디어 쿼리를 사용하면서 불필요한 스타일 재정의를 최소화하는 방법 잘 참고해보세요!
그리고 컨테이너 요소의 레이아웃과 관련된 속성 (너비, 간격 등) 은 CSS 변수로 만드시는것도 아래 예시와 같이 코드를 훨씬 명료하게 만들어줄 수 있습니다 :)

예시)

:root {
  --container-width: 100%;
}

@media (min-width: 768px) {
  :root {
    --container-width: 750px;
  }
}

.container {
  width: var(--container-width);
}

Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
body {
background-color: #ffffff;
color: #374151;
font-family: 'Noto Sans KR', sans-serif;
}

.form-container {
display: flex;
flex-direction: column;
Expand All @@ -15,7 +9,7 @@ body {

.form-container-logo {
width: 369px;
height: 132px;
height: 100%;
}

.form-content {
Expand Down Expand Up @@ -78,4 +72,21 @@ body {

a {
color: var(--color-blue)
}

@media (max-width: 767px) {
.form-container {
width: 100%;
max-width: 400px;
margin: 80px auto;
}

.form-container-logo {
width: 198px;
height: 100%;
}

.form-content-label {
font-size: 14px;
}
}
26 changes: 22 additions & 4 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,32 @@

<form class="form-content">
<label class="form-content-label" for="email">이메일</label>
<input class="form-content-input" id="email" name="email" placeholder="입력">
<input
class="form-content-input"
id="email"
name="email"
autocomplete="email"
placeholder="입력"
>

<label class="form-content-label" for="password">비밀번호</label>
<div class="input-wrapper">
<input class="form-content-input" id="password" name="password" type="password" placeholder="입력">
<img class="visibility-icon" src="/img/Property 1=Variant2.png">
<input
Copy link
Collaborator

Choose a reason for hiding this comment

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

접근성과 데이터 제출을 잘 고려해서 작성하셨네요 👍 굳굳!

class="form-content-input"
id="password"
name="password"
type="password"
autocomplete="current-password"
placeholder="입력"
>
<img
class="visibility-icon"
src="/img/Property 1=Variant2.png"
aria-label="비밀번호 표시"
aria-pressed="false"
>
</div>
<button class="button">로그인</button>
<button class="button loginBtn">로그인</button>
</form>

<div class="social-login">
Expand Down
Loading
Loading