GDG-on-Campus-SKHU · Profitah · Oct 6, 2023
diff --git a/과제/~$ᅮ차 과제.docx b/과제/~$ᅮ차 과제.docx
diff --git a/이윤아/gdsc_logo1.png b/이윤아/gdsc_logo1.png
diff --git a/이윤아/gdsc_logo2.png b/이윤아/gdsc_logo2.png
diff --git a/이윤아/success.html b/이윤아/success.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+        p {
+            font-size: 32px;
+            font-weight: bold;
+        }
+    </style>
+  </head>
+  <body>
+    <p>success!</p>
+  </body>
+</html>
diff --git a/이윤아/success2.html b/이윤아/success2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="task5.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
+    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</head>
+<body>
+    <nav class="navbar navbar-light bg-light">
+        <div class="container-fluid">
+          <span class="navbar-brand">Navbar</span>
+          <button class="navbar-toggler" type="button">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+        </div>
+      </nav>
+      <ul class="list-group">
+        <li class="list-group-item">An item</li>
+        <li class="list-group-item">A second item</li>
+        <li class="list-group-item">A third item</li>
+        <li class="list-group-item">A fourth item</li>
+        <li class="list-group-item">And a fifth one</li>
+      </ul>
+      <div class="main-bg">
+        <h4>셔츠 팝니다.</h4>
+        <button id="login" class="btn btn-danger" disabled>성공</button>
+      </div>
+</body>
+
diff --git a/이윤아/task1.css b/이윤아/task1.css
@@ -0,0 +1,80 @@
+header {
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    align-items: center; 
+    height: 6.25em;
+}
+
+#logo1 {
+    margin: 0;
+    padding: 0 auto;
+    width: 25em;
+    height: 18.75em;
+    margin-right: 31.25em;
+    position: relative;
+    right: 8.13em;
+
+}
+
+content{
+    font-size: 3em;
+    height: 70%;
+}
+
+p{
+    margin-bottom: 0.31em;
+    margin-top: 0;
+}
+*{
+    text-align: center;
+}
+
+#login_div1{
+    height: 250px;
+    background-color: lightgrey;
+    border-radius: 6px;
+}
+
+.submit-btn{
+    border: 1px solid black;
+    width: 26em;
+    height: 30px;
+    background-color: #03c75a;
+    color: white;
+    border-radius: 5px;
+}
+
+.input-container {
+    position: relative;
+  }
+
+  .text-field {
+    text-align: left;
+    width: 24em;
+    padding-left: 30px;
+    border: 1px solid black;
+ }
+
+
+.icon {
+    position: absolute;
+    left: 29px;
+    top: 50%; 
+    transform: translateY(40%);
+    font-size: 3px !important;
+}
+
+input[type="text"]{
+    margin-top: 20px;
+
+
+}
+input[type="password"]{
+position:relative;
+
+}
+
+#logo2{
+    width: 5em;
+}
diff --git a/이윤아/task1.html b/이윤아/task1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="./task1.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+</head>
+<body>
+    <header>
+        <img src="gdsc_logo1.png" alt="이미지" id="logo1">
+    </header>
+    <content>
+        <img src="gdsc_logo2.png" alt="이미지"  id="logo2">
+        <div id="login_div1">
+            <form id="login_form"> 
+                <div class="input-container">
+                    <input type="text" name="id" class="text-field" placeholder="아이디" id="id"> 
+                    <i class="fa fa-user icon"></i>
+                </div>
+                <div class="input-container">
+                    <input type="password" name="password" class="text-field" placeholder="비밀번호" id="pw">
+                    <i class="fa fa-lock icon"></i>
+                </div>
+                <input type="submit" value="로그인" class="submit-btn">
+            </form>
+        </div>
+    </content>
+    <footer>
+    </footer>
+    <script src="./task1.js"></script>
+</body>
+</html>
diff --git a/이윤아/task1.js b/이윤아/task1.js
@@ -0,0 +1,41 @@
+$(document).ready(function () {
+
+    // 컨테이너 폭을 400px로 설정하고 중앙 정렬
+    $('#login_div1').css({
+        'width': '400px',
+        'margin': '0 auto',
+    });
+
+    // Input 태그의 border-radius를 5px로 지정
+    $('input[type="text"], input[type="password"]').css('border-radius', '5px');
+
+    $('input[type="text"], input[type="password"]').focus(function () {
+        // 포커스 받으면 테두리 색상 #03c75a로 변경
+        $(this).css("border-color", "#03c75a");
+        $(this).css("outline", "none"); // 브라우저 기본 outline 제거
+    });
+
+    // 포커스 해제 시 테두리 색상 초기화
+    $('input[type="text"], input[type="password"]').blur(function () {
+        $(this).css("border-color", "black");
+    });
+
+    $(document).ready(function () {
+        $('#login_form').submit(function (e) {
+            e.preventDefault();
+
+            var id = $('#id').val();
+            var password = $('#pw').val();
+
+            // 아이디와 비밀번호 유효성 검사
+            if (id === '') {
+                alert('아이디를 입력하세요.');
+            } else if (password === '') {
+                alert('비밀번호를 입력하세요.');
+            } else {
+                // 로그인 성공 시 success.html로 이동
+                window.location.href = 'success.html';
+            }
+        });
+    });
+});
diff --git a/이윤아/task2.css b/이윤아/task2.css
@@ -0,0 +1,83 @@
+
+img {
+    width: 400px;
+    position: relative;
+    right: 8em;
+    bottom: 60px
+}
+
+
+#sign_terms{
+    background-color: #464646;
+    height: 35em;
+}
+
+#checkbox01, #checkbox02 {
+    border: 1px solid white; 
+    padding: 20px; 
+    margin-bottom: 20px;
+
+}
+
+
+
+.accent1 {
+    position: relative;
+    color: #03c75a;
+    margin-left: 20px;
+    bottom: 90px;
+
+}
+.accent2{
+    position: relative;
+    color: #03c75a;
+    bottom: 70px;
+    left: 20px;
+
+}
+
+.submit-btn {
+    color: white;
+    padding: 10px 20px; 
+    border: none; 
+    margin-left: 40px;
+    width: 30em;
+}
+
+p{
+    border: 1px solid lightgrey;
+    width: 400px;
+    color: grey;
+    padding: 2px;
+    margin: 2px;
+    transform: translateY(-140%)  !important;
+    margin-left: 20px  !important;
+
+}
+
+ .no_accent2{
+    position: relative;
+    color: white;
+    bottom: 70px;
+    left: 20px;
+
+
+}
+
+.no_accent1{
+    position: relative;
+    bottom: 5.6em;
+    left: 10px;
+    color: white;
+}
+
+input[type="checkbox"]{
+    transform: translateY(-666%);
+
+
+}
+
+#checkbox2{
+    position: relative;
+   top: 20px;
+}
diff --git a/이윤아/task2.html b/이윤아/task2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="./task2.css">
+</head>
+<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+
+<body>
+    <div class="container" id="sign_terms">
+        <img src="gdsc_logo1.png">
+        <div class="checkbox01">
+            <input type="checkbox" class="num1" id="checkbox1"><span class="accent1">[필수]</span><span class="no_accent1">가입약관</span>
+            <p>G서비스를 이용하시거나 서비스 회원으로 가입하실 경우 여러분은 본 약관 및 관련 운영 정책을 확인하거나 동의하게 되므로, 잠시 시간을 내시어 주의 깊게 살펴봐 주시기 바랍니다.</p>
+        </div>
+        <div class="checkbox02">
+            <input type="checkbox" class="num2" id="checkbox2"><span class="accent2">[필수]</span><span class="no_accent2"> 개인정보 수집</span>
+            <p>실명 인증 된 아이디로 가입, 위치기반서비스 이용약관, 이벤트,혜택 정보 수신 동의를 포함합니다.</p>
+        </div>
+        <input type="submit" value="로그인" class="submit-btn" disabled>
+    </div>
+    <script src="./task2.js"></script>
+
+</body>
+</html>
diff --git a/이윤아/task2.js b/이윤아/task2.js
@@ -0,0 +1,23 @@
+$(document).ready(function () {
+    // 컨테이너 폭을 500px로 설정하고 중앙 정렬
+    $('#sign_terms').css({
+        'width': '500px',
+        'margin': '0 auto',
+    });
+
+    // Checkbox 모두 체크 시 로그인 버튼 활성화
+    $('.num1, .num2').change(function () {
+        if ($('.num1:checked').length > 0 && $('.num2:checked').length > 0) {
+            $('.submit-btn').prop('disabled', false).css('background-color', '#03c75a');
+            $('.submit-btn').css('cursor', 'pointer');
+        } else {
+            $('.submit-btn').prop('disabled', true).css('background-color', 'rgba(121, 121, 121, 0.85)');
+            $('.submit-btn').css('cursor', 'default');
+        }
+    });
+
+    // 버튼 클릭 시 success.html로 이동
+    $('.submit-btn').click(function () {
+        window.location.href = 'success.html';
+    });
+});
diff --git a/이윤아/task3.css b/이윤아/task3.css
@@ -0,0 +1,37 @@
+img {
+    width: 400px;
+    position: relative;
+    right: 8em;
+    bottom: 60px
+}
+
+.task3-error {
+    color: red; 
+    font-size: 12px;
+}
+
+#task3-btn{
+    border: none;
+    width: 26em;
+    height: 30px;
+    background-color: #03c75a;
+    color: white;
+    border-radius: 5px;
+    margin-top: 20px;
+}
+
+
+.task3-input input[type="text"],
+.task3-input input[type="password"] {
+    width: 100%;
+    border: 1px solid gray; 
+    border-radius: 5px;
+    padding-left: 30px; }
+
+
+i{
+        position: relative;
+        left: 10px;
+        transform: translateY(180%) !important;
+        font-size: 5px !important;
+    }