영어강사 개발일기

앞에서 DOM에 대해 알아봤으니 이제 DOM이 어떻게 작동하는지 이야기 해보자코드는 작성하겠지만 예제가 많은 관계로 동작이 궁금하신 분들은 코드복사하여 직접 실행 해보시길 권장 드린다. ✅ 예제 1: 버튼 클릭 시 텍스트 바꾸기p id="desc">기존 텍스트p>button onclick="changeText()">텍스트 변경button>script> function changeText() { const p = document.getElementById("desc"); p.textContent = "변경된 텍스트!"; }script> p 태그는 id ="desc" 로지정 button>button> : 버튼 생성button onclick="changeText()"> : 버..

DOM은 자바스크립트를 본격적으로 웹개발에 사용할 때 꼭 이해 해야할 개념이다. 1.0 ❓ DOM이 왜 필요할까?HTML은 정적인 구조 이지만 웹 브라우저에서 자바스크립트를 사용 시 페이지를 동적으로 조작이 가능 웹페이지에 있는 텍스트를 바꾸고,이미지를 교체하거나,버튼을 누르면 뭔가 실행되게 만들고,입력 폼 값을 확인하고,페이지 요소를 숨기거나 나타냄이런 식의 웹페이지 조작이 자바스크립트의 핵심 사용처.비유HTML: TVDOM: 리모컨자바스크립트: 리모컨을 조작 하는 손 1.1 DOM (Documetn Object Model) 이란?HTML 문서를 브라우저가 읽고 구조화한 트리 형태의 객체 모델로 변환한 것. Document: 웹 페이지 하나를 의미Object: 각각의 태그가 객체로 변환됨Model: 문..

