FE

1. 이벤트란 ?웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생이벤트에 반응하여 자바스크립트로 요소 조종 가능! (특정 동작 수행 가능!) 1-1. 이벤트 종류마우스 이벤트 : 마우스 조작과 관련된 이벤트키 이벤트 : 키보드 조작과 관련된 이벤트폼 이벤트 : form 태그 관련 동작에 관련된 이벤트http 메서드와 관련 ⇒ POST, PUT 등에 관련한 동작이외에도 여러 이벤트 존재 1-2. 이벤트 핸들러이벤트 발생 시 처리 담당하는 함수addEventListener 내장함수지정된 이벤트가 발생 → 그 요소에 등록된 이벤트 핸들러 실행함var button = document.getElementById("btn");button.addEventListener("click", function() { ..

1. DOMDOM (Document Object Model) : 문서 객체 모델웹 페이지 (HTML, XML 문서 등) 의 콘텐츠 및 구조, 스타일 요소를 구조화 시켜 표현 → 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 인터페이스 1-1. DOM의 트리 구조 header header 1 section 1 ⇒ 각각의 태그가 자바스크립트의 node 객체로 변환됨! 노드 : HTML DOM에서 정보를 저장하는 계층적 단위노드 트리 : 노드들의 집합 / 노드간 관계를 트리 구조로 나타냄📌 document 객체 : 웹 페이지 자체를 의미⇒ 자바스크립트에서 DOM에 접근..

0. 자바 스크립트 (javascript) 란 ?웹 페이지에 생동감을 불어넣기 위해 브라우저를 대상으로 만들어진 프로그래밍 언어 (스크립트 언어)자바스크립트로 작성한 프로그램을 스크립트(script)라고 부름스크립트 : 컴파일 없이 보통의 문자 형태로 작성 가능, 실행 가능 1. 자바 스크립트 파일을 HTML 파일과 연동하는 방법 body 태그 안에 script 태그 작성! ⇒ (속성 src = “파일명 (경로 포함)”) 1-1. 출력 결과 확인브라우저의 개발자 도구 (mac : cmd+option+i / window : F12) 에서 console 탭에서 확인 가능! 2. 자바 스크립트 기본 문법2-0. 출력 : System.out.println()과 유사console.log(출력하고 싶은 값);..

1. css 란 ?CSS (Cascading Style Sheets)Cascading : “위에서 아래로 흐르는” 이라는 뜻상위 요소의 스타일이 하위 요소에 상속됨동일 요소에 여러 스타일 규칙이 존재하면 ⇒ 우선순위에 따라 적용됨!📌 CSS웹 페이지의 다양한 요소에 스타일을 적용하는 규칙의 집합을 위에서 아래로 흐르듯이 우선순위에 따라 순차적으로 적용하는 시스템 1-1. css 구문과 기본 문법선택자 { 속성: 값;}/* 예시 */p { color: blue; font-size: 16px;}선택자 (Selector) : 스타일 적용할 HTML 요소태그, 클래스, id 등선언 (Declaration) : 선택한 HTML 요소에 적용할 스타일 정의속성: 값 형식 1-2. 선택자1-2-1. ..