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

임예솔 과제 제출합니다 #1

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

임예솔 과제 제출합니다 #1

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
5f2083a
임예솔 과제 제출합니다
Oct 11, 2024
595df07
임예솔 과제 제출합니다
Oct 11, 2024
c2bc084
임예솔 과제 제출합니다
Oct 15, 2024
51ea05a
진짜최종수정
Oct 27, 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
61 changes: 61 additions & 0 deletions 임예솔/as_1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
body {
background-color: #585858;
display: flex;
position: relative;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
/* .login에 align-item: center를 작성해도 안되길래 margin으로 위치를 조정했었음
=> 부모요소인 body에 뷰포트 높이를 100으로 설정하여 해결 (스크롤이 생겨서 overflow를 hidden으로 설정*/
}

.login {
width: 400px;
height: 500px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
}

#button {
width: 300px;
height: 40px;
background-color: #03c75a;
border-radius: 5px;
border: 1px solid #03c75a;
margin: 40px auto;
color: white;
}

.logo {
width: 400px;
height: 180px;
}

hr {
color: #e1e1e1;
width: 100%;
border: none;
height: 1px;
background-color: #e1e1e1;
}

.text {
border: 2px solid #e1e1e1;
width: 300px;
height: 35px;
margin-top: 10px;
border-radius: 5px;
display: flex;
align-items: center;
padding-left: 10px;
}

input {
border: none;
width: 100%;
}
56 changes: 56 additions & 0 deletions 임예솔/as_1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
/>

<title>과제 1</title>
<link rel="stylesheet" href="as_1.css" />
<script>
function login() {
var id = document.getElementById("id").value.trim();
var pw = document.getElementById("pw").value.trim();
// getElementById() 메서드를 사용하여 각 id 요소를 찾아 반환
// 공백 입력 방어: value 값을 가져올 때 trim() 메서드를 사용하여 앞뒤 공백을 제거

if (id === "") {
// id 요소의 값이 없을 때
alert("아이디를 입력해주세요."); // 경고창을 띄우고
return false; // 폼이 전송되지 않도록 함
} else if (pw === "") {
// pw 요소의 값이 없을 때 위와 동일
alert("비밀번호를 입력해주세요.");
return false;
}
// 조건에 맞게 로그인 성공시
window.location.href = "success.html"; // success.html로 이동
return false; // 폼이 전송되지 않도록 함
// 폼을 제출하는 것이 아닌 페이지 이동을 하는 것이기에 불필요한 요청을 방지하기 위함
// window.location.href = " " : 현 브라우저의 url을 변경하거나 조회할 수 있는 JS 객체 속성
}
</script>
</head>
<body>
<div>
<div class="login">
<img src="./img/logo.jpeg" alt="logo" class="logo" />
<hr />
<form onsubmit="return login()">
<div class="text">
<i class="material-symbols-outlined"> person </i>
<input type="text" id="id" placeholder="아이디" />
</div>
<div class="text">
<i class="material-symbols-outlined"> lock </i>
<input type="password" id="pw" placeholder="비밀번호" />
</div>
<button type="submit" id="button">로그인</button>
</form>
</div>
</div>
</body>
</html>
64 changes: 64 additions & 0 deletions 임예솔/as_2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
body {
background-color: #585858;
display: flex;
position: relative;
justify-content: center;
align-items: center;
}

.login {
width: 400px;
height: 500px;
background-color: #585858;
justify-content: center;
text-align: center;
margin-top: 100px;
border: 1px solid white;
}

.logo {
width: 400px;
height: 180px;
}

.check {
margin-left: 10px;
}
.form {
color: white;
}
.pilsu {
color: #03c75a;
margin-right: 3px;
}

.form {
text-align: left;
}

.text {
color: white;
border: 1px solid white;
border-radius: 5px;
padding: 8px 6px;
margin: 4px 10px;
font-size: 80%;
}

label {
font-weight: bold;
}

#button {
width: 350px;
height: 45px;
background-color: #999999;
color: black;
border-radius: 5px;
border: none;
margin: 40px auto;
}

