본문 바로가기

728x90

프론트엔드 개발 공부한 것을 기록해요

📌Development
22

[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... 2023. 3. 26.

[JS] DOM이란? #1 Node에 접근하는 방법 *DOM: 문서 객체 모델(The Document Object Model) 웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라 한다. - DOM은 html 문서의 각 요소들을 트리형태로 구조화해 표현하는 문서(데이터)를 생성한다. 개발자는 자바스크립트을 이용해서 일을 생성하거나 수정하거나 삭제할 수 있다. 이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. DOM목적 Q. Html 코드에 써져 있는 데로 결과를 출력하는게 브라우저 역할인데 굳이 중간에 DOM이라고 하는 데이터를 생성하는 이유? A. 자바스크립트를 사용해 이 문서에 대한 스크립트를 작성할 수 있게 해주기 때문이다. DO.. 2023. 3. 26.

SCSS CSS는 HMTL 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정이다. 하지만 프로젝트 규모가 커지거나 작업이 고도화될수록CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 된다코드의 재사용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS / SCSS라고 한다 CSS의 태생적 한계를 보완하기 위해 Sass는 유용한 도구들을 제공한다 1. 선택자(selector)를 만드는 관점에서 볼 때 불필요한 부모 요소 선택자를 매번 적어야 한다. 2. 규모가 커지는 프로젝트의 경우에도 일원화된 자동화가 어렵고 수동으로 모든 것들을 수정&변경해야한다. 📍장점 1. 선택자의 중첩(Nesting).. 2023. 3. 13.

[JS] Arrow Function은 무엇인가? 함수의 선언과 표현 * Function - 기본적인 빌딩블럭 - subprogram이라고도 불리며 여러번 재 사용이 가능하다. - 한가지의 task(작업)나 값을 계산하기 위해 쓰인다. 1. Function declaration (함수 선언) - function 키워드 이용, 이름(name)지정, ( )에 parameter(인자) 나열, { } body 로직 작성, return해주면 된다. - 하나의 함수는 한 가지의 일만 한다. - 함수이름 작성시, 동사형태로 이름을 지정해야한다. ex) createCardAndPoint 라는 함수 이름이 있다고 보자. 우린 이것을 creteCard 혹은 createPoint로 나눠야 할지 말지에 대해 고민해야한다. - 함수는 object이다. ex) function printHello(.. 2023. 3. 13.

이전 1 2 3 4 5 6 다음

728x90

최근댓글

최근글

인기글

skin by © 2024 ttutta

티스토리툴바