본문 바로가기

전체 글

(293)
jquery $(document).ready(); jquery 이벤트 메서드 중 하나로 문서가 준비되면 매개변수로 넣은 콜백함수를 실행하라 는 의미 하단과 같이 줄여 사용할수도 있고, 문서 시작 전에 주로 작성
skrolljs로 가로스크롤 만들기 codepen.io/fangmin/pen/mdWdbYb 20210505 skrolljs로 가로스크롤 ... codepen.io
svg dash-array와 stroke 활용하여 움직이는 글자 만들기 codepen.io/fangmin/pen/GRWKevq codepen.io/fangmin/pen/ZEezZQd
svg 를 활용한 글자곡선 만들기 : 그래픽, 마스크 , 그래디언트 등의 요소들을 담아두는 태그 참조할 태그를 태그로 감싸준 후 id값 설정 > 하단에 참조할 태그의 위치를 잡아주고 path를 연결해줄 태그를 내부에 위치시킴 >에 앞서 설정한 태그의 id 값 설정 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat, natus obcaecati maxime volt numquam! Reprehenderit suscipit quam aliquam harum! body{ margin:0; padding:0; box-sizing:border-box; } .svg{ position:absolute; width:100%; height:100%; background:#ccc; } t..
overflow:hidden 이외에 iframe scroll 없애는 방법 ! 다음과 같이 scrolling ="no" 옵션을 설정해주면 됩니다 ! 추후 iframe 스크롤 문제가 추가되면 수정하겠습니다:)
css rotate , transform-origin으로 중심축 잡기 라인을 원의 중심축 기준으로 시계모양으로 돌리는 css 구문입니다. animation 속성에 일정시간 반복되는 linear, infinite(무한)을 추가하고 keyframe값으로 초기값 0% ~ 100% 각도를 360deg로 설정해주면 완성 :) ! .sec1 .circle .line { position: absolute; top: 51%; left: 75%; width: 27.775vh; height: 1px; background: #fff; animation:rot 3s linear infinite; transform-origin:bottom left; } @keyframes rot{ 0%{ transform: translate(-50%, -50%) rotate(0deg); } 100%{ trans..
array.every(function);array.some(function); //every method const numbers = [200,101,450,789]; function isOver100(n){ return n > 100; } console.log(numbers.every(isOver100)); //배열의 모든 값이 조건부에 맞는지 확인할때만 유용함 //some -one element const numbers= [10,50,60,102]; function isBiggerThan100(n){ return n>100; } console.log(numbers.some(isBiggerThan100)); //true
array.includes //array.includes const names =['dom','bob','mary']; console.log(names.includes('dom'));//true 배열이 특정 요소를 포함하고 있는지를 boolean값으로 판별함 문자나 문자열을에서 특정 단어등을 찾을 때는 대소문자 구분. developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes