기록

*73일차 - ncs테스트 (UI 구현) 본문

학원/강의

*73일차 - ncs테스트 (UI 구현)

pringspring 2022. 5. 11. 14:46

@서술형

    1. html5의 DOCTYPE과 head,body의 기본 문서구조를 기술
    2. HTML의 영역을 구분하는 태그 중 div 태그와 span 태그의 차이점을 서술
    3. 전역객체(Window)의 NaN 속성에 대해 서술
    4. 자바스크립트에서의 배열 선언과 초기화시에 사용되는 방식의 구문을 2가지 이상 기술
    5. 자바스크립트의 scope 중 block scope와 functional scope의 차이에 대해 서술
    6. 인자로 전달받은 문자열을 자바스크립트 코드로 변환하여 실행하는 전역함수의 명칭과 사용법에 대해 기술
    7. 매개변수로 전달받은 문자열과 일치하는 class속성을 가진 요소를 찾아 Element 객체를 반환하는 document객체의 메서드명을 서술하고 class속성이 'testClass' 인 Element 객체를 'e'라는 변수에 할당하는 코드를 작성
    8. window 객체의 onload 속성에 대해 서술

 

@포트폴리오

<!DOCTYPE html>
<html>
<head><title>0209test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <style>
        #input { /*이메일 이외 나머지*/
            width: 200px;
            height: 40px;
            border-top: none;
            border-left: none;
            border-right: none;
            border-bottom: 2px dashed black;
            background-color: lightgray;
        }
        #input2 { /*이메일*/
            width: 92px;
            height: 40px;
            border-top: none;
            border-left: none;
            border-right: none;
            border-bottom: 2px dashed black;
            background-color: lightgray;
        }
        form {
            background-color: lightgray;
        }
        button {
            background-color: seagreen;
            border: none;
            color: black;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 20px 140px;
            cursor: pointer;
        }
    </style>
    <script>
    function checkFilled(obj) {
      //아이디 - 만약 해당 태그 객체에 값이 입력되지 않으면
      if(obj.value == "") {
        document.getElementById("confirm").innerHTML = "<div style='color:red'>" + "필수 입력 항목입니다." + "</div>";
      } else {
          document.getElementById("confirm").innerHTML="";
      }
    }
    function checkFilled1(obj) {
      //비밀번호 - 만약 해당 태그 객체에 값이 입력되지 않으면
      if(obj.value == "") {
        document.getElementById("confirm1").innerHTML = "<span style='color:red'>" + "필수 입력 항목입니다." + "</span>";
      } else {
        document.getElementById("confirm1").innerHTML = "";
      }
    }
    function checkFilled2(obj) {
      //비밀번호 확인 - 만약 해당 태그 객체에 값이 입력되지 않으면
      if(obj.value == "") {
        document.getElementById("confirm2").innerHTML = "<span style='color:red'>" + "필수 입력 항목입니다." + "</span>";
      } else {
        document.getElementById("confirm2").innerHTML="";
      }
    }
    function checkpwd() { 
      //비밀번호 input창 클릭시 실행
      document.getElementById("confirm1").innerHTML = "<span style='color:red'>" + "영문자 대/소문자 특수문자, 숫자 포함 8~32자" + "</span>";
    }
    </script>
</head>
<body>
    <div class="container" style="margin-top:100px">
        <div class="row"> 
            <div class="card shadow">              
                <form>
                    &nbsp; 아이디 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                    <input type="text" name="mid" id="input" onblur="checkFilled(this)">
                    <br>
                    <div id = "confirm"></div>
                    &nbsp; 패스워드 &nbsp; &nbsp; &nbsp; &nbsp;   
                    <input type="password" name="mid" id="input" onclick="checkpwd()" onblur="checkFilled1(this)">
                    <br>
                    <div id = "confirm1"></div>
                    &nbsp; 패스워드 확인 
                    <input type="password" name="mid" id="input" onblur="checkFilled2(this)">
                    <br>
                    <div id = "confirm2"></div>
                    &nbsp; 이메일 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
                    <input type="text" name="mid" id="input2">@<input type="text" name="mid" id="input2">
                    <br>
                    &nbsp; 주소 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                    <input type="text" name="mid" id="input">
                    <br>
                    <button type="submit" class="btn">가입</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

'학원 > 강의' 카테고리의 다른 글

*74일차 (2)  (0) 2022.05.12
*74일차  (0) 2022.05.12
*72일차 (server 시작)  (0) 2022.05.10
*71일차 (git)  (0) 2022.05.09
*67일차 (jQuery)  (0) 2022.05.02
'학원/강의' Related Articles more