전체 글(173)
-
JavaScript 입문과 웹 UI개발(11)-변수문법과 Dark mode 버튼만들기
index.html Dark 🔄 main.css .dark{ background: black; } .white{ background: white; } 강의 출처: JavaScript 입문과 웹 UI개발 https://codingapple.com/ 코딩애플 온라인 강좌 - 개발자도 단기완성! 단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절 codingapple.com
2022.10.02 -
JavaScript 입문과 웹 UI개발(10)-if/else,function 관련 문제
Q1. 철수는 369게임을 더럽게 못합니다. 실제 369게임 말고 약간 쉽게 각색해서 '3의 배수에서' 박수를 치면 되는 게임을 하고 있습니다. 근데 철수는 바보라 숫자를 하나 주었을 때 이 숫자가 3의 배수인지 아닌지 파악하기 넘나 힘든 관계로 프로그래밍으로 이 문제를 해결하려고 합니다. 어떤 숫자를 함수 안에 집어넣으면 박수를 쳐야할 지 말아야할 지 판단해주는 함수를 만들려고 하는데 어떻게 함수를 만들어야할까요? function 삼육구게임() { //빨리 이 함수를 디자인해봅시다. } 실행결과 예시 : 삼육구게임(6); 실행하면 3의 배수니까 콘솔창에 '박수'라는 글자가 떠야합니다. 삼육구게임(12); 실행하면 3의 배수니까 콘솔창에 '박수'라는 글자가 떠야합니다. 삼육구게임(11); 실행하면 3의 ..
2022.10.02 -
JavaScript 입문과 웹 UI개발(9)-폼만들며 배워보는 if else 그리고 input, change 이벤트와 and, or 연산자
index.html
2022.10.02 -
JavaScript 입문과 웹 UI개발(8)-모달창 만들기와 간단한 애니메이션
index.html 로그인 로그인하세요 닫기 main.css .alert-box{ background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; /* 숨길때는 none 나타낼때는 block */ } .list-group{ display: none; } .show{ display: block; } /* 모달창 용 =====================*/ .black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 160px; visibility: hidden; /* 애니..
2022.09.30 -
JavaScript 입문과 웹 UI개발(7)-jQuery 사용법 간단정리
index.html 로그인하세요 닫기 Navbar An active item A second item A third item A fourth item And a fifth one 로그인 토글 안녕 안녕 안녕 안녕 안녕 main.css .alert-box{ background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; /* 숨길때는 none 나타낼때는 block */ } .list-group{ display: none; } .show{ display: block; } /* 모달창 용 =====================*/ .black-bg { width : 100%; height : 100%; posit..
2022.09.30 -
JavaScript 입문과 웹 UI개발(6)-서브메뉴 만들어보기와 classList 다루기
index.html Navbar An active item A second item A third item A fourth item And a fifth one main.css .alert-box{ background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; /* 숨길때는 none 나타낼때는 block */ } .list-group{ display: none; } .show{ display: block; }
2022.09.30