코딩기록

// children : 자식 요소만 모두 선택 // parentElement : 부모 요소 선택 // firstElementChild : 첫 번째 자식 요소 선택 // lastElementChild : 마지막 자식 요소 선택 // previousElementSibling : 이전 형제 요소 선택 // nextElementSibling : 다음 형제 요소 선택 document.querySelector("#btn2").addEventListener('click', () => { const test2 = document.querySelector('#test2'); //test2의 모든 자식 요소 console.log(test2.children); console.log(test2.parentElement); ..

아임포트를 통한 결제 시스템 구현 중 계속하여 "IMP is not defined" 오류가 발생했다. 내부 js파일(/js/lesson/payment.js)에서 아임포트에서 제공하는 하기 링크의 라이브러리를 읽어와야 하는데 읽어오지 못했다. 문제는 html 파일에서 외부 js 파일을 불러오는 순서에 있었다. 외부 링크 라이브러리가 먼저 실행되어 js파일을 외부로부터 불러오고 내부 js파일을 불러오면, 내부 js파일에서 이를 잘 읽었다. 또 css 파일을 불러오는 link 태그가 가장 아래쪽에 있어야 잘 JS파일도 불러와 졌다.

모달창 코드는 body 안에서 제일 앞에다 놓기 애니메이션(fadeIn 등)은 css만으로 처리하는게 좋음(성능이 이것이 더 효율적임) one-way UI 애니메이션 설정방법 1. 시작스타일 2. 최종스타일 3. 원할때 최종스타일로 변하라고 코드짬 4. transition 추가 opacity 투명도 visibility: hidden; 애니메이션에 적합, 모습만 숨기는 것 애니메이션 효과 - transition: all 1s; 부착 및 script에 addClass / removeClass 로 변경 .black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; ..

getElementByClassName getElementByClassName(‘title1’)[x] = 찾은것 중 위에서 x번째 찾기 이벤트 리스너 = 감시자 역할(keydown, mouseover 등) document.getElementById("close").addEventListener('click', function() { document.getElementById("alert-box").style.display = "none"; }); function은 콜백함수(파라미터 자리에 들어가는 함수) 토글 함수: 클래스명을 붙였다 뗐다 해줌 document.getElementById("navButton").addEventListener("click", function() { document.getEl..

자바스크립트 학습 내용에 대해 정리하고자 한다. 기존 직접 화면 구성을 하면서 알던 부분도 있기 때문에 헷갈리는 부분과 모르는 부분을 위주로 기록하려고 합낟. 1.getElementByClassName getElementByClassName(‘title1’)[x] = 찾은것 중 위에서 x번째 찾기 2.이벤트 리스너 = 감시자 역할(keydown, mouseover 등) document.getElementById("close").addEventListener('click', function() { document.getElementById("alert-box").style.display = "none"; }); function은 콜백함수(파라미터 자리에 들어가는 함수) 3.토글 함수: 클래스명을 붙였다 뗐..