Skip to content

[이유진] sprint3 #156

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
addiescode-sj merged 13 commits into from
May 12, 2025
Merged

[이유진] sprint3 #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b08b6f0
chore(font): font-display 속성 추가 및 폴백 폰트 설정 개선
youdaeng2 May 3, 2025
0639f06
refactor(style): flex-center 클래스 common.css로 이동 및 로그인/회원가입 페이지 적용
youdaeng2 May 3, 2025
94cca3d
chore(a11y): 비밀번호 토글 버튼에 aria-label 및 aria-pressed 속성 추가
youdaeng2 May 3, 2025
713f82a
perf(header): 로고 이미지 파일명 변경 및 srcset/sizes 기반 반응형 구현
youdaeng2 May 5, 2025
bf45509
perf(images): footer-banner, footer sns-link 이미지에 loading 속성 추가로 레이지…
youdaeng2 May 5, 2025
e70fd89
feat(responsive): 태블릿 반응형 레이아웃 적용 및 컨테이너 유틸 적용
youdaeng2 May 7, 2025
53c9070
feat(responsive): 데스크탑 반응형 레이아웃 적용
youdaeng2 May 8, 2025
1931a81
refactor(layout): 로그인,회원가입 페이지 모바일 레이아웃 조정
youdaeng2 May 8, 2025
aea687a
feat(responsive): 로그인, 회원가입 페이지 태블릿/데스크탑 반응형 레이아웃 적용
youdaeng2 May 8, 2025
0f9febf
chore(ui): 로그인, 회원가입 페이지 input placeholder 문구 업데이트
youdaeng2 May 8, 2025
3382f1b
chore(header): 헤더 데스크탑 버전 max-width 고정값 추가
youdaeng2 May 8, 2025
7c04590
fix(header): srcset 혼선 방지를 위해 picture 태그로 로고 이미지 분기
youdaeng2 May 8, 2025
4bc1592
feat: Open Graph 및 Twitter 메타 태그 추가
youdaeng2 May 8, 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
7 changes: 7 additions & 0 deletions css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,16 @@
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* Font size + line-height */
html {
font-size: 62.5%;
}

.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
86 changes: 36 additions & 50 deletions css/login-signup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,22 @@
/* form label (이메일 / 비밀번호) */
form label {
display: block;
font-size: var(--text-lg);
font-weight: var(--font-bold);
font-size: var(--text-lg);
font-weight: var(--font-bold);
margin-bottom: var(--space-xs);
}

/* form input 텍스트 */
.content input {
font-size: var(--text-base);
font-weight: var(--font-normal);
font-size: var(--text-base);
font-weight: var(--font-normal);
color: var(--secondary-color-gray700);
/* 레이아웃 & 디자인 */
width: 100%;
height: 56px;
padding: 0 20px;
border-radius: 12px;
background-color: var(--secondary-color-gray100);
}

/* visibility 버튼 아이콘 */
Expand All @@ -22,20 +28,20 @@ form label {

/* 제출 버튼 */
.btn-submit {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
font-size: var(--text-xl);
font-weight: var(--font-semibold);
width: 100%;
height: 56px;
border-radius: 40px;
background-color: var(--primary-color-100);
background-color: var(--secondary-color-gray400);
color: #fff;
}

/* 간편 로그인 타이틀 */
.sns-login p {
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--secondary-color-gray700);
font-weight: var(--font-medium);
color: var(--secondary-color-gray800);
}

/* SNS 아이콘 링크 */
Expand All @@ -45,49 +51,42 @@ form label {
}

/* 회원가입 텍스트 */
.sign-up {
.sign-up,
.login {
font-size: var(--text-base);
font-weight: var(--font-normal);
color: var(--secondary-color-gray700);
}
.sign-up a {
.sign-up a,
.login a {
font-weight: var(--font-semibold);
color: var(--primary-color-100);
text-decoration: underline;
}



input:focus {
outline-color: var(--primary-color-100);
}

.content {
max-width: 640px;
max-width: 400px;
width: 100%;
margin: 120px auto;
padding: 0 20px;
display: flex;
justify-content: center;
align-items: center;
margin: 80px auto;
padding: 0 16px;
flex-direction: column;
gap: 24px;
}

.logo {
width: 198px;
}

form {
width: 100%;
margin-top: 26px;
display: flex;
flex-direction: column;
gap: 24px;
}

.content input {
width: 100%;
height: 56px;
padding: 0 20px;
border-radius: 12px;
background-color: var(--secondary-color-gray100);
gap: 16px;
}

.password-input-box {
Expand All @@ -98,14 +97,6 @@ form {
padding: 0 40px 0 20px;
}

.btn-submit {
width: 100%;
height: 56px;
border-radius: 40px;
background-color: var(--primary-color-100);
color: #fff;
}

.sns-login {
width: 100%;
height: 74px;
Expand All @@ -118,9 +109,6 @@ form {
}

.sns-login-link {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
}

Expand All @@ -135,19 +123,17 @@ form {
display: none;
}

.sign-up,
.login {
font-size: 1.4rem;
}

.sign-up a,
.login a {
text-decoration: underline;
color: var(--primary-color-100);
}

@media (min-width: 768px) {
Copy link
Collaborator

@addiescode-sj addiescode-sj May 12, 2025

Choose a reason for hiding this comment

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

기본 스타일은 모바일 기준으로 작성하고, 화면이 넓어지는 순서대로 미디어 쿼리를 써줘서 불필요한 스타일 재정의를 줄였네요 👍 굳굳!

Copy link
Collaborator

@addiescode-sj addiescode-sj May 12, 2025

Choose a reason for hiding this comment

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

다만, 지금처럼 미디어 타입을 명시하지 않으면 CSS 명세에서는 이를 자동으로 아래와 같이 all로 간주합니다.

@media all and (min-width: 768px) { ... }

all 키워드를 사용하시면, 불필요한 미디어 유형까지 체크하고 특정 속성만 변경되는 경우에도 모든 스타일을 재계산해 성능에 좋지 않은 선택입니다. 보통 우리는 웹을 개발하니까 screen 미디어 타입만 특정해주면 되겠죠?

.content {
max-width: 640px;
Copy link
Collaborator

@addiescode-sj addiescode-sj May 12, 2025

Choose a reason for hiding this comment

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

컨테이너의 주요 레이아웃 속성 (너비, 여백 등) 은 CSS variable로 관리해주면, 각 값이 나타내는 의미도 명확해지고, 미디어쿼리를 사용해 분기가 생길때 쉽게 업데이트할수있으니 훨씬 관리가 편해질거예요!

예시)

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

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

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

padding: 0;
}

form {
gap: 24px;
}

.logo {
width: 369px;
}
}
2 changes: 1 addition & 1 deletion css/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

html,
body {
font-family: 'Pretendard-Regular', sans-serif;
font-family: 'Pretendard-Regular', system-ui, sans-serif;
}

button {
Expand Down
Loading
Loading