html10 [Javascript] 버튼 하나로 다크 모드 설정하기 (toggle) 오늘 해 볼 실습입니다. ✅ 목표버튼 하나를 클릭하면서 다크모드, 라이트모드를 변환합니다.다크모드, 라이트모드의 자바스크립트 작성 시 toggle을 사용합니다. 먼저, html 코드를 작성합니다.이 실습은 다크모드, 라이트변환 자바스크립트 실습을 위한 것이니 html은 간단히 하겠습니다. ✅ Html가운데 중앙 정렬로 div 박스를 만듭니다.오른쪽 상단에 버튼을 고정합니다. Web Programming HTML CSS Javascipt 다크 모드 body 전체에 클래스를 주어 버튼을 누를 때마다 body 전체의 배경색, 글자 색을 한번에 변경합니다.body 클래스에 light-mode 클래스를 추가합니다.버튼이 눌릴 때 dar.. 2025. 2. 3. [유레카] github에 html 배포 시 영상, 사진 안 보이는 문제 해결 배포는 했는데, 사진, 영상이 안 나오는 문제가 생김. 내가 생각한 원인은 내가 사진, 영상을 몇개 삭제했는데 그래서 어떤거는 잘 보이는데 어떤거는 잘 안 보이는 것 같다. 그러다가 배포한 파일의 경로와 사진, 영상의 경로를 고려해야한다는 것을 확인!! 여기서 보면 개인사진1 은 잘보이는데 나머지 영상, 카페1,2 자신감 이미지는 안 보였다.보면 이미지는 모두 같은 경로에 있기 때문에 앞에 /는 없애준다../ 가 부모이므로, 영상도 /video > ./video로 앞에 점을 잘 붙여준다. . / : 부모 / : 절대 경로 현재 이미지는 모두 같은 폴더 위치에 있으므로./ 자신감 -> /자신감 처럼 변경! github page 이미지가 안뜰 때?!🚨문제발생🚨 분명 로컬에서 보았을 때 멀.. 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. 이전 1 2 다음
