3. HTML | CSS | Javascript (16) 썸네일형 리스트형 4/14(목) IT K-DT(32일차) / 36.종합(웹페이지 제작) 1. head 부분 2. navbar 부분 3. Home 부분 4. Introduce 부분 5. technic 부분 6. workspace 부분 7. resume 부분 8. contact 부분 9. 미디어쿼리 적용 10. 완성 화면 과제 1. head 부분 HTML CSS 폰트의 지정 @font-face { // 다운로드받은 '청정원고딕R.ttf' 폰트파일을 'cjw'라는 이름을 부여하여 웹페이지에 지정. font-family: 'cjw'; src: url('./청정원고딕R.ttf') format('woff2'); // WOFF2(Web Open Font Format 2) 폰트 파일을 포맷함. font-weight: 700; // 폰트 파일을 포맷함. font-style: normal; } 변수의 지정 .. 4/13(목) IT K-DT(31일차) / 33.async,await~35.fetchAPI 33. async, await 34. JSON(JavaScript Object Notation) 34-1. JSON 정의 34-2. JSON 특징 34-3. JSON 형식 34-4. JSON 유형 34-5. JSON 관련함수 34-6. JSON 교육 전 숙지할 내용 35. fetch API TIP 33. async, await ES7에 추가된 문법. 비동기 처리를 위한 문법 중 하나. 일반적으로 비동기 처리는 callback 함수나 Promise를 사용하지만 async / await는 이를 더욱 간단하게 구현할 수 있도록 도와줌. async 함수와 await 키워드를 사용하여 구현. async 함수 항상 Promise를 반환. Promise를 만들고자 하는 함수(=비동기 처리될 전체 함수) 앞에 asyn.. 4/12(수) IT K-DT(30일차) / 31.프로미스(Promise)~32.옵셔널체이닝(Optional chaining) 31. 프로미스(promise) 31-1. 정의 31-2. 장점 31-3. 상태의 유형 31-4. 메소드(method) 32. 옵셔널 체이닝(Optional Chaining) TIP 31. 프로미스(promise) 31-1. 정의 Javascript 비동기 처리에 사용되는 객체. 비동기적으로 처리되는 작업의 결과를 나중에 처리하기 위해 사용. 주로 서버에서 받아온 data를 화면에 표시할 때 사용. 31-2. 장점 비동기 처리 시점을 명확히 표현할 수 있음. 연속된 비동기 처리 작업을 유연하게 수정, 삭제, 추가하기가 편함. 비동기 처리 작업 시 성공/실패 등의 상태 정보를 갖게 됨. 코드의 유지 보수성이 증가. 31-3. 상태의 유형 매개변수로 사용. Pending: 작업이 아직 완료되지 않은 상태. .. 4/11(화) IT K-DT(29일차) / 24.이벤트~30.예외처리 24. 이벤트(Event) 24-1. 이벤트의 정의 24-2. 이벤트 타입(event type) 24-3. 이벤트 타겟(event target) 24-4. 이벤트 리스너(event listener) 24-5. 이벤트 객체(event object) 24-6. 이벤트 전파(event propagation) 25. 이터레이터(Iterator)와 이터러블(Iterable) 25-1. 이터레이터(Iterator) 25-2. 이터러블(Iterable) 26. 제너레이터(Generator) 27. 스프레드(spread) 연산자 28. 세트(set) 29. 맵(map) 30. 예외처리 예제 24. 이벤트(Event) 24-1. 이벤트의 정의 웹 페이지에서 어떤 일이 발생했음을 알리는 신호 웹 페이지에 사용된 Javas.. 4/10(월) IT K-DT(28일차) / 19.함수작성법~23.Wrapper클래스 19. 함수 작성법 19-1. 함수의 기본 19-2. 매개변수의 기본값 19-3. 콜백 함수 (callback function) 19-4. 원시값과 객체값 20. 객체 활용법 20-1. 객체의 추가 20-2. 객체의 삭제 20-3. 동적으로 속성에 접근 20-4. 객체 생성 함수 만들기 21. 클래스 심화 21-1. static 21-2. private (#) 22. 상속의 활용 23. Wrapper 클래스 23-1. Number 타입 관련 내용 23-2. String 타입 관련 내용 예제 19. 함수 작성법 19-1. 함수의 기본 function sum(num1, num2) { console.log('sum() 호출!'); return num1 + num2 } const result = sum(10, .. 4/7(금) IT K-DT(27일차) / 16-5.Location객체~18.정규표현식 16. 객체(Object)의 종류 16-5. Location 객체 16-6. History 객체 16-7. Navigator 객체 16-8. Document 객체 17. 노드(node) 17-1. 노드의 종류 17-2. 노드의 관계 17-3. 노드의 추가 17-4. 노드의 생성 17-5. 노드의 제거 17-6. 노드의 복제 18. 정규 표현식 TIP 과제 16. 객체(Object)의 종류 16-5. Location 객체 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용. (현재 웹 페이지의 URL을 나타냄.) protocol: 콜론을 포함하는 http, https, ftp 등 프로토콜 정보를 반환. 예) http: hostname: 호스트의 이름과 포트번호를 반환. .. 4/6(목) IT K-DT(26일차) / 11.사용자정의함수~16-4.form객체 11. 사용자 정의 함수 (function) 11-1. 함수 선언식 11-2. 함수 표현식 12. 디폴트 매개변수 12-1. 디폴트 매개변수 12-2. 나머지 매개변수 13. 화살표 함수 13-1. 매개변수가 없을 경우 13-2. 매개변수가 있을 경우 14. 객체(Object)의 생성법 14-1. 리터럴 표기법(Object Literal) 14-2. 생성자 함수를 이용 (Constructor Function) 14-3. 클래스를 이용 (Class) 15. 상속 16. 객체(Object)의 종류 16-1. Math 객체 16-2. String 객체 16-3. Date 객체 16-4. form 객체 16-4-1. 폼 접근하기 16-4-2. id 입력상자에 접근하기 과제 11. 사용자 정의 함수 (functi.. 4/5(수) IT K-DT(25일차) / 8.연산자~10.배열 8. 연산자 (Operator) 8-1. 산술 연산자 8-2. 비교 연산자 8-3. 대입 연산자 8-4. 증감 연산자 8-5. 논리 연산자 8-6. 삼항 연산자 9. 제어문 9-1. 조건문 9-1-1. if 문 9-1-2. if ~ else 문 9-1-3. if ~ else if ~ else 문 9-1-4. switch 문 9-2. 반복문 9-2-1. while 문 9-2-2. do ~ while 문 9-2-3. for 문 9-3. break문 9-4. continue문 10. 배열 (Array) 10-1. 배열(Array) 의 개요 10-2. 배열(Array) 객체의 메소드 10-3. 배열(Array)을 이용한 반복 10-3-1. for in 문 10-3-2. for of 문 10-3-3. forEac.. 이전 1 2 다음
