본문 바로가기

전체 글

[JS] DOM & EVENT #6 이벤트 버블링, 이벤트 위임 1. 이벤트 버블링 모든 요소에 클릭 이벤트 발생시 콘솔로그를 찍도록 만들어보자. 아래는 html코드이다. 이런식으로 짰구나만 생각하고 따라오면 된다. 첨부된 css style sheet의 내용은 생략하겠다. ✏️입력 Red ✨결과 li를 클릭해보면 li, ul, div, body순으로 찍힌다. 초록색 네모박스를 클릭하면 자기 자신인 div와 부모요소인 body 모두 console에 남겨진다. ✅알 수 있는 것 자식요소에서 발생한 이벤트는 부모와 그 부모를 통해 전파된다. 하위요소에서 상위요소로 올라가는것. 더 이상 부모요소가 없을 때까지 이 과정은 반복된다. li에서 click 이벤트가 발생하면 부모요소로 전파된다. 이벤트가 거슬러 올라가는 모습이 거품처럼 보인다 해서 이것을 이벤트 버블링(event .. 더보기
[JS] DOM & EVENT #5 이벤트 핸들러(Event Handler) 1. Event Handler 할당하기 클릭 DOM Events HTML DOM Event Object W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com : Event의 속성들이 있다. 어떤 것들이 있는지 살펴보면 좋다. 클릭 클릭2 클릭3 클릭4 위와 같은 코드가 있다고 가정해보자. 클릭, 클릭2, 클릭3, 클릭4를 보면 각자 다른 방식의 button event 코드가 있.. 더보기
[JS] DOM이란? #4 CSS style, class 제어 1. Style제어 HTML BOX Red Green blue 일반적으로는 background-color 라고 적지만 여기에서는 backroundColor라고 명시한다. 만일, 익숙한 방식으로 하고싶다면 대괄호를 써도 된다. ex) box.style["margin-left"] = "30px"; 여러 속성 동시에 적어주는 단축속성도 문자열로 적어주면된다. ex) box.style.border = "10px solid #000" 2. Class제어 //콘솔창 box.className; ' ' box.className = 'bg-red'; 더보기
[JS] DOM이란? #3 노드 생성,추가,복제,삭제 *DOM: 문서 객체 모델(The Document Object Model) 1. 생성하고 추가하는 방법 ul이 있다. document.createElement('li')를 만들어준다. document.createTextNode('pink')도 만들어준다. 그다음 li에 appendChild(pinkText)이용해서 방금 만든 text node를 넣어준다. 그다음에 ul.appendChild(li)넣어주면 마무리된다. * appendChild(): 지정한 부모노드의 가장 마지막 자식으로 추가된다. * insertBefore() : 지정한 부모노드의 그 이전으로 추가된다. //Console const newLi3 = document.createElement('li); undefined cost textNod.. 더보기
[JS] DOM이란? #2 부모, 자식, 형제 Node *DOM: 문서 객체 모델(The Document Object Model) query와 element의 차이점: pList1 = NodeList pList2 = HTML컬렉션 NodeList(4) HTMLCollection(4) : 모두 4개가 나옴 이제태그를 넣어보자. :다시 실행시켜보니 NodeList는 4개, HTML Collection은 5개가 돼있다. :코드를 다시 작성하지 않았지만 HTMLCollection은 node의 변경사항이 자동으로 반영돼있다.반면 NodeList는 한 번 사용했던 값을 계속 사용한다. 부모, 자식, 형제 Node -red에 접근한다고 가정해보자. //Console const red = document.getElementById( 'red'); < undefined 1... 더보기
[JS] DOM이란? #1 Node에 접근하는 방법 *DOM: 문서 객체 모델(The Document Object Model) 웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라 한다. - DOM은 html 문서의 각 요소들을 트리형태로 구조화해 표현하는 문서(데이터)를 생성한다. 개발자는 자바스크립트을 이용해서 일을 생성하거나 수정하거나 삭제할 수 있다. 이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. DOM목적 Q. Html 코드에 써져 있는 데로 결과를 출력하는게 브라우저 역할인데 굳이 중간에 DOM이라고 하는 데이터를 생성하는 이유? A. 자바스크립트를 사용해 이 문서에 대한 스크립트를 작성할 수 있게 해주기 때문이다. DO.. 더보기
SCSS CSS는 HMTL 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정이다. 하지만 프로젝트 규모가 커지거나 작업이 고도화될수록CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 된다코드의 재사용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS / SCSS라고 한다 CSS의 태생적 한계를 보완하기 위해 Sass는 유용한 도구들을 제공한다 1. 선택자(selector)를 만드는 관점에서 볼 때 불필요한 부모 요소 선택자를 매번 적어야 한다. 2. 규모가 커지는 프로젝트의 경우에도 일원화된 자동화가 어렵고 수동으로 모든 것들을 수정&변경해야한다. 📍장점 1. 선택자의 중첩(Nesting).. 더보기
[JS] Arrow Function은 무엇인가? 함수의 선언과 표현 * Function - 기본적인 빌딩블럭 - subprogram이라고도 불리며 여러번 재 사용이 가능하다. - 한가지의 task(작업)나 값을 계산하기 위해 쓰인다. 1. Function declaration (함수 선언) - function 키워드 이용, 이름(name)지정, ( )에 parameter(인자) 나열, { } body 로직 작성, return해주면 된다. - 하나의 함수는 한 가지의 일만 한다. - 함수이름 작성시, 동사형태로 이름을 지정해야한다. ex) createCardAndPoint 라는 함수 이름이 있다고 보자. 우린 이것을 creteCard 혹은 createPoint로 나눠야 할지 말지에 대해 고민해야한다. - 함수는 object이다. ex) function printHello(.. 더보기

티스토리툴바