amanda의 공간입니다

브라우저의 높이값, 너비값 var documentHeight = (window.innerHeight || self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight); var documentWidth = (window.innerWidth || self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);

input[type="file"]을 시안에 따라 커스텀 했더니 개발 과정에서 이슈가 발생해 버튼만 커스텀이 가능한지 문의하셨다. 파일 input의 버튼만 커스텀하는 방법 선택자를 input[type=file]::file-selector-button 로 하면 가능

1. codepen 깔끔한 슬롯머신 숫자 카운팅 자바스크립트 애니메이션 https://codepen.io/nourikarita/pen/RRJXQx slot machine click to randomize a number between 1 and 9999 and see the magic happen... codepen.io

달력이나 시계가 카운트 되면서 자동으로 넘어가는 자바스크립트 애니메이션 레퍼런스 (핀터레스트) https://www.pinterest.co.kr/pin/1047016613354267908/ A Flip Clock Flips Quickly Stock Footage Video [Video] | Clock, Instagram story ads, Facebook create www.pinterest.co.kr codepen에서 찾은 javascript animation 소스 https://codepen.io/ademilter/pen/nazxPX Countdown Clock ... codepen.io 풀어서 설명하는 velog 1. 라이브러리 없이 Vanilla CSS 만으로 플립 시계 카운터 (Flip Coun..

클릭한 요소의 데이터 값 가져와서 팝업 띄우기 HTML 팝업열기 팝업 제목 팝업 내용 CSS /* common */ html, body{margin: 0;padding: 0;} /* popup */ #dim{display: none;position: fixed;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);} .pop_container{display: none;position: fixed;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); z-index: 2;width: 90%;max-..

1. chart.js - 구글링 결과 현재 가장 널리 쓰이는 차트 플러그인으로 보임 (레퍼런스가 많다) - 심플한 디자인이고 기본 옵션 외에 커스텀이 어려운 편 https://www.chartjs.org/docs/latest/getting-started/ Getting Started | Chart.js Getting Started Let's get started with Chart.js! Alternatively, see the example below or check samples. Create a Chart In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snip..

.list type decimal 출력 결과 : 1. 2. 3. .list_type_nodot 출력 결과 : 1 2 3 .list_type_circle 출력 결과 : ① ② ③ /* list type decimal */ .list_type_decimal{ counter-reset: type-decimal; } .list_type_decimal li{ display: block; } .list_type_decimal li:before{ margin-right: 4px; content: counter(type-decimal) "."; counter-increment: type-decimal; } /* list type decimal remove dot */ .list_type_nodot{ counter-re..

@font-face에서 unicode-range로 폰트를 변경하는 방법 영문과 숫자는 Roboto로 나머지 폰트는 Noto Sans KR로 적용 body {font-family:'Roboto' ,'Noto Sans KR', 'sans-serif';} @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('※'), url('../fonts/Roboto-Regular.eot'), url('../fonts/Roboto-Regular.eot#iefix') format('embedded-opentype') url('../fonts/Roboto-Regular.woff') format('woff'), url('../fo..