1cm

2021. 11. 11   > 자바스크립트 내장객체 : Date 객체   -> 날짜를 관리하는 객체var date = new Date(); // 현재 날짜 시간var date = new Date(‘월 일‘);var date = new Date(‘월 일, 년도‘);var date = new Date(‘월 일, 년도 시간(시:분:초)’); 메소드내용get/setFullYear()년도 반환 / 년도 저장get/setMonth()월 (0:1월 ~ 11:12월)get/setDate()일(1일 ~ 31일)get/setDay()요일(0:일요일 ~ 6:토요일)get/setHours()시간(0~23시)get/setMinutes()분(0~59분)get/setSeconds()초get/setMilliseconds()밀리세컨초..

2021. 11. 10 > 객체 배열 활용 -> 생성된 객체를 배열에 넣어 활용 가능 var 변수 명 = [ ]; // 배열 생성 데이터 대입 : 변수 명.push({속성 명: “값“, 속성 명: “값”, ...}); > 실습 코드와 출력 결과 -> 05_객체.html 객체 배열 객체와 배열을 사용해서 데이터를 관리할 수 있다. 실행 확인 -> 05_객체.js // 객체 배열 let btn5 = window.document.getElementById('btn5'); btn5.addEventListener('click', () => { let area = document.getElementById('area2'); // 배열을 사용하지 않았을 경우 let student1 = {name: '홍길동', jav..

2021. 11. 09 > 실습 코드와 출력 결과 -> 04_함수.html 화살표 함수(Arrow Function) ES6에 도입된 함수 선언 방법으로 function 키워드 대신 => 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. [표현법] - 매개 변수가 없을 때 : () => { ... } - 매개 변수가 하나 일 때 : x => { ... } - 매개 변수가 두 개 이상일 때 : (x, y) => { ... } - 리턴 처리 - 처리할 라인이 여러 개라면 {}로 감싸서 처리해야 한다. (x, y) => { 실행 구문; return x * y; } - 처리할 라인이 하나라면 {}와 return 문을 생략할 수 있다. (x, y) => x * y; * 기존 function과 this가 가..

2021. 11. 08 > 실습 코드와 출력 결과 -> 02_기본문법.html 3. 연산자 "==" 연산자와 "===" 연산자 "=="은 값이 일치하는지를 확인하는 연산자이고 "==="은 값과 자료형이 일치하는지를 확인하는 연산자이다. 연산자 테스트 4. 제어문 for in 문 for in 테스트 -> 02_기본문법.js // 연산자 테스트 function opTest2() { let area = document.getElementById('area5'); area.innerHTML = '"==" 연산자 테스트 '; area.innerHTML += `'7' == 7 : ${'7' == 7} `; area.innerHTML += `'7' == 7 : ${'7' == '7'} `; area.innerHTML..

2021. 11. 05 > 01_개요_실습문제.html -> 전체코드 개요 실습 문제 문제 1. 색상 조절하기 색상 선택 후 변경 버튼을 클릭하면 색상이 변경되도록 만들기 변경 문제 2. 크기 변경하기 버튼에 따라 크기 조절이 가능하도록 만들기 50X50 원본(100X100) 200X200 문제 3. HTML 태그에 접근 텍스트 박스로 입력받은 데이터를 가져와서 출력하기 (단, 구매자는 태그이름, 상품명은 아이디, 구매가격은 name값으로 접근) 구매자 : 상품명 : 가격 : 입력값 출력하기 문제 4. 테이블 만들기 prompt()로 사용자로부터 행과 열의 개수를 입력받아 테이블 만들기 아래의 div 태그에 innerHTML 속성을 사용해서 만들어진 테이블 포함한다. 테이블 생성 -> 01_개요_실습문제..

2021. 11. 04 > 클라이언트 - 서버 구조 -> 프로토콜 : 인터넷상에서의 규약 -> HTTP : 하이퍼텍스트 전송 규약(웹 통신) -> FTP : 대량의 파일을 전송/수신하기 위한 파일 전송 규약 -> TELNET : 원격지에서 서버 컴퓨터를 원격 제어하기 위한 규약 > 클라이언트 주요 언어 -> HTML : 하이퍼텍스트를 구현하기 위한 뼈대가 되는 핵심적인 기술 마크업 언어 -> CSS : HTML은 뼈대라면 CSS는 꾸미기 위한 옷의 기능을 한다. -> 자바스크립트(JavaScript) : 기능, 로컬의 브라우저에서 실행되는 인터프리터 방식(별도로 컴파일 과정 X)의 프로그래밍 언어 -> jQuery : 존 레식(John Resig) 창안, JavaScript 기반 라이브러리 중 하나로 자..

2021. 11. 03 UI디자인 평가 -> 서술형 문제에서는 html, body 태그에 대한 설명과 h태그의 종류, 크기순 작성하는 등 기본적인 html상에서 쓰이는 태그들과 개념들에 대한 문제들을 풀었다. -> 문제해결 시나리오에서는 포트폴리오 문제로 주어진 페이지 예시를 보면서 html, css 태그들을 활용하여 표와 구조들을 작성하여 파일로 만들어 제출하였다.

2021. 11. 02 > transform-origin -> 기존 변형 기준 x, y, z 축이 아닌 특정 지점을 기준으로 변형할 수 있게 하는 속성 선택자{transform-origin: x y z;} > perspective -> 화면에서 원근감을 갖게 하는 속성 * 다른 변형과 적용하려면 먼저 족용되어야 함 선택자{perspective: 숫자(단위);} > transform-style -> 여러가지 변형을 동시에 하는 경우 부모 요소에서 적용한 3D변형을 하위 요소에 적용하는 속성 선택자{transform-style: 속성 값;} -> flat : 하위 요소를 평면으로 처리 -> preserve-3d : 하위 요소들에 3D효과 적용 > backface-visibility -> 회전하여 뒷면이 보일..

2021. 11. 01 > 다단 스타일 -> 다단 스타일 - column-width -> 단의 너비 고정하고 다단 구성 (너비를 기준으로 다단 개수 나눔) -> 다단 스타일 - column-count -> 단의 개수 지정하여 다단 나눔 -> 다단 스타일 - column-gap -> 다단 사이의 여백 설정 -> 다단 스타일 - column-rule -> 다단 사이의 효과를 주는 속성 -> column-rule-color : 색상 값 -> column-rule-style : 다단 사이의 선 효과 지정 (nene, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset) -> column-rule-width : 너비를 지정하는 속성 (숫자(단위..

2021. 10. 29 > 레이아웃 스타일 - 기본 -> height / width -> 컨텐츠(내용)가 차지하고 있는 영역 크기 조절 속성 -> 상대 크기 단위 입력 시 창 크기에 따라 변경, 절대 크기 단위 입력 시 창 크기에 따른 변화 X -> 블록 / 인라인 레벨 요소 -> 블록 레벨 요소 -> 한 줄 전체 차지하는 요소로 박스 모델이라고도 하는데, 한 줄에 여러 요소가 올 수 없는 요소다. (, , , , , , , , , , ) -> 인라인 레벨 요소 -> 한 줄에서 일부분만 차지하는 요소로, 한 줄에 여러 요소가 올 수 있다.(, , , , , , , , , ) -> display -> 화면 배치 방법 변경 속성으로 박스 레벨과 인라인 레벨 요소를 변경 가능하게 해줌 -> none : 화면에..