⏳ 2023. 5. 22. - 2023. 5. 28. 이벤트 객체 이벤트 객체는 대상에서 발생한 이벤트 정보를 담고 있다. 버블링과 캡처링 캡처링 단계 : 이벤트가 하위 요소로 전달 타깃 단계 : 이벤트가 실제 타깃 요소로 전달 버블링 단계 : 이벤트가 상위 요소로 전파 이벤트 옵션 const parent = document.querySelector(".parent"); const child = document.querySelector(".child"); // 핸들러를 한 번만 실행 child.addEventListener( "click", () => { console.log("I'm gone"); }, { once: true, } ); // 기본 동작과 핸들러 실행을 분리 parent.addEventL..

⏳ 2023. 5. 22. - 2023. 5. 28. DOM Document Object Model HTML 문서를 객체로 표현하여, JS에서 HTML을 제어할 수 있게 한다. Node vs Element // 노드(Node) : HTML 요소, 텍스트, 주석 등 모든 것을 의미 // 요소(Element) : HTML 요소를 의미 const parentEl = document.querySelector(".parent"); // 자식 노드 확인 console.log(parentEl.childNodes); // 자식 요소 확인 console.log(parentEl.children); 검색과 탐색 const parent = document.querySelector(".parent"); const child1 ..

⏳ 2023. 5. 22. - 2023. 5. 28. 동기(Synchronous)와 비동기(Asynchronous) 동기 : 코드가 순차적으로 실행된다. 비동기 : 코드가 순차적으로 실행되지 않는다. 데이터를 서버에 요청하고 응답을 받아오기까지는 어느 정도의 시간이 필요하다. 그러나 js는 따로 기다리라는 명령이 없다면, 일단 다음 코드로 넘어간다. 응답을 받고, 다음 코드로 넘어가려면 어떻게 코드를 작성해야 하는지 알아보자. 콜백과 콜백 지옥 const a = (callback) => { setTimeout(() => { console.log(1); callback(); }, 1000); }; const b = (callback) => { setTimeout(() => { console.log(2); ..

⏳ 2023. 5. 22. - 2023. 5. 28. 개요 모듈(Module)이란 특정 데이터들의 집합(파일)이다. html에서 script 연결할 때 type="module" 값을 주고, import(가져오기)와 export(내보내기)를 사용할 수 있다. // 기본 내보내기 -> default 키워드는 하나의 모듈에서 한 번만 사용할 수 있다. export default 123; // 가져오기 // 기본 내보내기로 가져온 데이터는 이름을 마음대로 바꿔 사용할 수 있다. import number from "파일경로"; console.log(number); // 123 // 이름 내보내기 export const name = "iam454"; // 가져오기 // 이름 내보내기로 가져온 데이터는 기본적으로 이..

@media .box { width: 1200px; height: 150px; margin: 50px; border: 10px solid black; background-color: orange; } /* @media 타입 and (기능) { 스타일 } */ @media screen and (max-width: 1260px) { .box { width: auto; height: 200px; background-color: red; } } @media screen and (max-width: 800px) { .box { height: 300px; background-color: royalblue; } } orientation @media (orientation: portrait) { .box { width..

https://vercel.com/ Vercel: Develop. Preview. Ship. For the best frontend teams Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. vercel.com github에 올린 코드를 vercel을 통해 쉽게 배포할 수 있다..! https://iam454-ipad.vercel.app/ iPad 10.2(9세대) 강력한 A13 Bionic 칩을 탑재한 iPad(9세대). 센터 스테이지 기술이 적용된 12MP 울트라 와이드 전면 카메라, True Tone..

코드 보기 mask-image 이미지를 마스킹할 때 사용하는 mask-image 비디오의 검은 테두리 역시 이 속성으로 없애버릴 수 있다!

코드 보기 Intersection Observer 뷰포트에 타겟 엘리먼트가 보이고 있는지 관찰한다. 사용법 const io = new IntersectionObserver(callback, options); // 관찰자 초기화 io.observe(element) 화면에 보일 때 class를 추가하는 것으로 트랜지션 효과를 줄 수 있다.