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

[김승석] Sprint4 #146

Merged
merged 4 commits into from
Nov 18, 2024
Merged

[김승석] Sprint4 #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
831ce86
스크립트 변경
Nov 11, 2024
6d7bc5e
미션4 스크립트 추가
Nov 12, 2024
94b8a62
버튼 스크립트 수정
Nov 12, 2024
275f094
반응형 네임값 변경
kss53043 Nov 13, 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
8 changes: 4 additions & 4 deletions css/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
@import "./variable";

@mixin mobile {
@mixin mini {
@media screen and (max-width: #{$breakpoint-mobile - 1px}) {
@content;
}
}

@mixin tablet {
@mixin mobile {
@media screen and (max-width: #{$breakpoint-tablet - 1px}) {
@content;
}
}

@mixin pc {
@mixin tablet {
@media screen and (max-width: #{$breakpoint-pc - 1px}) {
@content;
}
}

@mixin desktop {
@mixin pc {
@media screen and (max-width: #{$breakpoint-desktop - 1px}) {
@content;
}
Expand Down
23 changes: 23 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -641,6 +641,7 @@ img {
}
.form_box .form_inp_list > li .desc {
position: relative;
z-index: 2;
}
.form_box .form_inp_list > li .desc .btn {
position: absolute;
Expand All @@ -654,6 +655,28 @@ img {
.form_box .form_inp_list > li .desc .btn.active {
background: url(/img/btn_visibility_on.svg) no-repeat 50% 50%/24px;
}
.form_box .form_inp_list > li .err_box {
position: relative;
height: 32px;
margin-top: -32px;
padding: 8px 16px 0px;
color: #F74747;
Copy link
Contributor

Choose a reason for hiding this comment

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

해당 색상을 자주 사용하는 것 같은데,
CSS 색상 변수로 등록하면 좋을 것 같아요.

font-size: 14px;
font-weight: 600;
line-height: 1.7142;
transition: all 0.2s;
opacity: 0;
}
.form_box .form_inp_list > li.err .desc > .inp {
border-color: #F74747;
}
.form_box .form_inp_list > li.err .err_box {
margin-top: 0px;
opacity: 1;
}
.form_box .form_inp_list > li.suc .desc > .inp {
border-color: var(--blue);
}
.form_box .form_inp_list > li + li {
margin-top: 24px;
}
Expand Down
2 changes: 1 addition & 1 deletion css/style.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

94 changes: 55 additions & 39 deletions css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,12 @@ img {display: block;}
.inp.blue:focus {border: 1px solid var(--blue);}
/* button태그 기본디자인 */
.btn_sml {display: block; width: 128px; padding: 12px 20px; background-color: var(--blue); border-radius: 8px; color: var(--gray100); font-size: 16px; font-weight: 600; line-height: 1.5; text-align: center; transition: all 0.2s;
@include tablet {
@include mobile {
width: 82px;
}
}
.btn_lg {display: block; width: 357px; padding: 12px 20px; background-color: var(--blue); border-radius: 50px; color: var(--gray100); font-size: 20px; font-weight: 600; line-height: 1.6; text-align: center; transition: all 0.2s;
@include tablet {
@include mobile {
width: 240px; font-size: 18px;
}
}
Expand All @@ -54,10 +54,10 @@ img {display: block;}
.header {position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 70px; background-color: #fff; transition: all 0.2s;}
.header.scr {box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);}
.header > .hd_inner {display : flex; align-items: center; justify-content: space-between; max-width: 1120px; width: 100%; height: 100%; margin: 0 auto;
@include pc {
@include tablet {
padding-left: 24px; padding-right: 24px;
}
@include tablet {
@include mobile {
padding-left: 16px; padding-right: 16px;
}
}
Expand All @@ -78,7 +78,7 @@ img {display: block;}
> img {max-width: 746px; width: 100%;}
}
}
@include pc {
@include tablet {
height: auto; padding-top: 84px; text-align: center;
.bgbox_inner {
flex-direction: column; align-items: center;
Expand All @@ -95,7 +95,7 @@ img {display: block;}
}
}
}
@include tablet {
@include mobile {
padding-top: 48px;
.bgbox_inner {
.cont {
Expand All @@ -114,130 +114,130 @@ img {display: block;}
}

.main_mid {
@include pc {
@include tablet {
background-color: #fcfcfc;
}
}
.main_mid > .mid_inner {
max-width: 988px; width: 100%; margin: 0 auto;
@include pc {
@include tablet {
padding: 24px 24px 56px;
}
@include tablet {
@include mobile {
padding: 52px 16px 83px;
}
}
.main_mid .main_list > li {
padding: 138px 0;
@include pc {
@include tablet {
padding: 0;
}
}
.main_mid .main_list > li + li {
@include pc {
@include tablet {
padding-top: 52px;
}
@include tablet {
@include mobile {
padding-top: 40px;
}
}
.main_mid .main_list > li > .box {
overflow: hidden; display : flex; align-items: center; justify-content: space-between; gap: 64px; background-color: #FCFCFC; border-radius: 12px;
@include pc {
@include tablet {
display: block; gap:0; border-radius: 0;
}
}
.main_mid .main_list > li .thum {
@include pc {
@include tablet {
overflow: hidden; margin-bottom: 24px; border-radius: 14px;
}
@include tablet {
@include mobile {
border-radius: 7px;
}
}
.main_mid .main_list > li .thum img {
display: block; height: 444px;
@include pc {
@include tablet {
width: 100%; height: auto;
}
}
.main_mid .main_list > li .cont {
flex:1; padding-right: 42px; word-break: keep-all;
@include pc {
@include tablet {
padding-right: 0;
}
}
.main_mid .main_list > li:nth-child(even) .cont {
order: -1; padding-left: 42px; padding-right: 0; text-align: right;
@include pc {
@include tablet {
padding-left: 0;
}
}
.main_mid .main_list > li .cont .cate {
margin-bottom: 12px; color: var(--blue); font-size: 18px; font-weight: 700; line-height: 1.4444;
@include pc {
@include tablet {
margin-bottom: 16px;
}
@include tablet {
@include mobile {
margin-bottom: 8px; font-size: 16px; line-height: 1.625;
}
}
.main_mid .main_list > li .cont .tit {
margin-bottom: 24px; font-size: 40px; font-weight: 700; line-height: 1.4;
@include pc {
@include tablet {
font-size: 32px; line-height: 1.3125;
}
@include tablet {
@include mobile {
margin-bottom: 16px; font-size: 24px; line-height: 1.3333;
}
}
.main_mid .main_list > li .cont .desc {
font-size: 24px; font-weight: 500; line-height: 1.3333;
@include pc {
@include tablet {
font-size: 18px; line-height: 1.4444;
}
@include tablet {
@include mobile {
font-size: 16px; line-height: 1.625;
}
}

.main_bgbox.main_btm {
position: relative; margin-top: 138px;
@include pc {
@include tablet {
margin-top: 0;
padding-top: 201px;
}
@include tablet {
@include mobile {
padding-top: 121px;
}
}
.main_bgbox.main_btm::before {
content: ''; position: absolute; bottom: 100%; left: 0; display: block; width: 100%; height: 138px; background-color: #fcfcfc;
@include pc {
@include tablet {
display: none;
}
}
.main_bgbox.main_btm .cont {
padding-bottom: 172.5px;
@include pc {
@include tablet {
padding-bottom: 0;
}
}
.main_bgbox.main_btm .cont .tit > br {
@include pc {
@include tablet {
display: block;
}
}
.main_bgbox.main_btm .thum {
@include pc {
@include tablet {
padding-top: 217px;
}
@include tablet {
@include mobile {
padding-top: 131px;
}
}
.main_bgbox.main_btm .thum > img {
@include pc {
@include tablet {
min-width: auto;
}
}
Expand Down Expand Up @@ -270,13 +270,13 @@ img {display: block;}
}
}

@include pc {
@include tablet {
height: auto; padding: 32px 0 108px;
> .ft_inner {
padding: 0 104px;
}
}
@include tablet {
@include mobile {
padding: 32px 0;
> .ft_inner {
flex-wrap: wrap; justify-content: space-between; padding: 0 32px;
Expand All @@ -299,7 +299,7 @@ img {display: block;}
/* 로그인, 회원가입 */
.form_section {
max-width: 640px; width: 100%; margin: 0 auto; padding: 150px 0;
@include tablet {
@include mobile {
max-width: 400px; padding: 70px 16px;
}
}
Expand All @@ -309,7 +309,7 @@ img {display: block;}
img {
height: 132px;
}
@include tablet {
@include mobile {
margin-bottom: 24px;
img {
height: 66px;
Expand All @@ -323,19 +323,35 @@ img {display: block;}
display: block; margin-bottom: 16px; font-size: 18px; font-weight: 700; line-height: 1.4444;
}
.desc {
position: relative;
position: relative; z-index: 2;
.btn {
position: absolute; right: 24px; top: 50%; width: 24px; height: 24px; background: url(/img/btn_visibility_off.svg) no-repeat 50% 50% / 24px; transform: translateY(-50%);
}
.btn.active {
background: url(/img/btn_visibility_on.svg) no-repeat 50% 50% / 24px;
}
}
.err_box {
position: relative; height: 32px; margin-top: -32px; padding: 8px 16px 0px; color: #F74747; font-size: 14px; font-weight: 600; line-height: 1.7142; transition: all 0.2s; opacity: 0;
}
}
> li.err {
.desc {
> .inp {border-color: #F74747;}
}
.err_box {
margin-top: 0px; opacity: 1;
}
}
> li.suc {
.desc {
> .inp {border-color: var(--blue);}
}
}
> li + li {
margin-top: 24px;
}
@include tablet {
@include mobile {
> li {
.tit {
margin-bottom: 8px; font-size: 14px; font-weight: 700; line-height: 1.7142;
Expand All @@ -349,7 +365,7 @@ img {display: block;}

.form_box .form_btn {
margin-top: 24px;
@include tablet {
@include mobile {
margin-top: 16px;
}
}
Expand Down
4 changes: 2 additions & 2 deletions items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>판다마켓</title>
</head>
<body>

Expand Down
5 changes: 4 additions & 1 deletion login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

animate.css는 어떤 부분에 사용하기 위해 추가한 건가요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

아, animate.css 사용해보려다가 안했는데 지우겠습니다~

</head>
<body>
<article class="form_section">
Expand All @@ -19,6 +20,7 @@
<div class="desc">
<input type="text" name="" id="panda_email" class="inp blue" placeholder="이메일을 입력해주세요">
</div>
<div class="err_box"></div>
</li>
<li>
<label class="tit" for="panda_password">비밀번호</label>
Expand All @@ -28,10 +30,11 @@
<div class="hidden">비밀번호 확인하기 및 가리기 버튼</div>
</button>
</div>
<div class="err_box"></div>
</li>
</ul>
<div class="form_btn">
<button class="a_btn btn_lg w100" type="submit" disabled>로그인</button>
<button data-link="/items.html" class="a_btn btn_lg w100" type="submit" disabled>로그인</button>
</div>
<div class="form_simple">
<p>간편 로그인하기</p>
Expand Down
Loading
Loading