버튼을 누르면 body에 .dark 클래스를 붙였다가 떼는 방식으로
전체 테마를 바꿉니다. 색상은 CSS에서 한 번만 정의해두고, 클래스로 모드를 교체하면
유지보수가 훨씬 쉬워집니다.
👉 바로 위 버튼을 눌러 보세요. 배경 색, 카드 색, 글자 색이 한꺼번에 변하면서 전체 분위기가 달라집니다.
실제 프로젝트에서는 사용자의 선호를 localStorage에 저장해 두고,
다음 방문에서도 같은 테마를 유지할 수 있습니다.
플레이어의 선택과 컴퓨터의 랜덤 선택을 비교해 승/무/패를 판정합니다. 양쪽 손이 잠깐 흔들렸다가 결과가 나오는 연출로, 실제로 하는 느낌을 살립니다.
Math.random()으로 컴퓨터 선택버튼을 누르면 가위바위보 플레이가 시작됩니다. 양쪽 손이 흔들렸다가 멈추면서 실제 게임처럼 결과가 나와요.
명언을 언어별 배열에 모아 두고, 선택한 언어에 따라 50개 중 하나를 무작위로 출력합니다. 버튼 클릭 시 문장이 살짝 위로 올라오며 등장하는 애니메이션으로 감성을 더합니다.
· 같은 문장이 반복해서 나올 수도 있어요.
· 마음에 드는 문장이 나오면 캡처해서 오늘의 다짐으로 저장해 두어도 좋아요.
하나의 마크업 구조를 가지고, CSS grid와 @media를 이용해
데스크톱/모바일에서 레이아웃만 교체합니다.
기기마다 HTML을 따로 만들 필요가 없다는 점이 반응형 웹의 핵심입니다.
아직은 “연습 중인 개발자”지만, 수업과 프로젝트에서 바로 써볼 수 있는 도구들을 하나씩 만들어 가고 있습니다. 이 놀이터는 그런 작은 실험들을 모아 둔 공간입니다.
👉 브라우저 너비를 줄였다 늘려 보면서, 레이아웃이 2열 ↔ 1열로 부드럽게 바뀌는지 확인해 보세요.
자바스크립트 Date 객체를 이용해 오늘 날짜를 구하고,
사용자가 선택한 날짜와의 차이를 “일(day)” 단위로 계산합니다.
시험, 프로젝트 마감, 기념일 카운트다운 등 어디에나 활용 가능합니다.
D-n, 과거: D+n, 오늘: D-Day평소에는 보이지 않다가, 버튼을 눌렀을 때만 나타나는 숨겨진 메시지를 만듭니다. 여러 문장 중 하나를 랜덤으로 골라, 오늘의 기분에 맞는 말을 건네도록 설계합니다.
공부하다가, 코딩하다가, 혹은 그냥 하루가 조금 길게 느껴질 때가 있죠.
아래 선물을 눌러, 오늘의 비밀 응원 메시지를 열어 보세요.