국비 AI 교육과정중 이제 마지막 파트인 HTML 수업을 시작 하였다.수업 초반부터 계속 DOM 이란 걸 이야기 하시기에 도대체 DOM 이라는 것은 무엇인지 알아보려고 한다 또한 해당 부분에 대해 자세하게 알아보고자 다른 카테고리로 만들었다. 이번파트는 따로 준비 하다보니 목차를 먼저 준비 해 보았다. 파트Section1️⃣DOM이란? (개념, 구조, 필요성)2️⃣DOM 요소 선택하기 (getElementById, querySelector 등)3️⃣요소의 내용/속성 변경하기 (textContent, innerHTML, setAttribute 등)4️⃣스타일 변경하기 (style, classList)5️⃣DOM 노드 탐색 (부모, 자식, 형제 노드 접근)6️⃣요소 생성/추가/삭제하기 (createEle..

4.0 자료형 이란?자바스크립트에서 사용할 수 있는 데이터의 종류를 의미다양한 데이터 타입을 지원하며, 크게 두 가지 종류로 구분기본 자료형 :값 자체를 저장하는 자료형변수에 값이 직접 저장되고 불변(immutable)문자(string), 숫자(number), 논리(boolean), undefined, null, symbol 자료형참조 자료형 :변수에 직접 값이 저장되는 것이 아닌 값이 저장된 참조(주소)를 저장객체(object) 4.1 문자열(string)"큰따옴표"나 '작은따옴표', 또는 **ES6의 백틱(``)**으로 감싸서 표현하는 형태를 의미⚠️ 주의문자열의 시작과 끝을 동일한 따옴표로 감싸야 합니다.예: "문자열", '문자열', `문자열`시작과 끝에 다른 따옴표를 사용시 오류 발생 let st..

3.0. 변수와 상수프로그래밍 언어를 공부할 때 가장 먼저 배워야 할 부분은 데이터 처리프로그램은 데이터를 입력받고, 처리하고, 출력하는 구조로 이루어져 있기 때문에데이터를 어떻게 저장하고 다루는지 이해하는 것이 매우 중요이때 데이터를 저장할 공간이 필요그 공간을 바로 변수(variable) 와 상수(constant) 라고 한다..이번 포스팅에서는 변수와 상수의 개념과 차이점, 사용하는 방법에 대해 알아보도록 하자.3.1. 변수변수는 변하는 수를 뜻함값이 변하는 데이터를 저장 하고 관리 하기 위한 공간인 변수를 생성3.1.1. 키워드자바 스크립트 프로그래밍 언어에서 역할이나 기능이 정해진 특별한 단어 혹은 예약어 키워드역할/설명키워드역할/설명키워드역할/설명async비동기 함수 선언awaitasync 함수..

2.0. 시작하기 전에...자바스크립트를 본격적으로 배우고 코드를 작성하기 전에, 먼저 자바스크립트 코드를 작성하는 기본 방법과 실행하는 여러 가지 방법에 대해 알아보았다.하지만 프로그래밍을 시작할 때에는 코드 작성법이나 실행법 외에도 꼭 숙지해야 할 몇 가지 중요한 개념과 준비 사항들이 있다.이 부분을 미리 알고 준비하면 앞으로의 학습과 실습이 훨씬 더 수월해질 것이라 생각된다.이번 장에서는 프로그래밍 전 반드시 알아두면 좋은 기본 개념과 주의 사항에 대해 살펴보자. 2.1. 주석프로그래밍 언어마다 주석을 작성하는 방법이 다르다.주석은 코드에 설명이나 메모를 남길 때 사용하며, 프로그램 실행에는 영향 없음HTML: Python: 한 줄 주석은 #, 여러 줄 주석은 ''' 내용 ''' 또는 """ 내용 ..

1.0. 코드 작성 방법웹 브라우저에 표시할 HTML 문서에 자바스크립트 적용시 HTML 문서와 자바스크립트 파일을 연결해야 함웹상에서 단순히 자바스크립트 코드를 실행 한다면, console 창이나 editor를 사용 가능 1.1. HTML 파일과 자바스크립트 연결하기HTML 과 자바 스크립트를 연결 하는 두가지 방법:1.1.1. 내부 스크립트 방법HTML 파일에서 태그의 콘텐츠 영역에 자바 스크립트를 작성 하는 방식1.1.2. 외부 스크립트 방법Js확장자로 된 파일을 별도 생성생성한 파일에 자바스크립트 코드를 작성 후 문서로 연결1.1.3. Script 태그 사용 위치Script 태그는 항상 body 태그의 종료전에 사용 내부 외부 스크립트 방식이 모두 동일 1.2. 자바스크립트 코드 실행하기 웹 상..

13.0. 글로벌 속성이란?모든 HTML 요소에서 공통적으로 사용할 수 있는 속성들, , , , 등 거의 모든 태그에 적용이 가능 속성명설명예시 값valueid요소의 고유 식별자id="header"문자열 (고유해야 함)class스타일/자바스크립트용 클래스 이름 지정class="main box"공백으로 구분된 문자열 목록style인라인 스타일 직접 적용style="color:red;"CSS 선언문title마우스를 올리면 툴팁으로 표시되는 설명title="안내문"문자열lang해당 요소의 언어 설정lang="ko"ISO 언어 코드 (예: "ko", "en")dir텍스트 읽는 방향 지정dir="rtl""ltr", "rtl", "auto"hidden요소를 화면에 보이지 않게 함 (숨김 처리)hidden없음 (b..

12.0. 시맨틱 웹이란?웹 문서의 구조를 사람뿐 아니라 기계(검색 엔진, 보조기기 등)도 이해할 수 있도록 만드는 구조화된 웹HTML5부터는 웹 페이지의 의미를 명확하게 전달하기 위해 다양한 시맨틱 태그(Semantic Tag)들이 추가✔️ 예전에는 만 사용해 구역을 나눴지만,이제는 , , , , , , ****처럼 의미를 담은 태그를 사용해 더 직관적인 구조를 만들 수 있습니다. 시맨틱(Semantic)의 뜻?시맨틱(Semantic)은 "의미론적인", 즉 "의미가 있는" 이라는 뜻웹 문서에서 **시맨틱 태그(Semantic Tag)**란, 태그 이름 자체에 의미가 담긴 태그❓ 그럼 기존 태그는 의미가 없었을까?기존 HTML에서는 , 과 같은 의미 없는 태그만으로 레이아웃을 만들었기 때문에,문서 구조를..

11.0. 멀티미디어 설정하기웹상에서 가장 많이 보는 컨텐츠는 오디오와 비디오다. HTML 5 전까지는 웹브라우저에서 구현하기 가장 복잡한 구조였으나, HTML 5 에서는 태그가 추가되어 보다 쉽게 구현이 가능11.1. auido & vidio 태그11.1.1.문법 형식 audio src="오디오파일 경로" controls>audio> video src="비디오파일 경로" control>video>audio와 vidio 태그는 항상 src 속성과 함께 사용src에는 삽입하고자 하는 오디오혹은 비디오의 경로 작성 control 패널이 웹브라우저에 노출 되도록 속성 설정DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewp..