javascript 85

javascript_(UP&DOWN_GAME)_22.05.10(day12)

DOCTYPE html> UP & DOWN 신나는 UP&DOWN 게임 1부터 100사이의 숫자를 클릭하세요. UP!! DOWN!! Congratulation!!! /*reset*/ a { color: inherit; text-decoration: none; } /* common layout */ .wrapper { font-size: 18px; background: #8c8c8c; height: 100vh; position: relative; } /* section.main */ section.main { width: 40%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-..

javascript 2022.05.10

javascript_(이벤트전파)_22.05.09(day11)

DOCTYPE html> Document #fruits { width: 400px; padding: 50px; border: 2px solid red; } #fruits li { background: greenyellow; margin-bottom: 10px; } #fruits li:first-child { position: absolute; bottom: 10%; right: 5%; } Apple Banana Grape const $fruits = document.getElementById('fruits'); $fruits.onclick = e => { console.log('ul 태그에서 클릭이벤트 발생!'); console.log('실제로 이벤트가 발생한 요소:', e.target); console..

javascript 2022.05.09

javascript_(이벤트와 이벤트핸들러)_22.05.03(day10)

DOCTYPE html> Document .box { width: 100px; height: 100px; background: orange; margin: 20px } .box.red { background: red; } .box.green{ background: yellowgreen; font-size: 25px; display: flex; justify-content: center; align-items: center; } //이벤트 핸들러 함수 정의 // - 특정 이벤트가 발생했을 때 브라우저가 대신 호출할 함수 function sayHello() { alert('메롱~~안뇽!!'); } function grow() { const $box = document.querySelector('.red');..

javascript 2022.05.04

javascript_(속성노드_스타일)_22.05.03(day10)

DOCTYPE html> Document .box { width: 100px; height: 100px; background: lightgray; display: flex; justify-content: center; align-items: center; color: orange; } .red { color: red; border: 2px dashed tomato; } .blue { color: blue; border: 2px dashed aqua; } .circle { border-radius: 50%; } 안녕 변경 //인라인 스타일 조작 인라인은 1000점 짜리 스타일 const $box = document.querySelector('.box'); // $box.style.color = 'viole..

javascript 2022.05.04

javascript_(data 어트리뷰트와 dataset 프로퍼티)_22.05.03(day10)

DOCTYPE html> Document 김철수 박영희 const $users = document.querySelector('.users'); const [$li1, $li2] = [...$users.children]; // 왼쪽은 변수 = 오른쪽은 배열 //데이터속성 확인 console.log($li1.dataset); console.log($li1.dataset.role); console.log($li2.dataset.userNumber); //데이터 속성 변경 $li2.dataset.role = 'common'; console.log($li2.dataset.role); //김철수 li태그에 data-user-address 속성 추가 $li1.dataset.userAddress='서울시 중구'; //..

javascript 2022.05.04

javascript_(Dom_속성조작)_22.05.03(day10)

DOCTYPE html> Document const $input = document.getElementById('user-name'); //홍길동을 유저네임에 넣고 싶다. 참조 (기본방법) // const userName = $input.attributes.value.value; //홍길동을 유저네임에 넣고 싶다. 참조 (쉬운방법) const userName = $input.getAttribute('value'); console.log(userName); //id를 참조하고 싶다. const inputId = $input.getAttribute('id'); // getAttribute로 참조된 값은 모두 문자형태이다. console.log(inputId); //속성값 변경(기본방법) // $input.a..

javascript 2022.05.04