국비 지원 개발자 과정

<시험1-UI 디자인서술형(신)>

h태그의 종류와 큰 크기순으로 순서대로 작성

<h1>태그의 크기가 가장 크고 <h6>태그의 크기가 가장 작다

텍스트 노드가 있는 태그를 작성하는 구조

태그 사이에 적는 일반 문자열도 문서 트리 구조에서는 텍스트 노드라는 이름의 노드로 취급

<br>태그

텍스트 안에 줄 바꿈을 생성하는 태그

ul태그에 대해 설명하고 작성방법

순서가 없는 HTML 리스트를 정의할 때 사용

<ul> 요소에 속하는 각 아이템은 <li> 요소를 사용하여 나타냄

<ul>
    <li>텍스트1</li>
    <li>텍스트2</li>
</ul>

표를 표현하는 태그가 무엇이고 사용방법

표는 table 태그로 만든다

th로 테이블의 타이틀, tr로 행을 나타내고 td로 각 행에 이어진 열을 나타낸다

<table border="1">
      <tr>
        <th>타이틀1</th>
        <th>타이틀2</th>
      </tr>
      <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
      </tr>
      <tr>
        <td>2행 1열</td>
        <td>2행 2열</td>
      </tr>
</table>

rowspan를 사용하는 태그와 용도를 작성

td태그의 행(row, 가로)을 합칠 때 사용

h1태그와 p태그를 이용해서 그림과 같은 페이지에 출력되도록 작성

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

input태그를 이용해서 그림과 같이 페이지에 출력되도록 작성

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <h2>HTML input</h2>
    <form action="" method="get">
      <input
        type="text"
        id="user_id"
        name="user_id"
        placeholder="아이디입력"
        required
      />
      <br />
      <select name="title" id="title">
        <option value="">제목</option>
      </select>
      <input
        type="search"
        id="search"
        name="search"
        placeholder="검색어입력"
        required
      />
      <br />
      <input type="date" id="date" name="date" required />
    </form>
  </body>
</html>

<시험2-UI 디자인포트폴리오(신)>

<!DOCTYPE html>
<html lang="ko">
  <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>공지사항 작성하기</title>
    <style>
      div{
        border: 1px solid black;
        padding-top: 15px;
        padding-left: 20px;
        margin-top:25px;
      }
      p{
        background-color: white;
        font: 14px black;
        position: absolute;
        top: 2px;
        left: 20px;
      }
      .text{
        font-size: 14px;
      }
      textarea{
        resize: none;
      }
      .btn-submit{
        margin: 20px 120px;
      }
    </style>
  </head>
  <body>
    <div>
      <p >공지사항 작성하기</p>
      <form action="insert.no" method="post">
        <table>
          <tr>
          <td class="text"><b>제목</b></td>
          <td>
            <input type="text" name="title" placeholder="제목을 입력하시오." size="25px" required>
          </td>
        </tr>
        <tr>
          <td class="text"><b>내용</b></td>
          <td>
            <textarea name="content" placeholder="내용을 입력하시오." cols="27px" rows="10px" required></textarea>
          </td>
        </tr>
        <tr>
          <td class="text"><b>첨부파일</b></td>
          <td>
            <input type="file" value="파일 선택" name="uploadFile">
          </td>
        </tr>
      </table>
      <input class="btn-submit" type="submit" value="작성하기"></input>
    </form>
  </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <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>공지사항 테이블</title>
    <style>
      * {
        padding: 2px;
      }
      .header {
        background-color: rgb(253, 153, 117);
        color: white;
      }
      .header.top {
        height: 45px;
      }
      .content {
        background-color: rgb(252, 252, 223);
      }
      .title {
        width: 400px;
      }
      .btn {
        width: 60px;
      }
      .userId {
        width: 100px;
      }
      .date {
        width: 110px;
      }
      .content {
        background-color: lightgoldenrodyellow;
      }
    </style>
  </head>
  <body>
    <table border="1px white">
      <tr class="header top">
        <th>번호</th>
        <th colspan="2">제목</th>
        <th>작성자</th>
        <th>작성일</th>
        <th>조회수</th>
      </tr>
      <tr class="content">
        <td>9</td>
        <td class="title">공지사항 제목 9</td>
        <td class="btn"><input type="button" value="바로가기" /></td>
        <td class="userId">user01</td>
        <td class="date">2021-03-29</td>
        <td>34</td>
      </tr>
      <tr class="content">
        <td>6</td>
        <td>공지사항 제목 6</td>
        <td><input type="button" value="바로가기" /></td>
        <td>answ445</td>
        <td>2021-03-12</td>
        <td>67</td>
      </tr>
      <tr class="content">
        <td>3</td>
        <td>공지사항 제목 3</td>
        <td><input type="button" value="바로가기" /></td>
        <td>testg12</td>
        <td>2021-03-01</td>
        <td>98</td>
      </tr>
      <tr class="content">
        <td>2</td>
        <td>공지사항 제목 2</td>
        <td><input type="button" value="바로가기" /></td>
        <td>palwe3</td>
        <td>2021-01-02</td>
        <td>85</td>
      </tr>
      <tr class="content">
        <td>1</td>
        <td>공지사항 제목 1</td>
        <td><input type="button" value="바로가기" /></td>
        <td>xml23</td>
        <td>2020-12-24</td>
        <td>124</td>
      </tr>
      <tr class="header">
        <th colspan="4">전체공지사항 갯수</th>
        <th colspan="2">5개</th>
      </tr>
    </table>
  </body>
