css9 [Javascript] 버튼 하나로 다크 모드 설정하기 (toggle) 오늘 해 볼 실습입니다. ✅ 목표버튼 하나를 클릭하면서 다크모드, 라이트모드를 변환합니다.다크모드, 라이트모드의 자바스크립트 작성 시 toggle을 사용합니다. 먼저, html 코드를 작성합니다.이 실습은 다크모드, 라이트변환 자바스크립트 실습을 위한 것이니 html은 간단히 하겠습니다. ✅ Html가운데 중앙 정렬로 div 박스를 만듭니다.오른쪽 상단에 버튼을 고정합니다. Web Programming HTML CSS Javascipt 다크 모드 body 전체에 클래스를 주어 버튼을 누를 때마다 body 전체의 배경색, 글자 색을 한번에 변경합니다.body 클래스에 light-mode 클래스를 추가합니다.버튼이 눌릴 때 dar.. 2025. 2. 3. [web] 기본 더하기 연산 게임 개발 [PlusPlus] ☑️ 기본 더하기 연산자 게임 조건 ☑️ 1. 어떤 이벤트 A 가 발생하면 1~100 사이의 랜덤 숫자가 하나 생성 (반복) 2. 최소 3개의 숫자가 발생하면 이벤트 B 를 통해 세개의 숫자를 더해서 제시 🎯 PlusPlus Game 규칙 🎯 1. Start Game 버튼을 눌러 게임을 시작한다 2. 버튼을 누르면 60초동안 진행 3. 세개의 카드를 눌러 랜덤 숫자를 확인, 4. 3개의 카드를 모두 뒤집어야지만 답이 생성 5. 제한시간 60초 내에 빠르게 랜덤숫자 3개의 총합을 입력 6. 게임 중간 Reset Game 버튼을 누르면 재시작 가능 7. 게임종료 후 Score 출력 💡 SKILL 💡 1. HTML,CSS,JavaScript를 사용 2. css는 tailwindcss 를 적용 💡 오픈 API .. 2022. 10. 31. [Bootstrap] 템플렛 적용안될 때 해결방법 부트스트랩 코드를 다운받았는데 적용이 안될때! 해결방법? 일단 원인은 버전이 안 맞아서 적용이 안되는 경우가 대부분이었다 코드안에 이코드를 붙여넣기! 해결완료 후 적용된 모습! 2022. 10. 29. <React> <p> cannot appear as a descendant of <p> 해결방법 요런 에러가 발생한 상황!! 코드는 동작하지만 에러가 발생해서 거슬린다 왜인지 App.js 코드 어디에서 오류가 난 것인지 라인 넘버가 보이지 않는다. 일단 오류 내용을 보면 안에 가 있으면 안된다? 는 뜻인 듯 이건 App.js코드 일부 https://stackoverflow.com/questions/41928567/div-cannot-appear-as-a-descendant-of-p cannot appear as a descendant of I'm seeing this. It's not a mystery what it is complaining about: Warning: validateDOMnesting(...): cannot appear as a descendant of . See ... Some.. 2022. 10. 26. [모음 ver0] 디자인 무료 툴 모음 1탄 (22.11.09 update) 순전히 내가 보려고 만든 CSS 디자인 툴 모음 1탄 ⚡ 1. 부트스트랩 - Bootstrap ⚡ #html #css #js html, css, js까지 예제와 코드를 바로 활용할 수 있음 download examples 후 폴더를 열어 원하는 디자인 소스를 가져다 쓰면 okay!👍 https://getbootstrap.com/docs/5.0/examples/ Examples Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts. getbootstrap.com ⚡ 2. 색상 팔레트 - Color Space ⚡ #web #app .. 2022. 8. 14. [서평이벤트] 웹 개발 독학 '코딩 자율 학습 HTML + CSS + 자바스크립트 코딩에 관한 정보 나눔 및 독학을 할 수 있는 사이트 '코뮤니티'에서 서평이벤트에 참여했습니다! 책은 '길벗출판사'에서 새로 발간한 '코딩 자율 학습 HTML + CSS + 자바스크립트 '이라는 책이에요! 책 두께는 이 정도 됩니다! 처음 열면 html -> css -> javaScript 순서대로 나와있어요! 챕터마다 색이 달라서 구분하기 쉬워요~ 목차도 되게 구체적이고 목차설명도 직관적이라 필요할 때 바로바로 찾을 수 있었습니다! 폰트와, 박스 부분이 많이 헷갈렸는데 저렇게 한눈에 볼 수 있게 요약, 정리해줘서 이해가 편했어요! 중간 중간 이렇게 이해한 것을 짚고 넘어가는 [1분퀴즈]도 센스 있었습니다! 맨 마지막에는 이렇게 그동안 배웠던 것을 진짜 자기 것으로 만드는 '포트폴리오 웹 사이트' 만들기.. 2022. 5. 6. 이전 1 2 다음
