앵코딩

UI에 간단한 애니메이션을 추가하려면 가능하면 css로 처리해주는것이 좋다 -> 성능때문 로그인 로그인하세요 닫기 /* one-wqy 애니메이션 1. 시작스타일 2. 최종스타일 3. 원할때 최종스타일로 변하라고 코드를 만듬 4. transition 추가 */ .modal{ width: 300px; height: 100px; border: 1px solid #333; border-radius: 10px; background-color: #333; margin-top: 20px; opacity: 0; /* 완전투명 */ visibility: hidden; /* display:none과 같음 */ transition: all 1s; /* 변할때 1초 걸려서 서서히 실행 */ } .show-modal{ visi..

jQuery HTML 조작 문법을 쉽게 바꿔주는 라이브러리 설치한 곳 하단에서 jQuery 문법 사용 가능 거의 모든 자바스크립트 라이브러리는 태그가 끝나기전 넣는것을 권장 => 페이지 로드 성능때문 jQuery CDN 안녕 // 태그안 글자를 바보로 // JavaScript document.querySelector('.hello').innerHTML = "바부"; // jQuery $('.hello').html('바보') 안녕 안녕 안녕 버튼 // test-btn을 클릭시 $('#test-btn').on('click',function(){ // $('.hello').hide(); // 사라짐 $('.hello').slideToggle(); // 슬라이드up, down }) Navbar An item A..

부트스트랩 CDN 서브메뉴 만들기 Navbar An item A second item A third item A fourth item And a fifth one .list-group{ display: none; } .show{ display: block; } // sub 메뉴 보이기 // 버튼을 누르면 에 show를 부착 document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){ // navbar-toggle을 클릭하면 list-group에 class show를 추가해주세요 document.getElementsByClassName('list-group')[0].classList.toggle('show..

알림창 닫기 버튼1 버튼2 // 콜백함수 // 파라미터 자리에 들어가는 함수 document.getElementById('close').addEventListener('click',function(){});

Alert 박스 닫기 버튼 //파라미터 function close_box(구멍) { //축약할 코드 작성 document.getElementById('alert-box').style.display = 구멍; } close_box(); //파라미터를 쓰면 () 안에 내용 입력가능 //()에 있는 내용이 구멍 자리에 들어가서 실행 close_box('none') close_box('block') 함수 2개를 만들필요없이 하나만으로 활용 가능 ! 숙제 alert창 2개 만들기 1. 아이디를 입력 안하셨어요 2. 비번을 입력 안하셨어요 알림창 닫기 버튼1 버튼2

Alert 박스 닫기 버튼 전 시간에 작성한 코드는 아주 길다 function을 사용하면 긴 코드를 깔끔하게 한 단어로 줄일 수 있다! Alert 박스 닫기 버튼 //짓고싶은 이름 function close_box() { //축약할 코드 작성 document.getElementById('alert-box').style.display = 'none'; } function open_box() { //축약할 코드 작성 document.getElementById('alert-box').style.display = 'block'; } 자주 겪는 버그 변경하고자 하는 html 요소를 위에 작성하고 그 하위에 script를 작성해야함 => 브라우저가 문서를 위에서 아래로 읽어들이기 때문 에러메시지 uncaught T..

버튼을 누를시 alert박스가 나타나게 하기 Alert 박스 버튼 .alert-box { background: rgb(255, 230, 245); color: rgb(39, 41, 37); padding: 20px; border-radius: 5px; display: none; /* 숨겨줌 보여줄땐 display : block*/ } uI만드는 법 1. 미리 디자인하기 2. 숨기기 3. 원할때 JS를 이용해서 보이기 숙제 alert창에 닫기버튼 구현 Alert 박스 닫기 버튼 위에 배웠던 alert-box를 나타나게 하는 방식과 같은 원리로 구현하니까 완성 !

웹에서 JavaScript의 목적 : HTML의 조작과 변경 1. JS로 HTML조작하기 안녕하세요 * 모든 프로그래밍 언어에서 = 은 대입연산자 컴퓨터는 정확하게 명령하여야 작동 숙제 위 안녕하세요 의 글자 사이즈를 30px로 바꾸기 안녕하세요