자바스크립트/DOM 이론 (10) 썸네일형 리스트형 Web Audio API 사용법, 페이드아웃 적용하기 웹에서 단순히 배경 음악 재생 정도로 그치지 않고 소리에 다양한 효과를 주려면 Web Audio API를 사용해야 한다. 어떻게 돌아가는지 알려면 아래 페이지에서 앞 부분을 읽어 보자. https://www.w3.org/TR/webaudio/ 위 페이지에서 오디오의 signal flow라 할 수 있는 라우트를 어떻게 처리하는지 이해하고 각 메소드가 어떤 역할을 하는지 훑어 보자. 필요한 메소드가 무엇인지 파악했다면 메소드를 어떻게 사용하는지 구글에 검색해보자. MDN에 예제가 잘 나와 있다. 여기서는 Web Audio API를 이용해서 mp3 파일을 어떻게 불러오고 재생하는지와 간단한 오디오 효과로서 페이드아웃을 적용하는 방법에 대해서 다루겠다. 오디오를 불러오고 재생하는 방법은 다음 영상에서 잘 설명해.. DOM 엘리먼트를 추가하는 다양한 방법 노드 객체를 생성하는 방법 document.createElement('div') div 엘리먼트 노드를 생성한다. document.createTextNode('안녕하세요') '안녕하세요'라는 텍스트 노드를 생성한다. 노드나 문자열을 추가하는 방법 element.append(...node) element의 자식으로 node(text node, element node)를 추가한다. text node 대신 문자열을 바로 추가할 수도 있다. 자식의 제일 끝에 붙는다. element.prepend(...node) 자식의 제일 앞에 붙는다. element.before(...node) element의 바로 앞에 붙는다. element.after(...node) element의 바로 뒤에 붙는다. element.rep.. DOM 엘리먼트의 다양한 길이 값을 가져오는 방법 element.offsetParent 엘리먼트의 위치에 영향을 주는 가장 가까운 조상을 가져온다. 조상 중 position 속성에 absolute, relative, fixed, sticky가 있는 것을 말한다. 없다면 body, table, th, td 엘리먼트 중 가까운 조상을 가져온다. element.offsetLeft offsetParent를 기준으로 왼쪽에서 오른쪽으로 얼만큼 떨어져 있는지를 알려준다. element.offsetTop offsetParent를 기준으로 위쪽에서 아래쪽으로 얼만큼 떨어져 있는지를 알려준다. element.offsetWidth border를 포함한 엘리먼트의 가로 길이 element.offsetHeight border를 포함한 엘리먼트의 세로 길이 element.cl.. DOM 엘리먼트를 가져오는 다양한 방법 Selector로 찾는 방법 document.getElementById(id) 태그에 지정된 id 값으로 엘리먼트 노드 객체를 참조할 수 있다. element.querySelectorAll(css) 엘리먼트의 자식 중에 css 선택자에 해당하는 것들을 모두 가져온다. element.querySelector(css) 엘리먼트의 자식 중에 css 선택자에 해당하는 것을 찾으면 검색을 멈추고 가져온다. element.closest(css) 엘리먼트 자신부터 시작해서 가까운 조상을 하나씩 조회하며 css 선택자에 해당하는 것을 찾으면 검색을 멈추고 가져온다. 인접한 엘리먼트를 찾는 방법 element.parentElement 엘리먼트의 부모를 가져온다. element.previousElementSibling 엘.. 웹에서 화면 변경시 화면의 크기 값을 가져오는 방법 window.innerWidth나 window.innerHeight를 쓰면 현재 웹 페이지의 너비와 높이를 알 수 있다. 사용자가 화면 크기를 조절할 때마다 값을 가져오고 싶다면 여기에 onresize라는 이벤트를 이용한다. window.onresize = function () { console.log(window.innerWidth); } 참고 : https://www.w3schools.com/JSREF/prop_win_innerheight.asp https://www.w3schools.com/jsref/event_onresize.asp 돔에서 값을 사용자 컴퓨터에 저장하는 메소드 - localStorage localStorage.setItem(key, value); // 임시 저장소 객체에 key라는 값으로 value를 저장한다. { key: value; } localStorage.getItem('key'); // key 값에 저장된 value를 불러온다. // localStorage에는 string 타입만 들어간다. // 때문에 객체를 넣으려면 JSON을 써줘야 한다. 돔 엘리먼트의 클래스 이름 다루기 - classList ele.classList.add('a'); // 엘리먼트에 a라는 클래스 이름을 추가한다. // ele.classList.remove('a'); // 엘리먼트에 a라는 클래스 이름을 지운다. // ele.classList.replace('a', 'b'); // 엘리먼트의 클래스 이름 a를 b로 바꾼다. ele.classList.toggle('a'); // 엘리먼트의 클래스 이름에 a가 있으면 a를 추가하고 없으면 지운다. ele.classList.contains('a'); // 엘리먼트의 클래스 이름에 a가 있으면 true, 없으면 false를 반환한다. ele.classList.item(0); // 엘리먼트의 클래스 이름의 0번째 인덱스에 있는 클래스 이름을 반환한다. // // a는 0번째, b는 1.. 돔 엘리먼트 안에 엘리먼트와 노드 추가하기 - createElement, createTextNode, appendChild 메소드 let p = document.createElement('p'); // p 변수에 p 엘리먼트를 생성해서 넣는다. // let text = document.createTextNode('글자'); // text 변수에 '글자'라는 텍스트 노드를 생성해서 넣는다. p.appendChild(text); // p 엘리먼트 안에 text 노드를 넣는다. // 글자 document.body.appendChild(p); // body 엘리먼트 안에 p 엘리먼트를 추가한다. // 글자 글자 // appendChild 대신 append나 prepend를 사용할 수 있다. (더 제약 없이 사용 가능) // 엘리먼트 안에 자식 노드가 이미 있다면 // appendChild와 append는 자식 노드들의 가장 뒤쪽에 추가시키.. 이전 1 2 다음
