본문 바로가기

프론트엔드 공부

 (134)
상위선택자참조&(-,:), 네임스페이스 동일한경우의 중첩 //scss .btn{ position:absolute; &.active{ color:red; } } .list{ li{ &:last-child{ margin-right:0; } } } //css .btn { position: absolute; } .btn.active { color: red; } .list li:last-child { margin-right: 0; } //scss .fs{ &-small {font-size:12px;} &-medium {font-size:14px;} &-small {font-size:16px;} } //css .fs-small { font-size: 12px; } .fs-medium { font-size: 14px; } .fs-small { font-size: 16px;..
scss 간단 표기법과 주석처리,자식선택자(>)사용 변수명 $변수명 주석처리는 두가지방법 /**/, //이 있으나 //의 경우 컴파일시 css에 표기가 안됀다. $color:tomato; .container{ h2{ color:$color; /*scss는 두가지 주석처리방법이있는데 첫번째 방법이 컴파일시 주석처리 표기가 됨으로 이를 많이 사용한다*/ /*background:black;*/ //이표기법은 scss에서만 적용되는 주석처리 //font-size:60px; } } //자식선택자 선택시 꺽쇄로 직접선택도가능 .container{ >ul{ >li{ font-size:40px; .name{ color:royalblue; } .age{ color:orange; } } } }
텍스트를 음성으로 변환 가능한 코드 function speak(text, opt_prop) { if (typeof SpeechSynthesisUtterance === "undefined" || typeof window.speechSynthesis === "undefined") { alert("이 브라우저는 음성 합성을 지원하지 않습니다.") return } window.speechSynthesis.cancel() // 현재 읽고있다면 초기화 const prop = opt_prop || {} const speechMsg = new SpeechSynthesisUtterance() speechMsg.rate = prop.rate || 1 // 속도: 0.1 ~ 10 speechMsg.pitch = prop.pitch || 1 // 음높이: 0 ..
getTimezoneOffset으로 각나라 시간대 구하기 UTC기준 이란 영국 런던을 기준으로 지역에 따른 시간차이를 나타내는 기준을 의미한다 세계 시간대를 각각알아보기 위한 코드를 하단에 작성해보았다. let d = new Date(); // console.log(d) let utc_offset = d.getTimezoneOffset(); d.setMinutes(d.getMinutes() + utc_offset); console.log (d); //utc기준 9 //korea> +9 let korea_offset =9*60; let korea_time = d.setMinutes(d.getMinutes() + korea_offset); let kt = new Date(korea_time) console.log(kt.toString()); //russia > +..
gsap.utils.toArray , scrollTrigger 활용하여 각element에 스크롤값 부여 FUNCTIONS를 반환,GSAP의 기능 기반 기능을 활용하여 트윈에 직접 연결할 수 있습니다. 이 경우 모든 대상에 대해 동일한 종료 값을 사용하는 대신 각 대상에 대해 한 번씩 호출됩니다. const reveal = gsap.utils.toArray('.reveal'); reveal.forEach((text,i)=>{ ScrollTrigger.create({ trigger:text, toggleClass:'active', start:"top 90%", end:"top 20%", markers:true, scrub:true }); }); const images = gsap.utils.toArray('img'); images.forEach((img,i)=>{ ScrollTrigger.create({ tr..
gsap.timeline({scrollTrigger}), toggleClass ***scrollTrigger scrollTrigger 플러그인으로 gsap timeline 내의 스크롤값에 따른 timeline 설정 gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ scrollTrigger:{ trigger:".box", markers:true, start:'top 80%', end:'top 30%', scrub:1 //start-end } }); tl.to(".box",{x:500,duration:5}) .to(".box",{y:500,duration:1}) .to(".box",{x:0,duration:2}) https://codepen.io/fangmin/pen/yLMXJXa gsap timeline scrollTri..
참조형데이터의 복사 : Object.assign(), spread 연산자, lodash //참조형 데이터의 복사 //: 얕은복사(shallow):Object.assign(), spread연산자 //: 깊은복사(deep) : 자바스크립트로 구현하기 복잡하여 lodash npm 사용 const user = { name :'minji', age:31, emails : ['minji@gmail.com'] } // const copyUser = user // console.log(copyUser === user) //true // user.age = 22 // console.log(copyUser === user) //true //Object.assign({},) // const copyUser = Object.assign({},user) // console.log(copyUser === user)..
참조형데이터의 데이터불변성 *데이터불변성 데이터값이 메모리에 한번 들어가면 불변한다. 할당연산자 사용시 데이터는 복사의 의미가 아닌 메모리 주소의 위치를 변경하게 된다. 참조형데이터의 경우 할당연산자를 사용할 경우 메모리 위치가 바뀌어 전체적인 틀이 깨질 수 있으므로 데이터를 얕은복사, 혹은 깊은 복사의 개념으로 접근하는 것이 좋다. //데이터불변성(Immutabililty) //원시데이터: //string,number,boolean,undefined,null //참조데이터: //object,array,function(콜백형태로 사용시) //원시데이터는 한번 메모리에 들어가면불변한다 //하단 예시의 경우 a라는 변수가 1이라는 메모리를, b라는 변수가 1이라는 메모리를 가르키는 것과 같다 // ex ) let a=1 ; let b..

티스토리툴바