프론트엔드 공부 (134) 썸네일형 리스트형 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 단축평가값(circuite evaluation) const result = 0 || 40 || 60; console.log(result);//40 falsy truthy truthy const result2 = 0 || '' || 60; console.log(result2);//60 논리 연산자들은 왼쪽 > 오른쪽으로 실행됌. 이 연산자들은 결과를 얻게 되면 평가를 중단함. and 연산자에서는 false를 첫번째로, or 연산자에서는 true를 첫번째로 작성하는 것이 유용함 삼항연산자 const grade =55; const result = (grade>80)?'distingction' :(grade>50) ? 'pass' : 'fail'; console.log(result)//pass if / else 문을 대체하는 삼항연산자가 return을 여러 번 사용하고 if 블록 내부에서 한줄만 나올때 return을 대체 할 수 있음. if else if else 구문으로도 작성 가능 developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator 이전 1 ··· 12 13 14 15 16 17 다음
