728x90 반응형 > 학습단19 [ HTML + CSS + 자바스크립트] 최종 프로젝트 2023. 4. 9. [ HTML + CSS + 자바스크립트] 12.1 ~ 12.7 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 12.1) 문서 객체 모델 이해하기 노드: Dom tree 각각의 구성요소 - 노드 종류 (5) - - 문서노드 - 요소노드 - 속성노드 - 텍스트노드 - 주석노드 12.2) 노드 선택하기 1. 속성으로 노드 선택하기 2. 메소드로 노드 선택하기 header link - 모든 노드 탐색 - 요소 노드 탐색 : 태그를 기반으로 받은 노드만 선택 - childNodes - : 다이렉트 자식만 반환 (후손 X) h1 a : 원하는 요소 노드를 바로 선택할 수 있는 장점 - getElementById() - h1 a - getElementsByClassName()- : class는 id와 다르게 중복해.. 2023. 4. 9. [ HTML + CSS + 자바스크립트] 11.1 ~ 11.4 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 11.1) 객체란 const person = { name: ["Hong Gildong"], // 배열 age: 20, // 숫자 isAdult: true, // 논리 }; : 키와 값으로 구성된 속성의 집합 - 리터럴 방식 - : {}을 이용해 객체 생성하는 것 const person = {}; - 빈 객체 - : 속성이 한 개도 없는 객체 const person = { name: "Hong Gildong" }; - 속성 - : 키와 값으로 구성 name - 키 Honag Gildong - 값 const person = { name: { firstName: "Gildong", lastName: "Hong", }, age: 20, // 숫자 i.. 2023. 4. 9. [ HTML + CSS + 자바스크립트] 10.1 ~ 10.5 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 10.1) 함수란 ／／ ３단 출력 for (let i = 1; i : 어떤 목적을 갖고 작성한 코드를 모아둔 블록문 : 재사용하기 유용 10.2) 함수를 정의하는 방법 1. 함수 선언문 2. 함수 표현식 3. 화살표 함수 function gugudan() { for (let i = 1; i function sum() { let a = 10; // 지역스코프 console.log(`함수 내부: ${a}`); } sum(); console.log(`함수 외부: ${a}`); // 함수 내부: 10 // 함수 외부: 10 1). 내부 - 지역 스코프 : 외부에서 참조하려하면 오류 발생 let a = 10; // 전역스코프 function sum() { cons.. 2023. 4. 9. [ HTML + CSS + 자바스크립트] 9.4 ~ 9.5 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 9.4 ) 조건문 다루기 1. if 2. switch //조건식이 짝수인 지 판단 - 조건식 참이면 중괄호 안 코드 실행 let num = 10; if (num % 2 === 0) { console.log("변수 num에 할당된 숫자는 짝수입니다."); } - if 문 - : if 뒤에 오는 소괄호 조건식이 참이면, 중괄호 안의 코드 실행 let num = 5; if (num % 2 === 0) { console.log("변수 num에 할당된 숫자는 짝수입니다."); } else { console.log("변수 num에 할당된 숫자는 홀수입니다."); } //변수 num에 할당된 숫자는 홀수입니다. 출력된다. - else 문 - : if문 .. 2023. 4. 8. [ HTML + CSS + 자바스크립트] 9.3 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 9.3 ) 연산자 - 이항 산술 연산자 - 단항 산술 연산자 - 단항 부정 연산자 - 이항 산술 연산자 - : 피연산자(숫자) 가 2개 필요한 연산자 -> 이항(2개) 거듭제곱 ** 나머지 구하기 % - 단항 산술 연산자 - : 피연산자(숫자) 가 1개 필요한 연산자 -> 단항 (1개) ++ 값 1 증가 -- 값 1 감소 : = 증감연산자 : 전치 연산 / 후치 연산으로 분류됨 1) 전치연산 : ~ 하기 전에 증감 = 할당하기 전에 1부터 증가시킴 2) 후치연산 : ~한 후에 층감 = 할당한 후에 1을 증가시킴 - 단항 부정 연산자 - : 항상 피연산자 앞 위치 : 음수 -> 양수 : 양수 -> 음수 - 대입 연산자 - : 데이터.. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 8.1 ~ 9.2 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 8.1) 자바스크립트 코드 작성 방법 (내부/외부) - 내부 스크립트 방법 - : script 태그 영역에 자바스크립트 코드 작성 - 외부 스크립트 방법 - script 위치 주의하기: body 태그 사이에 있음 body 태그 끝나기 직전에 위치함 9.1) 변수와 상수 : 변하는 수 데이터를 저장하고 관리하기 위한 공간으로 변수 만듦 ex) var, let : 변하지 않는 수 재할당 안됨 ex) const 9.2) 자료형 자료형 의미: 자바스크립트에서 사용할 수 있는 데이터의 종류 1) 기본 자료형 : 문자, 숫자, 논리,undefined, null, Symbol 자료형 2) 참조 자료형 : 객체(object).. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 7.1 ~ 7.3 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 7.1) 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 : 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 속성 - 플렉스 박스 레이아웃 기본 속성 - DOCTYPE html> Document .container { color: rgb(63, 61, 56); background-color: aquamarine; padding: 1rem; display: flex; } .box { background-color: rgb(238, 141, 14); } .box:nth-child(2n) { background-color: blueviolet; } A B C : flex 또는 inl.. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.7 ~ 6.9 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.7 ) 애니메이션 속성으로 전환 효과 제어하기 DOCTYPE html> 애니메이션 속성으로 전환효과 제어하기 .box { width: 100px; height: 100px; background-color: red; animation-name: beChange; animation-duration: 2s; } @keyframes beChange { 0% { background-color: aqua; } 100% { background-color: beige; } } 애니메이션 속성: 전환효과 속성과 달리 키프레임을 정의해서 실행 : 특정 요소 적용할 키 프레임 이름 지정 .. 2023. 4. 2. 이전 1 2 3 다음 728x90 반응형
