SL아카데미(자바플랫폼 웹개발자과정A)

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-..

Apple Banana Grape 선택된 과일: Apple # 새로운 과일 추가하기: 추가 // label 태그를 form으로 감싸면 엔터키를 눌러도 추가가 된다. form 태그에서 제공하는 기본 기능.

DOCTYPE html> Document #fruits { display: flex; list-style: none; padding: 20px; border: 2px solid red; } #fruits li { width: 100px; background: orange; margin-right: 10px; cursor: pointer; text-align: center; } .active { color: red; text-decoration: underline; } Apple Banana Grape Orange 선택된 과일: Apple const $fruits = document.getElementById('fruits'); //이벤트 핸들러 함수 정의 function activate(e) { //ul..

https://www.naver.com" class="link">네이버 링크 확인

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..

DOCTYPE html> Document .msg{ margin-top: 20px; padding: 5px; width: 150px; border-bottom: 1px solid #333; } const $txtInput = document.getElementById('text-input'); $txtInput.addEventListener('keyup',function(e){ // console.log('키보드 이벤트 발생!'); // console.log(e); const $msg = document.querySelector('.msg'); if(e.key==='Enter') { // console.log('엔터 눌렀네?'); $msg.textContent = $txtInput.value; $txtI..

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');..

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..

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='서울시 중구'; //..

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..