</html>

<변수>

console.log("3"); // 3

/* 
변수
특정 데이터 값을 임시로 저장하는 공간

사용 이유
반복 사용(일괄처리), 자주 사용
반복적인 구문에서 여러 코드에 걸쳐서 사용될 때

변수 선언 방식
ES5 - 호이스팅이슈(기술면접 주요 질문)

let, const(ES6 - ECMAScript2015)
let: 변경될 수 있는 값을 저장할 때
const: 변경되지 않는 값을 저장할 때

변수 작성시 주의사항
1. 숫자로 시작 불가
2. 특수문자 삽입 불가(언더스코어, $)
3. 예약어 사용 불가
4. 대소문자 구분

변수의 유효범위
1. 전역변수 - window
코드블록 밖에서 선언된 변수
해당 코드 전역에서 접근 가능
여러 개의 서로 다른 함수들이 같은 값을 공유해야될 때(중요)
전역변수가 많아지면 전역변수 오염 발생

2. 지역변수 - 코드블록 안에서만 사용
코드블록 안에서 선언된 변수
해당 코드 블록 안에서만 접근 가능
변수 값을 해당 코드 블록안에서만 사용 가능
*/

const 한글 = "10";
console.log(한글); // 10

<호이스팅, 즉시실행함수>

console.log(text); // undefined
text = "hello";
var text;
console.log(text); // hello

/* 
호이스팅(hoisting)
블록안에서 선언된 지역변수가 코드 블록 밖으로 끌어 올려지면서
강제로 전역변수화 되는 현상
*/

const btns = document.querySelectorAll("ul li");
// 즉시 실행 함수 - 함수가 자기자신을 정의하자마자 즉시 자신을 호출함
// 특정 원하는 공간으로 빠져나가지 않게 하기위해서 사용(캡슐화됨)

/* 
괄호가 2개 들어감
첫번째 괄호 - 함수의 선언부 의미
두번째 괄호 - 함수 호출하는 괄호
익명함수 형태인데 호출이 되는 이유 -> 두번째 괄호가 있기 때문에 가능함
*/
for (var j = 0; j < btns.length; j++) {
  ((index) => {
    btns[j].addEventListener(
      "click",
      () => {
        console.log(index);
      } // end of click event
    );
  })(j);
} // end of for

<!DOCTYPE html>
<html lang="ko">
  <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>Document</title>
    <script defer src="./호이스팅.js"></script>
  </head>
  <body>
    <ul>
      <li>button1</li>
      <li>button2</li>
      <li>button3</li>
    </ul>
  </body>
</html>

<프로토타입>

function Person() {}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;
Person.prototype.see = function (pic) {
  console.log(pic);
};

const kim = new Person();
const park = new Person();

console.log(kim.eyes); // 2
kim.see("사진"); // 사진
console.log(park.nose); // 1

/* 
프로토타입 기반 언어
JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불린다
모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미
프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지
이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이다
정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있음
*/

'국비학원 > 수업기록' 카테고리의 다른 글

국비 지원 개발자 과정_Day48 (0)	2023.02.04
국비 지원 개발자 과정_Day47 (1)	2023.02.02
국비 지원 개발자 과정_Day45 (0)	2023.01.31
국비 지원 개발자 과정_Day44 (0)	2023.01.30
국비 지원 개발자 과정_Day43 (1)	2023.01.27

루팽구 일지

국비 지원 개발자 과정_Day46

'국비학원 > 수업기록' 카테고리의 다른 글

댓글

티스토리툴바

국비 지원 개발자 과정_Day46

'국비학원 > 수업기록' 카테고리의 다른 글

관련글

댓글

티스토리툴바