.yakgwan {
margin-top: 8px;
}
65 changes: 65 additions & 0 deletions 임예솔/as_2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>과제 2</title>
<link rel="stylesheet" href="as_2.css" />
<script>
function check() {
var ch1 = document.getElementById("ch1").checked;
var ch2= document.getElementById("ch2").checked;
var success = document.getElementById("button");
// getElementById() 메서드를 사용하여 각 id 요소를 찾아 반환
// 체크박스는 값이 아닌 선택여부를 확인하는 방식으로 checked 속성을 사용하여 확인(true/false)

if (ch1 && ch2) { // check1,2가 체크 되어있을 때
button.style.backgroundColor = "#03c75a"; // 버튼 배경을 초록색으로
button.style.color= "white"; // 버튼 폰트를 하양색으로
button.disabled = false; // 버튼 활성화
}
else { // 체크되어있지 않을 때
button.style.backgroundColor = ""; // 버튼 배경을 그대로
button.disabled = true; // 버튼 비활성화
}
// disabled: 사용자가 해동 요소를 사용할 수 없도록 비활성화
// true = 비활성화 / false = 활성화
}
function login() { // 로그인 버튼을 누르면
window.location.href = "success.html"; // 성공페이지로 이동한다
}

</script>
</head>
<body>
<div>
<div class="login">
<img src="./img/logo.jpeg" alt="logo" class="logo" />
<form onsubmit="login()">
<div class="form">
<div class="yakgwan">
<input type="checkbox" class="check" id="ch1" onchange="check()">
<label for="check1"><span class="pilsu">[필수]</span> 가입약관</label>
<div class="text">
GDG서비스를 이용하시거나 서비스 회원으로 가입하실 경우 여러
분은 본 약관 및 관련 운영 정책을 확인하거나 동의하게 되므로, 잠시 시간을 내시어 주의 깊게 살펴봐 주시기 바랍니다.
</div>
</div>
<div class="yakgwan">
<input type="checkbox" class="check" id="ch2" onchange="check()">
<label for="check2"><span class="pilsu">[필수]</span>가입약관</label>

<div class="text">
실명 인증된 아이디로 가입,위치 기반 서비스 이용약관, 이벤트 혜택 정보 수신 동의를 포함합니다.
</div>

</div>
</div>

<button type="button" id="button" onclick="login()" disabled>
로그인
</button>
</form>
</div>
</body>
</html>
118 changes: 118 additions & 0 deletions 임예솔/as_3.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
body {
background-color: #585858;
display: flex;
position: relative;
justify-content: center;
align-items: center;
margin: 0;
overflow: hidden;
}

#login {
width: 400px;
height: 600px;
background-color: white;
position: fixed; /* 화면 중앙 고정을 위해 fixed로 변경 */
top: 55%; /* 화면의 세로 중앙 */
left: 50%; /* 화면의 가로 중앙 */
transform: translate(-50%, -50%); /* 가운데 정렬을 위한 transform 설정 */
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
border: 1px solid white;
z-index: 1000; /* 레이어를 최상위로 설정 */
overflow: hidden;
}

/* 전체 화면에 겹쳐서 표시될 배경 */
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none; /* 기본적으로 숨김 처리 */
z-index: 500; /* 로그인 모달 뒤에 표시되도록 설정 */
}

.logo {
width: 400px;
height: 150px;
}

hr {
color: #585858;
}

input {
width: 100%;
border: none;
}

.button1 {
width: 180px;
height: 35px;
background-color: #03c75a;
border-radius: 5px;
border: 1px solid #03c75a;
color: white;
}

#button2 {
width: 100px;
height: 35px;
background-color: #f51d1d;
border-radius: 5px;
border: 1px solid #f51d1d;
margin: 10px 5px 20px 5px;
color: white;
}

#join {
text-align: right;
display: flex;
flex-direction: column;
color: white;
}

h6 {
margin-right: 40px;
}

#join_hr {
width: 100vw;
}

.text {
border: 2px solid #e1e1e1;
width: 300px;
height: 35px;
border-radius: 5px;
display: flex;
align-items: center;
margin-top: 4px;
}

.tt {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}

#warning {
color: red;
font-size: 13px;
text-align: left;
display: none;
width: 300px;
height: 100px;
margin: 30px auto;
overflow-y: auto;
max-height: 50px;
}

#warning span {
display: inline-block;
}
Loading