목록dev-log/html·css·js (24)
오식랜드
.box가 overflow: scroll일 때 생기는 스크롤을 보이지 않게 하는 코드이다! .box { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }

버튼 등에 마우스 hover 시 테두리가 그어지는 모션을 만들어보자! 실제 border속성을 셋팅하는게 아니고 가상 선택자(::before, ::after)를 이용할 것이다. 네개의 요소가 필요해서 div > p 또는 li > a 등의 이중구조가 필요하다! 가상 선택자에 transition을 주어, 늘어나는 모션을 주고, transition-delay를 주어, 연속적으로 나타나듯 페이크를 준 것이다! 빌려준돈 영업미수금 손해배상 공사대금 임금체불 명예훼손 보증금 보험금

Date객체의 기본함수를 이용해서 오늘의 날짜와 현재의 시, 분, 초를 구하는 방법을 알아보쟈 기본적으로 각각의 요소를 반환하는 함수는 아래와 같다 let today = new Date(); // 대한민국 표준시 let year = today.getFullYear(), // 이번 년도 month = today.getMonth() + 1, // 이번 달 day = today.getDate(); // 오늘 날짜 let hours = today.getHours(), // 현재 시간 minutes = today.getMinutes(),// 현재 분 seconds = today.getSeconds(), // 현재 초 milliSeconds = today.getMilliseconds() // 현재 밀리초 여기서 원..

디데이 계산기 만들기 코드 dday 변수에 원하는 (월, 일, 년도, 시간)을 넣어주면 그날까지 남은 일수를 구해준다. 글 작성일(2021/05/28)로부터 2021년 12월 31일까지 남은 일수를 보면 217일 남았다고 한다 반대로 얼마나 지났는지 궁금하다면 gap에서 계산되는 두 변수의 위치를 바꿔주면 된다! 2021년 1월 1일부터 오늘까지 며칠이 지났나 계산해보면 147일이 지났다고 한다 :) *참고로 new Date()에서 월 입력 방식은 영어로 된 월별 이름에서 앞에서 3글자를 입력하면 된다! Jan, Feb, Mar, Apr, May, Jun, Jul, Agu, Sep, Oct, Nob, Dec

버튼 또는 div에 hover시 줄 수 있는 효과 6가지를 준비했다 별도의 스크립트 없이 오직 css로만 이루어지는 효과이니 유용하게 쓰일 듯 하다! Demo : https://dudrbrb.github.io/etc/test/hoverEffect/ Document Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 dudrbrb.github.io 우선 html에 6개의 버튼을 셋팅해준다 Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 버튼들에 기본 css를 셋팅한 뒤 커스텀을 해주자 버튼 hover시에 가상 선택자 :before, :after 를 이용해서 효과를 줄 것이다 Effect1 : 상 → 하 Effect..

bgm을 on/off 버튼으로 조작되도록 하자 sound.js(첨부파일)를 불러온 후 main.js에서 제어를 할 것이다. html sound.js 우선은 sound.js를 확인해보자 내장 함수로 초기함수, 시작함수, 멈춤함수가 있고, 인자로는 id, source, volume, loop 네가지를 받는다. main.js bgmPath : bgm의 링크 bgmNowPlaying : 재생/멈춤을 제어할 때 쓰일 boolean형태의 변수 bgm : sound.js의 Sound() 함수를 인스턴스로 불러온다 불러온 후 초기 함수를 window가 로드되었을 때 실행시켜준다. bgm on/off 버튼 클릭 시 시작/멈춤 함수를 호출하자 bgm이 재생중일 땐 시작버튼이, 이미 멈춰있을 때 멈춤버튼이 클릭되지 않도록 ..