21개의 포스트
💡 랜덤으로 튀어나오는 두더지를 클릭해서 점수를 올리는 간단한 두더지 잡기 게임이다.
💡 시간을 정해주면 카운트 다운을 해주는 타이머를 만들어보자!
💡 마우스를 클릭 후 드래그하면 이미지가 좌우로 부드럽게 슬라이드하는 기능을 구현해보자!
💡 챕터22 Following Highlight에서 배운 내용을 활용하여 메뉴에 마우스를 올리면 흰 배경의 드롭다운 메뉴가 나오는 기능을 구현해보자!
💡 어떤 요소에서 이벤트가 발생했을 때 이벤트 전파 방향에 따라 구분되는 버블링과 캡쳐링에 대해 알아보자
스크롤을 내려도 페이지 밖으로 사라지지않고 상단에 고정되어 있는 네비게이션 바를 구현해보자!
Following Highlight
💡 주어진 배열을 관사(A, An, The)를 제외한 알파벳 순으로 정렬해보자!
💡 참조(reference)와 복사(copy)의 차이점에 대해 알아보자!
💡 화면을 스크롤하면 이미지가 슬라이드 인하며 나타나는 기능을 구현해보자!
💡 특정 키들을 순서대로 입력하면 발생하는 이스터에그를 구현해보자!
💡 비디오 플레이어의 여러 기능들을 직접 구현해보자!
SHIFT 키와 같이 클릭하여 한번에 여러 개의 체크박스를 모두 체크하는 기능을 구현해보자!
크롬 개발자 도구의 기능 중에서 개발자에게 유용한 여러 console 메서드에 대해 알아보자!
Array 메서드를 배워보자 2탄
javascript를 활용하여 실시간으로 검색정보를 받아오자!
flex를 사용하여 사이즈가 유연하게 바뀌는 panel을 만들어보자!
Array 메서드를 배워보자 1탄
페이지 내의 여러 타입의 <input>들을 조정하면 그 값들이 실시간으로 이미지에 반영되도록 해보자!
CSS와 JavaScript를 활용하여 간단한 아날로그 시계를 만들어보자!
키보드로 오디오를 재생하는 드럼 키트를 만들어보자!
![[wesbos30] 29. CountDown Timer](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764850349606.webp?alt=media&token=475f8c2a-cd74-44b1-b0f6-8c4b41850dc2)
![[wesbos30] 27. Click And Drag](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1765024632718.webp?alt=media&token=b5aa7f6b-bb62-412e-a91c-053c670776c4)
![[wesbos30] 26. 동적인 드롭다운 Nav](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764850059452.webp?alt=media&token=9fc74208-4e76-45cf-828b-2767dea61eb9)
![[wesbos30] 25. 이벤트 캡쳐와 버블링](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764849947359.webp?alt=media&token=b3d6dbe5-d98e-42e3-abd9-e1f9b7b3006f)
![[wesbos30] 24. Sticky Nav](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764849713725.webp?alt=media&token=39ae4ed8-090e-4b09-9f98-d52564a7aa73)
![[wesbos30] 17. Sort Without Articles](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764849493229.webp?alt=media&token=a561f098-08e8-4b7a-bb1e-e041ffa80a14)
![[wesbos30] 14. 배열&객체의 복사와 참조](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764849431417.webp?alt=media&token=6aad1863-d7ed-4e63-aa13-43adcf21ebb4)
![[wesbos30] 12. Key Sequence Detection](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764849267717.webp?alt=media&token=7069484f-711f-4a4f-ae7a-09e06d93db14)
![[wesbos30] 11. Custom Video Player](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764849151672.webp?alt=media&token=05625f0c-adfe-4842-8db9-536be1fc2263)
![[wesbos30] 10. Hold Shift to check the box](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764848953198.webp?alt=media&token=dba9218a-ddeb-4f23-8ce7-07b30d99ca9e)
![[wesbos30] 09. 개발자 도구 활용](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764848814793.webp?alt=media&token=cb0f9a4b-7c24-4a60-bd4a-93d57d31c5d4)
![[wesbos30] 07. Array 메서드 활용 2](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764848712180.webp?alt=media&token=39bc3e58-390f-4258-8fba-fbe81e44fb02)
![[wesbos30] 06. 검색 자동완성 기능 구현](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764848639126.webp?alt=media&token=37ef07aa-bfc9-43b0-8ddb-9336cf9b6d4b)
![[wesbos30] 05. Flex Panel](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764848547425.webp?alt=media&token=94c5ad64-dda0-4550-9fd8-55b9eeda1f43)
![[wesbos30] 04. Array 메서드 활용 1](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764848437197.webp?alt=media&token=5a119c37-d2f8-4db7-8613-ebd3b0b0a9af)
![[wesbos30] 03. CSS Variables 조절하기](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764834928322.webp?alt=media&token=b9f452b9-f308-42d2-b60b-6b04922b14ed)
![[wesbos30] 02. Clock](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764833088169.webp?alt=media&token=67217290-4eec-428e-a580-5c7448505a01)
![[wesbos30] 01. Drum kit](https://firebasestorage.googleapis.com/v0/b/cruz-lab.firebasestorage.app/o/images%2Fheroes%2Fhero-1764792218184.webp?alt=media&token=cc726920-0956-47c8-aab1-0a78b67fd53f)