웹 프로그래밍 (181) 썸네일형 리스트형 [JS] DOM level 2 : 표준 이벤트 모델 (이벤트 캡쳐링, 이벤트 버블링 비교) 이벤트 버블링 : 하위태그에서 상위태그로 순차적으로 같인 이벤트가 실행됨 이벤트 캡쳐링 : 이벤트 버블링과 반대되는 개념이다. 상위태그에서 하위 태그 순으로 같은 이벤트가 실행된다. 표준 이벤트 모델 : addEventListenr(이벤트속성, handler, capture사용여부) : onclick 이벤트속성은 'click'만 쓰면 된다. CLICK [JS] DOM level 0 : 고전 이벤트 모델 vs 인라인 이벤트 모델 고전 이벤트 모델 예시 CLICK 인라인 이벤트 모델 예시 당신의 취미는? 음악감상 영화감상 등산 게임 [JS] 태그 가져오기(2) document.querySelector(), querySelectorAll() queryselector : 만나는 첫번재 태그를 가져온다. document.querySelector(".myclass"); queryselectorAll : 해당하는 모든 태그를 가져옴 let nodes = document.querySelectorAll('td') ID PASSWORD [JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(숫자 증감) 0번 클릭 클릭 숫자감소 10번 [JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(계산기) input 태그의 type 속성을 선택자로 쓰려면 어떻게 할까? 아래처럼 하면 된다. input[type='button']{ /* padding : 0 20px; margin : 0px 5px; */ } 다른 버전 다른 버전 : this를 응용해보자. this를 사용하면, 해당 태그 자체를 넘길 수 있다. 애초에 this.value 넘기면 된다! [JS] 작성한 함수가 제대로 작동하지 않는 문제 (원인 : 자스크립트 내에 이미 있는 함수일 경우) 상황 : 계산기 기능을 구현하기 위해 코딩을 하고 있었다. 그런데, 스크립트에서 선언한 write()라는 함수가 제대로 작동하지 않았다. text 타입에 문자열을 이어붙이는 역할을 하는 함수인데, 자꾸만 화면에 해당하는 숫자만 출력되었다. 원인 : 알고봤더니, onclick ="write(블라블라)" 라고 작성하면, document.write(블라블라) 가 실행되었다. 나와 같은 문제를 기존에 겪은 분이 있어서 수월하게 이해됐다. 앞으로, 함수가 제대로 작동하지 않으면 '자바스크립트 내에서 이미 사용하고 있는 함수명' 인지 조사해보자. 해결 : wirte() 함수를 add 라는 함수명으로 바꿨더니 잘 실행됐다. + 추가사항 : clear 이란 함수도 자바스크립트 내에 이미 존재하는 함수다. 따라서 res.. [CSS] span VS div 태그 div : division(범위) 블록 엘리먼트이기 때문에 화면 전체를 쓰므로 줄바꿈이 된다. span : 폭, 적용되는 범위 인라인 엘리먼트이기 때문에 줄바꿈이 되지 않는다. 둘의 범위를 시각적으로 확인하고 싶으면, 선택자에 border 속성을 추가하면 된다. [CSS] 블록 레벨 엘리먼트, 인라인 엘리먼트 화면 전체를 쓰는 태그들을 블록 레벨 엘리먼트라고 하고, 자기 자신의 콘텐츠 크키만큼 쓰는 태그들을 인라인 엘리먼트라고 한다. 이러한 특징에 관여하는 속성이 바로 'display'이다. 블록 레벨 엘리먼트에 아래와 같은 속성을 추가하면 인라인 엘리먼트 처럼 취급한다. display : inline; 반대로, 인라인 엘리먼트에 아래와 같은 속성을 추가하면, 블록 레벨 엘리먼트로 취급할 수 있다. display : block 이전 1 ··· 9 10 11 12 13 14 15 ··· 23 다음
