2019백업
Javascript 엘리먼트 선택방법 (3. Selector API Level1)
querySelector() 함수를 사용한 HTML 엘리먼트 선택방법 Selector API Level1 (Jquery에서 css를 지정할 수 있었는데 이제 HTML5에서 selector API 지원합니다). html 코드 1 2 3 4 5 6 7 8 9 10 11 Ex3 : Selector API Level1 + http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter JS코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 window.addEventListener("load", function() { var section3 = docume..
Javascript 엘리먼트 선택방법 (2. getElementById 개선하기)
getElementById 함수를 사용한 HTML 엘리먼트 선택방법 개선하기 Javascript 엘리먼트 선택방법 (1. getElementById) 에서 보다 명확하게 아이디 값을 읽어온다. html코드 1 2 3 4 5 6 7 8 9 10 Ex2 : 엘리먼트 선택 개선방법 + http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter js코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //Ex2 : 엘리먼트 선택방법 개선하기 window.addEventListener("load", function() { var section2 = doc..
Javascript 엘리먼트 선택방법 (1. getElementById)
getElementById 함수를 사용한 HTML 엘리먼트 선택방법 HTML 코드 1 2 3 4 5 6 7 8 9 10 11 Ex1 : 엘리먼트 선택방법 + http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter 자바스크립트 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 // Ex1: 계산기 프로그램 window.addEventListener("load", function() { var txtX = document.getElementById("txt-x"); var txtY = document.getElementById("txt-y"); v..
자바스크립트 - Object, JSON
자바스크립트 변수 vs 자바 변수 자바스립트는 기본 C나 JAVA와 달리 객체를 생성하고 정의하는 것이 아니라 맨 땅에 Object를 생성하고 뒤에 값들을 붙이는 개념을 가진다. 문제점) 1 2 3 4 5 6 7 8 9 10 11 12 13 //기본 C나 JAVA와 달리 객체를 생성하고 정의하고 쓰는것이 아닌 // 맨 땅에 Object를 생성하고 뒤에 붙이는 개념 var exam = new Object(); exam.kor = 30; exam.eng = 40; exam.Kor = 60; //오류가 나지 않아 자바스크립트의 위험성 //안정성을 추가한 것이 typescript임. // 자유도 react // 웹기반 기존 플랫폼 쓰면서 프론트엔드만 올리겠다 하면 vue console.log(exam.kor +..
자바스크립트- `${}`Template Literals
리터럴(literal) 리터럴은 직접 표현되는 값 그 자체를 의미합니다. var a = 95; var first = 'hooni'; var last = 'tang'; var string = a + 'my name is ' + first + ' ' + last; Template Literal을 이용하면 보기도 좋고 쉽게 작성할 수 있다. var a = 95; var first = 'hooni'; var last = 'tang'; const string = `${a}my name is ${first} ${last}`; 키보드 왼쪽 상단에 1 옆에 `(백틱 기호)가 있다. 이것으로 감싼 후 안에 ${} 로 변수들을 감싸면 문자열이 연결된다. 예제) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1..
자바스크립트 - Array
Array 예제) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Document var nums = new Array(2,3,"hello",7); console.log(nums); http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs 설명) var nums 라는 객체에 new Array(2,3,"hello",7); 배열을 넣어주고 console.log에서 뿌려준다. 실행..
20. 자손 선택자(space) VS 자식 선택자 (>)
자손 선택자 (space) : 특정 요소 자손 모두 선택 자식 선택자 (>) : 특정요소 자식만 선택 제목 적는 부분 안쪽에 있는 p 태그
19. Css 가상 클래스 before, after
ㅁ 나는 제목입니다. 폼 엘리먼트는 before, after을 가질 수 없다. input, form, button ex1) 마요 카레 철판볶음밥 프리미엄 찌개 덮밥 비빔밥 ex2) 홈 전체메뉴 사각도시락 모둠시리즈