목록개발 공부 (85)

열정 실천

[JavaScript] 이벤트 객체

이벤트의 함수는 매개변수를 통해 이벤트 정보를 가져올 수 있다. button.addEventListenter('click', (event) => { console.log(event); }); ✔ 이벤트 객체는 이벤트가 발생한 요소와 참조 정보, 입력된 키 등의 정보를 포함한다. ✔ 발생한 요소는 target 속성을 이용해 확인할 수 있다. ✔ 보통 이벤트객체매개변수는 [event] 혹은 [e]라고 많이 쓴다. --수정중---
개발 공부/JS 2023. 5. 12. 01:10
[JavaScript] 이벤트!!!! - 이벤트 리스너 등록, 이벤트 리스너 삭제

이벤트 웹 내에서 일어나는 사건을 뜻한다. (클릭, 키보드 등) 각각의 이벤트들은 이벤트가 실행되면 실행될 코드 블록인 이벤트 핸들러를 가진다. event handler register : 이벤트가 발생하면 어떤 함수를 호출할지 등록해놓는 것 📌 이벤트 핸들러 등록에는 두 가지 방법이 있다. 1. 타겟.on이벤트명 = 이벤트핸들러함수 2. 타겟.addEventListner = ('이벤트명', 이벤트핸들러함수); 예시) 1. button.onclick = handleClick 2. button.addEventListner = ("click", handleClick); 보통 2번 방법을 많이 사용하기 때문에 2번으로 공부해보자! 일반적인 사용 방법은 다음과 같다. const button = document...
개발 공부/JS 2023. 5. 11. 22:38
[JavaScript] DOM이 뭔가요? ----- getElementById(), getElementByClassName(), getElementByTagName(), querySelector(), querySelectorAll()

DOM : Document Object Model 브라우저에서 자바스크립트가 html 요소를 제어할 수 있도록 제공하는 API이다. (API에 관한 설명은 아래에_) JavaScript는 html 요소를 추가하거나 변경과 같은 조작을 위해 만들어진 언어이다. 이러한 html파일을 javascript로 어떻게 제어할 수 있을까? 모든 브라우저에는 웹문서를 해석(parding)하는 웹 렌더링 엔진이 있다. 이 렌더링 엔진은 html 코드를 해석하여 모든 요소를 객체화하여 자바스크립트가 접근할 수 있게끔한다. 이렇게 문서를 객체화하였다하여 Document Object Model(문서 객체 모델)이라고 부른다. 이 DOM은 트리 형태로 되어있고 각각의 요소를 노드라고 부른다. 우리는 원하는 노드에 접근하여 변경..
개발 공부/JS 2023. 5. 11. 15:00
[JavaScript] JS 완전 기초 문법 한 방에 끝내기!!

📢 변수 선언 상수 const a = 1; 변수 let b = 2; 📢 데이터 타입 자바에서는 숫자면 int, double, long 다 타입을 지정해줘야하는데 여기서 변수는 다 let으로 지정 1. 숫자 2. string 3. boolean 4. null 5. undefined null은 개발자가 없다고 고의적으로 설정하는 값, undefined는 개발자가 설정하지 않았기 때문에 없는 값 var num = 10; var st = "Hello"; var bool = true; var n = null; var unde; 📢 배열 const arr = [1,2,3,"hi",false, null]; console.log(arr); console.log(arr[3]) //4번째 요소만 출력 arr.push("n..
개발 공부/JS 2023. 5. 9. 14:45
[CSS 009] FLEX 사용법 (여러가지 속성과 속성 값 모음)

가로 배치를 손쉽게 하기 위한 방법으로 Flex (Flexible Box, Flexbox)가 있다. float나 inline-block 을 이용했던 기존 방식보다 훨씬 편리하게 레이아웃을 배치할 수 있다. display: flex; 를 부모 요소에 선언하면 그 안에 있던 자식 요소들은 모두 flex 컨테이너의 item이 된다. 이 flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼만 차지하게 된다. 마치 inline 요소로 바뀌는 것과 같다 height는 컨테이너의 높이만큼 늘어난다. Flex container는 여러가지 속성이 있다. justify-content , align-items, flex-direction , flex-wrap , align-content, flex..
개발 공부/CSS 2023. 4. 6. 19:41
[HTML 005] VSCode HTML 단축키 모음 💥

html 기본틀 ! + enter/ tap 코드 정렬 alt + shift + f 한줄 주석 ctrl + / 여러 줄 주석 alt + shift + a 다중 선택 alt 누른 상태로 선택 해당 커서가 있는 행 삭제 ctrl + shift + k 해당 커서가 있는 행 복사 & 붙여넣기 alt + shift + 방향키 일치하는 텍스트 찾기 ctrl + f 왼쪽 탐색기 창 on/off ctrl + b 해당 커서 행 전체 이동 alf + 위/아래 방향키
개발 공부/HTML 2023. 3. 27. 23:29
이전 Prev 1 ··· 3 4 5 6 7 8 9 ··· 15 Next 다음