본문 바로가기

DEV/JS3013

[JS30] day 12 - Key sequence direction (KONAMI CODE) 비밀 코드 만들기🤐 특정 키 코드를 입력하면 등장하는 유니콘 KONAMI CODE? 👉 코나미 커맨드(영어: Konami Command, Konami Code, 일본어: コナミコマンド)는 코나미의 비디오 게임들에서 나타나는 치트 코드의 일종이다. 코나미 에서 만들지 않은 게임에서도 보이기도 한다. 이 커맨드는 1986년에 발매된 패미컴판 그라디우스에서 처음으로 발견되었으며, 콘트라를 계기로 북아메리카 유저들 사이에서 유명해졌다. 코나미 커맨드를 입력하려면 주로 게임의 타이틀 화면에서 게임 컨트롤러로 다음 키를 입력하면 된다. 코나미 커맨드는 일종의 이스터에그🥚 이다 https://www.cornify.com/ 🦄 브라우저에 유니콘이 하나씩 나타나는 기능을 제공해주는 사이트를 이용해 만들 것이다 JS //.. 2022. 1. 14.
[JS30] day 11 - Custom HTML5 video player 기본 HTML 비디오 플레이어 커스텀✂️ HTML CSS .player:fullscreen { max-width: none; width: 100%; } input[type=range] {...} fullscreen이 되었을 때 속성(:)을 정의해 준다 input[type=range]처럼 css에서 input 타입별로 선택 할 수 있음 JS const mute = document.querySelector('.volume_mute'); const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const progress = player.querySelector('.progress'); const.. 2021. 12. 28.
[JS30] day 10 - Hold shift to check multiple checkboxes ☑ 처음과 쉬프트+끝을 선택하면 중간 요소들이 모두 선택되는 체크 리스트를 만들자 The following is a common layout you would see in an email client. When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked. HTML / CSS This is an inbox layout. Check one item Hold down your Shift key ... (생략) ... input:checked + p { background: #.. 2021. 12. 28.
[JS30] day 9 - 14 Must know dev tools tricks HTML inline script xBREAKxDOWNx function makeGreen() { const p = document.querySelector('p'); p.style.color = '#BADA55'; p.style.fontsize = '50px'; } HTML 인라인에 스크립트 구문을 넣어 JS를 실행 시킬 수 있다 이벤트 핸들러 속성을 지정해서 자바스크립트를 실행하도록 하는 고전적인 방식 언제 JS가 실행되는지 모르겠다면? 👉 DOM breakpoint를 설정 할 수 있다 To set a DOM change breakpoint: Click the Elements tab. Go the element that you want to set the breakpoint on. Right-clic.. 2021. 12. 28.