Skip to content

Commit

Permalink
[Basic 정재형] sprint2 feedback (#105)
Browse files Browse the repository at this point in the history 
* 수정중인파일

* sprint2

* sprint2> login.html (BEM feedback)

---------

Co-authored-by: Basic-정재형 <titochung625l@naver.com>
  • Loading branch information
@jaehyeongjung
jaehyeongjung and Basic-정재형 authored Nov 7, 2024
1 parent 63fb42f commit 147e54b
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 73 deletions.
63 changes: 29 additions & 34 deletions sprint 2/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,56 +17,51 @@
</head>

<body>
<div class="container">
<section class="login-box">
<a href="/">
<section class="top">
<div class="top-left">
<section class="login">
<a href="/" class="login__home-link">
<section class="login__header">
<div class="login__logo">
<img src="images/logo/판다 얼굴.png" alt="판다마켓 홈" width="103.53"/>
</div>

<div class="top-right">
<div class="login__title">
<p>판다마켓</p>
</div>

</section>
</a>

<section class="bottom">
<div class="bottom-1">
<div class="bottom-1-top">
<div class="id-top">
<p class="id-top-text">이메일</p>
<section class="login__form">
<div class="login__form__input">
<div class="login__form__input__email">
<div class="login__label-container">
<p class="login__label-text">이메일</p>
</div>
<div class="id">
<div class="id-in">
<input type="email" class="input-field" placeholder="이메일을 입력해주세요" />
</div>
<div class="login__input-wrapper">
<input type="email" class="login__input" placeholder="이메일을 입력해주세요" />
</div>
</div>

<div class="bottom-1-bottom">
<div class="id-top">
<p class="id-top-text">비밀번호</p>
<div class="login__form__input__pw">
<div class="login__label-container">
<p class="login__label-text">비밀번호</p>
</div>
<div class="id">
<div class="id-in">
<input type="email" class="input-field" placeholder="비밀번호를 입력해주세요" />
</div>
<div class="login__input-wrapper">
<input type="email" class="login__input" placeholder="비밀번호를 입력해주세요" />
</div>
</div>
</div>

<div class="btm">
<p class="btm-text">로그인</p>
<div class="login__submit">
<p class="login__submit-text">로그인</p>
</div>

<div class="btm1">
<div class="btm1-in">
<p class="btm1-in-text">간편 로그인하기</p>
<div class="login__social-login">
<div class="login__social-wrapper">
<p class="login__social-text">간편 로그인하기</p>


<div class="btm1-in2">
<div class="login__social-icons">
<a href="https://www.google.com/">
<img src="images/logo/Component 2.png" alt="google" width="42" />
</a>
Expand All @@ -79,14 +74,14 @@

</div>

<div class="btm2">
<div class="btm2-left">
<p class="btm2-left-text">판다마켓이 처음이신가요?</p>
<div class="login__signup-prompt">
<div class="login__signup-message">
<p class="login__signup-text">판다마켓이 처음이신가요?</p>
</div>

<div class="btm2-right">
<div class="login__signup-action">
<a href="signup.html">
<p class="btm2-right-text">회원가입</p>
<p class="login__signup-link-text">회원가입</p>
</a>
</div>

Expand All @@ -96,6 +91,6 @@


</section>
</div>

</body>
</html>
7 changes: 3 additions & 4 deletions sprint 2/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
</head>

<body>
<div class="container">
<section class="login-box2">
<a href="/">
<section class="top">
Expand Down Expand Up @@ -79,9 +78,9 @@
</div>
</div>

<div class="btm-sub">
<p class="btm-text">로그인</p>
</div>
<button class="button btm-sub">
로그인
</button>

<div class="btm1-sub">
<div class="btm1-in">
Expand Down
64 changes: 29 additions & 35 deletions sprint 2/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,24 @@ img {
word-break: keep-all 속성을 사용하면 띄어쓰기를 기준으로 줄바꿈하도록 설정하여 어절 기반의 한국어 특성에 적합한 읽기 편한 레이아웃을 제공할 수 있습니다.
*/
html,body {
color: #374151;
word-break: keep-all;
font-family: "Pretendard", sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform: scale(calc(min(100vw / 1920, 100vh / 1080)));
transform-origin: top left; /* 축소 기준을 왼쪽 상단으로 설정 */
width: 1920px;
height: 1080px;
background-color: #ffffff;
}




/* 여러 요소가 나란히 배열되어 있을 때는 티가 나지 않아 보여도 항상 잊지 말고 display: flex; align-items: center;로 세로 중앙 정렬을 맞춰주세요. */
header {
width: 100%;
Expand Down Expand Up @@ -135,21 +143,7 @@ h1 {
}


.container {
width: 1920px;
height: 1080px;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
position: relative;

/* 화면에 맞게 축소/확대 */
transform: scale(calc(min(100vw / 1920, 100vh / 1080)));
transform-origin: top left; /* 축소 기준을 왼쪽 상단으로 설정 */
}

.login-box {
.login {
width: 640px;
height: 618px;
background-color: white;
Expand All @@ -168,7 +162,7 @@ h1 {
}


.top {
.login__header {
width: 396px;
height: 132px;
background-color: white;
Expand All @@ -187,7 +181,7 @@ h1 {
}


.top-left {
.login__logo {
width: 103.53px;
height: 103.88px;
top: 12.98px;
Expand All @@ -196,7 +190,7 @@ h1 {
background-color: white;
}

.top-right {
.login__title {
width: 266px;
height: 90px;
top: 23.98px;
Expand All @@ -211,7 +205,7 @@ h1 {
color:#3692FF
}

.bottom {
.login__form {
width: 640px;
height: 446px;
margin-top: 40px; /* .top과의 간격 설정 */
Expand All @@ -238,31 +232,31 @@ h1 {
margin-top: -100px;
}

.bottom-1 {
.login__form__input {
width: 640px;
height: 220px;
opacity: 0px;
background-color: white;
margin-top: -10px;
}

.bottom-1-top {
.login__form__input__email {
width: 640px;
height: 98px;

opacity: 0px;
background-color: white;
}

.bottom-1-bottom {
.login__form__input__pw {
width: 640px;
height: 98px;
margin-top: 30px;
opacity: 0px;
background-color: white;
}

.btm{
.login__submit{
width: 640px;
height: 56px;
padding: 16px 124px 16px 124px;
Expand All @@ -284,7 +278,7 @@ h1 {
margin-top: 400px;
}

.btm1{
.login__social-login{
width: 640px;
height: 74px;
padding: 16px 23px 16px 23px;
Expand All @@ -306,7 +300,7 @@ h1 {
margin-top: 24px;
}

.btm2 {
.login__signup-prompt {
width: 197px;
height: 24px;
opacity: 0px;
Expand All @@ -330,7 +324,7 @@ h1 {
margin-left: 35%;
}

.btm-text {
.login__submit-text {

font-family: Pretendard;
font-size: 20px;
Expand All @@ -340,7 +334,7 @@ h1 {

}

.id {
.login__input-wrapper {
width: 640px;
height: 56px;
padding: 16px 24px 16px 24px;
Expand All @@ -364,7 +358,7 @@ h1 {
text-align: left;
}

.id-top-text {
.login__label-text {
width: 47px;
height: 26px;
gap: 0px;
Expand All @@ -378,7 +372,7 @@ h1 {
white-space: nowrap;
}

.btm1-in {
.login__social-wrapper {
width: 594px;
height: 42px;
gap: 0px;
Expand All @@ -389,7 +383,7 @@ h1 {
justify-content: space-between;
}

.btm1-in-text {
.login__social-text {
font-family: Pretendard;
font-size: 16px;
font-weight: 500;
Expand All @@ -398,7 +392,7 @@ h1 {
color: #1F2937;
}

.btm2-left-text {
.login__signup-text {
font-family: Pretendard;
font-size: 14px;
font-weight: 500;
Expand All @@ -407,7 +401,7 @@ h1 {
color: #1F2937;
}

.btm2-right-text {
.login__signup-link-text {
font-family: Pretendard;
font-size: 14px;
font-weight: 500;
Expand All @@ -416,7 +410,7 @@ h1 {
color: #3692FF;
}

.btm1-in2 {
.login__social-icons {
width: 100px;
height: 42px;
display: flex;
Expand All @@ -426,7 +420,7 @@ h1 {
}

/* 기본 설정 */
.input-field {
.login__input {
width: 592px; /* .id-text와 동일한 너비 */
height: 26px; /* .id-text와 동일한 높이 */
padding: 8px; /* 내부 여백 */
Expand Down

0 comments on commit 147e54b

Please sign in to comment.