공부5 4.이벤트(이벤트 핸들러, 이벤트 프로퍼티 등) 이벤트 핸들러 등록하기 .onclick 프로퍼티의 경우 기존에 있던 값들을 덮어쓰는 형태로 동작하기 때문에 오류 발생여지가 있음. const btn = document.querySelector("#mybutton"); function event1() { console.log("event1"); } function event2() { console.log("event2"); } btn.addEventListner('click',event1); btn.addEventListner('click',event2); addEventListner('이벤트타입',이벤트핸들러) 메소드를 통해 버튼을 클릭했을때 event1 과 event2 가 동작하는 것을 확인가능 btn.removeEventListner('이벤트타입',.. 2023. 12. 22. 3. 웹브라우저도 객체이다.(DOM, 노드, JS로 html,css 다루기) DOM(문서 객체 모델) = 웹페이지에 나타나는 html문서 전체를 객체로 표현한 것 document 객체가 웹문서의 최상단 객체로의 진입점 역할을 함. (window 객체는 전역객체로 모든 객체들을 포함하고있음 (전역객체) window.console.log() 가 원래 맞음) DOM tree = html에서 태그의 구조처럼 DOM도 document 객체를 최상위로 해서 window - document - html - head - meta - title - body - h1 - h2 이런식으로 똑같이 계층구조를 이룸 이것을 DOM tree라고 하고, Dom tree 안의 각 객체들을 노드라고 부름. 노드간의 관계에는 부모노드, 자식노드, 형제노드 등의 용어가 있고, 노드의 타입에는 태그를 표현하는 요소노.. 2023. 12. 21. 1. JAVASCRIPT 기초 자바스크립트 명령어들 let : 방만들기 console.log( ? ) : ?값 출력 function : 다양한 명령을 하나로 묶어서 사용할떄 씀. 반복해서 사용할떄 효율적 ex. function example () { console.log(); }; example(); function 함수 만들때 ()안에 파라미터만들수있음 , 파라미터의 기본값 설정 가능(출력시 값할당 안해주면 기본값으로 출력) ex. function examle (x,y) ex. function example (x,y,z=3) return 결과값 변경 , 함수호출 중단, 반환하는거(return 쓰지 않을경우 함수선언으로 undefined가 반환됨.) 기본적인 사칙연산 + - * / 외에 ** 거듭제곱 ex. 2**8 = 2의 8승 (.. 2023. 12. 21. 1. CSS 기초 css 규칙 파일을 따로 만들어서 정리하는게 좋음 파일명.css 파일을 만들어주자 css 규칙 부분에 넣음 css 규칙은 아래와 같이 이루어짐 (선택자는 .클래스 #아이디 태그 다 가능) 선택자 { css 선언 } ex. 예시처럼 하면 모든 h3에 다 적용되니까 색을 넣고 싶은 부분에 이런식으로 아이디를 주고 예시의 h3부분에 #ted를 대신 넣어주면 ted부분에만 들어감 여러개를 선택해서 꾸미고싶으면 class 써주면됨 예시의 h3 부분에 .lth 넣어주면 lth가 붙은 모든곳에 들어감 하나의 태그에 여러가지 선택자를 넣어줄수도 있음 (가운데 띄어쓰면됨) 여러개의 선택자를 하나로 묶어서 사용할수있음 ( , 사용) (id 선택자도 같이 사용가능) (선택자 목록이라고 함) .ted , .ted10722 {.. 2023. 12. 21. 1. HTML 기초 -> html 언어로 이 문서 작성할거다 -> 페이지 전체를 감싸는 태그 사이에 내용 들어감 -> 시작태그 -> 종료태그 페이지 내용(실제로 보임) 제목 (실제로 보이지 않음, head안에 넣음) 한글이 브라우저마다 다르게 보일수 있음, 깨질 수 있기 때문에 직접 인코딩 해주기 (utf-8은 대표적인 한글 호환 인코딩) 기본세팅 내용 큰제목 -> 보이는 가장 큰 제목 2번째로 큰제목 ... h6까지 가능 단락 나눠주기 줄바꿈 기호를 내용으로 넣고싶다면 사용 내용(클릭시 링크로감) 하이퍼링크 이미지 넣는법 1.넣으려는 이미지 주소 복사 후 (src = source 줄임) 2. 다운받은 이미지 불러온 후 (눈에 보이지 않는 공간, 영역 만들기 후에 css로 꾸미기) (눈에 보이지 않는 글 영역 만들기.. 2023. 12. 21. 이전 1 다음
