Skip to content

박다희 3주차 실습 과제 제출합니다 #3

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

Open
daheeParkk wants to merge 1 commit into
base: main
Choose a base branch
from
Open

박다희 3주차 실습 과제 제출합니다 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
71 changes: 71 additions & 0 deletions 3week/signin/signin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
body {
background-color: rgba(121, 105, 228, 0.446);
}

.link-container {
position: relative;
width: 95vw;
height: 5vh;
}

.signup-link {
position: absolute;
right: 1%;
top: 5%;
font-size: small;
}

.contents-container {
width: 98.5vw;
height: 90vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.title {
position: absolute;
top: 8%;
font-size: x-large;
font-weight: 800;
color: rgb(18, 3, 101);
border-style: dashed;
padding-left: 10%;
padding-right: 10%;
padding-top: 1%;
padding-bottom: 1%;
border-radius: 10px 10px 10px 10px;
}

.id-line {
width: 30vw;
position: absolute;
top: 35%;
right: 35%;
display: flex;
justify-content: center;
}

.id {
margin-left: 15px;
}

.pw-line {
width: 30vw;
position: absolute;
top: 50%;
right: 35.5%;
display: flex;
justify-content: center;
}

.pw {
margin-left: 15px;
}

.login {
position: absolute;
top: 70%
}
29 changes: 29 additions & 0 deletions 3week/signin/signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in</title>
<link rel="stylesheet" href="signin.css">
</head>
<body>
<header>
<div class="link-container">
<a class="signup-link" href="../signup/signup.html">Sign up</a>
</div>
</header>
<section>
<div class="contents-container">
<div class="title">Dahee Site</div>
<div class="id-line">
<span class="id-mark">id:</span><input class="id" />
</div>
<div class="pw-line">
<span class="pw-mark">pw:</span><input class="pw" />
</div>
<button class="login">sign in</button>
</div>
</section>
</body>
</html>
125 changes: 125 additions & 0 deletions 3week/signup/signup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
body {
background-color: rgba(121, 105, 228, 0.446);
display: grid;
Copy link
Contributor

@hoooooony hoooooony Apr 29, 2024

Choose a reason for hiding this comment

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

질문에 대한 답은 signup에만 display grid속성이 들어가서 그런것 같습니다.

Copy link
Author

@daheeParkk daheeParkk Apr 29, 2024

Choose a reason for hiding this comment

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

signup에 있는 signin-link의 부모 요소는 relative를 가진 link-container라고 생각했는데 body가 grid인 것과 연관이 있는 건가요?

Copy link
Contributor

@hoooooony hoooooony Apr 29, 2024

Choose a reason for hiding this comment

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

'signup에 있는 signin-link의 부모 요소는 relative를 가진 link-container라고 생각했는데' 이부분은 정확합니다. 하지만 body와 link-container가 연관이 있기 때문에 그 아래의 link들의 위치가 달라진것 같습니다.
image
image
link-container가 signup페이지의 경우 가운데에 있고 signin페이지의 경우 왼쪽정렬이 되어있기 때문에 두가지 요소의 위치가 달라진것입니다.

Copy link
Author

@daheeParkk daheeParkk Apr 29, 2024

Choose a reason for hiding this comment

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

앗 link-container가 왼쪽 정렬 되어있어서 그랬군요..! 감사합니다 ㅠㅠ

justify-items: center;
align-items: center;
font-size: small;
}

.link-container {
position: relative;
width: 95vw;
height: 5vh;
}

.signin-link {
position: absolute;
right: 1%;
top: 5%;
font-size: small;
Copy link
Contributor

@hoooooony hoooooony Apr 29, 2024

Choose a reason for hiding this comment

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

이런식으로 주는 것보다는 link-container의 display속성을 flex로 주고 flex-direction: row-reverse;속성을 통해 방향을 반대로 바꾸면 좀 더 쉬울것 같아요 이때 주의할 점은 link-container의 width는 100%여야 원하는 모양이 나오거에요. 너무 오른쪽으로 붙었다면 link-container의 오른쪽 패딩을 줘도 괜찮고 link-container에 margin-right를 주어도 괜찮을듯 합니다.

Copy link
Author

@daheeParkk daheeParkk Apr 29, 2024

Choose a reason for hiding this comment

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

오,, flex-direction: row-reverse; 속성을 주는 게 더 괜찮아 보이네요! 감사합니당

}

.contents-container {
width: 98.5vw;
height: 90vh;
display: grid;
grid-template-columns: 1fr 1.5fr;
grid-template-rows: 3fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 0.7fr 1fr;
justify-items: center;
align-items: center;
column-gap: 10px;
}

.title {
grid-column: 1/3;
grid-row: 1/2;
font-size: x-large;
font-weight: 800;
color: rgb(18, 3, 101);
border-style: dashed;
padding-left: 10%;
padding-right: 10%;
padding-top: 1%;
padding-bottom: 1%;
border-radius: 10px 10px 10px 10px;
}

.id-mark {
grid-column: 1/2;
grid-row: 2/3;
justify-self: end;
}

.id {
grid-column: 2/3;
grid-row: 2/3;
justify-self: start;
}

.pw-mark {
grid-column: 1/2;
grid-row: 3/4;
justify-self: end;
}

.pw {
grid-column: 2/3;
grid-row: 3/4;
justify-self: start;
}

.pw-check-mark {
grid-column: 1/2;
grid-row: 4/5;
justify-self: end;
}

.pw-check {
grid-column: 2/3;
grid-row: 4/5;
justify-self: start;
}

.student-number-mark {
grid-column: 1/2;
grid-row: 5/6;
justify-self: end;
}

.student-number {
grid-column: 2/3;
grid-row: 5/6;
justify-self: start;
}

.major-mark {
grid-column: 1/2;
grid-row: 6/7;
justify-self: end;
}

.major {
grid-column: 2/3;
grid-row: 6/7;
justify-self: start;
}

.phone-number-mark {
grid-column: 1/2;
grid-row: 7/8;
justify-self: end;
}

.phone-number {
grid-column: 2/3;
grid-row: 7/8;
justify-self: start;
}

.btn-line {
grid-column: 1/3;
grid-row: 9/10;
justify-self: center;
}


61 changes: 61 additions & 0 deletions 3week/signup/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign up</title>
<link rel="stylesheet" href="signup.css">
</head>
<body>
<header>
<div class="link-container">
<a class="signin-link" href="../signin/signin.html">Sign in</a>
</div>
</header>
<section>
<div class="contents-container">
<div class="title">Dahee Site</div>
<div class="id-mark">
<span>id:</span>
</div>
<div class="id">
<input />
</div>
<div class="pw-mark">
<span>pw:</span>
</div>
<div class="pw">
<input />
</div>
<div class="pw-check-mark">
<span>pw check:</span>
</div>
<div class="pw-check">
<input />
</div>
<div class="student-number-mark">
<span>student number:</span>
</div>
<div class="student-number">
<input />
</div>
<div class="major-mark">
<span>major:</span>
</div>
<div class="major">
<input />
</div>
<div class="phone-number-mark">
<span>phone number:</span>
</div>
<div class="phone-number">
<input />
</div>
<div class="btn-line">
<button>cancel</button> <button>sign up</button>
</div>
</div>
</section>
</body>
</html>