# insertBefore
DOM_노드 조작
선택한 노드를 생성, 변경하는 방법을 알아본다. 노드 조작 기본 메서드 appendChild() 부모요소가 대입된 변수.appendChild(자식요소가 대입된 변수) : 부모요소에 제일 마지막에 자식요소가 대입된 변수요소를 추가한다. 문서의 기존 요소를 추가하는 경우, 기존 문서의 위치에서 사라진다. > 1) h2#h2 요소를 div#listDiv 요소의 가장 마지막 자식요소로 추가하기 실행 결과: 
DOM 의 Node 객체의 메서드를 알아보아요.
DOM 의 Node 객체 의 Method 들... > DOM에는 여러 객체를 포함하고 있다. 그중 Node 자체의 Method 들을 알아보도록 하자. artcoding Node.appendChild > Node.appendChild 메서드는 많이 사용하는 메서드중 하나이다. 이 메서드는 Node 를 자식으로써 추가한다. Node.appendChild 는 이렇게 타켓 노드에 자식노드를 인자로 받아 추가하는 메서드이다. Node.cloneNode > Node.cloneNode 는 용어그대로 Node 를 복제한다. 필요한 요소를 가져와 clone 하여 재사용 가능하기 때문에 굉장히 유용하게 사용가능하다. 추가적으로 인자값을 true 로 주면, 자식 요소도 복사한다. Node.remov
Front-end 국비지원 #038일
반응형 페이지 제작 1-4 > 결과 >HTML >모바일 슬라이드 섹션부분은 'swiper'에서 가져왔다. 반응형페이지 이므로 모바일 사이즈로 줄어들면 보이는 슬라이드 영역이다. 기존의 슬라이드는 diplay: none; 이 된다. > CSS > Script Swiper API 적용 >1. swiperjs.com 에 들어가서 'Get started' 에서 Use Swiper from CDN에 있는 Script를 복사 붙여넣기를 한다.(HTML이 있는곳에) >2. API 를 클릭한다. HTML란에 div cla
Front-end 국비지원 #035일
반응형 페이지 제작 1-1 > 이번 시간에는 제플린을 사용하여 반응형 페이지를 제작한다. 제플린이란? > ### 제플린을 쓰는 이유 이미지 슬라이스 사용이 편리하다. 텍스트 선택시 폰트 정보가 다 나온다. CSS로 나오는데 필요한 부분만 셀렉해서 사용하는 것을 추천. 좌표값을 다 알려준다. > ### 제플린의 특징 프로젝트 1개는 무료 스케치와 psd를 활용할 수 있다. 개발자가 스케치를 활용 할 수 없을때 사용한다. 프로젝트 디바이스 선택이 중요하다 IOS선택 Untitle에 프로젝트 이름 입력 스케치, XD, 피그마, 포토샵을 볼 수 있다. 모래시계는 작업 히스토리다. 안드로이드 선택 > 우측 프로젝트 명 아래에 안드로이드 클릭하면 해상도 설정할 수 있다. 
[Js] Node.insertBefore
Node.insertBefore() 만약 노드가 이미 document안에 있다면, insertBefore()는 그것을 현재 자리를 새로운 position으로 옮긴다 문법 >부모 노드의 기준점 노드 앞에 삽입할 노드를 삽입한다 예시를 통해 알아보자 코드 index.html app.js 결과 화면 이전 이후 Reference MDN
[JS] DOM 개념과 조작방법 (HTMLCollection과 NodeList 차이점까지)
DOM이란? Document Object Model의 약자로 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델이다 > 브라우저 → HTML 파일 읽는다 → DOM Tree 구조의 형태로 변환 브라우저는 HTML파일에서 태그들을 브라우저가 이해할 수 있는 자신들만의 오브젝트로 변환한다. 브라우저도 일종의 어플리케이션이기 때문에, 이 어플리케이션은 자신이 이해할 수 있는 오브젝트의 형태로 메모리에 저장한다고 생각하면 쉽다. > HTML ←→ DOM ←→ JavaScript 이로써 자바스크립트는 DOM을 통해 웹페이지에 접근하고, 페이지를 수정할 수 있게 된 것이다. 모든 오브젝트는 이벤트가 발생할 수 있다 Node(오브젝트)는 EventTarget을 상속한다. HTM
요소 생성 09.웹페이지 시작하기
01. appendChild : DOM 객체를 부모의 마지막 자식으로 삽입 (= 기존 항목을 유지하고 맨 뒤에 추가함) 02. insertBefore : DOM 객체를 부모의 자식 객체 중 기준자식 앞에 삽입 예제
배열 내 키,속성 값 찾기
javascript how to get object key in array for html? 배열 내 객체의 키값을 어떻게 찾을 수 있을까요? 자료 형태가 키, 속성이 따로 출력되길 원했기에 다시 검색해 보았다. javascript how to get object value? 검색하면서 얻은 정보로는 ES2017 이후로 다음과 같이 사용할 수 있었다. >Object.values(). Object.values(data) 위 방법을 응용해보니 소괄호에 인덱스를 넣어 키값만을 찾을 수 있었고, keys가 아닌 values로 값을 찾을 수 있었다. 반복문에서 내가 저지른 오류 >문제발생 : 위에서 얻은 방법으로 반복문을 돌려보니 0번째 객체는 입력되지 않고, 마지막 객체가 입력되었다. 개발자도구의 디버거에는 문제가 없고, 0번째가 아닌 1번째만
자바스크립트로 요소 추가하기 : createElement(), appendChild()
여때까지는 JS를 이용해 HTML에서 뭔가를 가져왔음 document.querySelector("#quote span:first-child") 이런식으로. 하지만 먼저 JS에서 무언가를 만들어서 그걸 HTML에 넣어볼 수도 있음. 이미지 여러개를 HTML만으로 랜덤하게 뜨게 넣을수없어서 JS를 통해 이미지를 만들고 HTML에 넣어주어야한다. createElement() > 요소를 만드는 메서드 하지만 요소를 만들기만해서는 사용할 수 없다. HTML에 없으니까. 다른요소에 집어넣을 수 있도록 하는 메서드가 appendChild() > 선택한 요소 안에 자식요소를 추가한다. 기본적으로 appendChild 를 통해 요소를 삽입하면 맨뒤에 위치하게 된다. 아직 노드의 개념을 정확히는 모르겠어서 일단 간단하게 이해하려 한다. prepend() appendChild()와 달리 요소의 맨 앞에 위치하게 된다는 차이점이 있다. insert