웹(Web)/HTML&CSS&JS5 JS Essential (3) 안녕하세요! 공대남입니다! 오늘도 이어 JS 을 배워 볼게요 이벤트 버블링과 이벤트 캡처링 버블링은 하위 요소를 클릭했을 때 하위 요소부터 상위 요소까지 이벤트가 전파되는 것을 말했다면, 캡처링은 하위 요소를 클릭했을 때 상위 요소부터 하위 요소까지 이벤트가 전파되는 것을 말합니다. 트랜지션 서서히 색 변함 #color { transition-property: background-color; transition-duration: 3s; } 콜백 콜백 함수 (Callback Function) 란 함수 안에서 실행되는 함수 콜백은 비동기 동작에서 매우 유용하게 사용됩니다. function appendHello(callback) { let hello = document.createElement('p'); he.. 2023. 2. 10. JS Essential (2) 안녕하세요! 공대남입니다! 오늘도 이어 JS 을 배워 볼게요 class class User { constructor(name, age) { // __init__ this.name = name; this.age = age; } sayHi() { alert(`안녕하세요 저는 ${this.name} 입니다.`) } } let kim = new User('Kim', 20); // 여기 작성한 인자가 constructor 에 들어가서 데이터 프로퍼티에 할당 kim.sayHi(); // 안녕하세요 저는 Kim 입니다. DOM document 접근 // id 는 고유값이므로 하나불러옴 document.getElementById('아이디 이름') // class, tag는 리스트형태로 불러옴 document.getEl.. 2023. 2. 10. JS Essential (1) 안녕하세요! 공대남입니다! 오늘은 JS 문법에 대해 알아보겠습니다. 1. 삼항연산자 조건문 ? (조건이 참일 때 실행될 코드) : (조건이 거짓일 때 실행될 코드) == : 같다 === : (단순히 값이 아니라 자료형까지) 같다 화살표함수 let sum = (a, b) => a + b; /* let sum = function(a, b) { return a + b; }; 와 동일합니다! */ 얕은 복사 깊은 복사 let user1 = { name: 'Kim' }; //얕은복사 let user2 = user1; console.log(user2); // {name: 'Kim'} user1.name = '유저1 수정' console.log(user2); // {name: '유저1 수정'} //깊은복사 let u.. 2023. 2. 10. html&css https://css3buttongenerator.com/ 다양한 동적버튼 생성기(css code) css3buttongenerator.com css3buttongenerator.com https://favicon.io/ icon generator Favicon.io - The Ultimate Favicon Generator (Free) With Favicon.io you can quickly generate a favicon for your website for free! favicon.io https://fonts.google.com/?category=Handwriting imports(link) fonts Google Fonts Making the web more beautiful, fast, an.. 2022. 5. 15. 이전 1 2 다음 728x90
