본문 바로가기

프론트엔드 공부

 (134)
gsap.to 속성값//stagger, transform되는 속성들 const leftWidth = document.querySelector('width값선택자').offsetWidth - 100 + "px"; startBtn.addEventListener('click', moveStart); function moveStart(){ gsap.to('.box1', 1, {left: leftWidth ,stagger:1, fill:"yellow",rotation:360,duration:2}); } /* transform 속성들은 적용되는지 실험해볼 필요가 있다. x: 100 // transform: translateX(100px) y: 100 // transform: translateY(100px) z: 100 // transform: translateZ(100px) // ..
gsap.fromto GSAP3 (2019) TweenLite, TweenMax, TimelineLite, TimelineMax의 API가 gsap로 통합,기존의 코드와도 호환성이 유지. const leftWidth = document.querySelector('width값선택자').offsetWidth - 100 + "px"; startBtn.addEventListener('click', moveStart); function moveStart(){ gsap.to('.box1', 1, {left: leftWidth }); //gsap.fromTo(".box2", 1, {left: 0 }, {left: leftWidth }); //gsap.to(['.box1, .box2, .box3'], 1, { left : leftWidth..
NVDA(스크린리더기) 단축키 NVDA(insert, capslock으로변경가능) + 1 을 눌러 입력도움말 모드 활성화 & 종료 가능 NVDA + N : NVDA 메뉴를 열 수있음 설정 > 키보드, 음성등 변경가능 NVDA Vocalizer 음성엔진 사용 및 다운로드 https://vocalizer-nvda.com/downloads Vocalizer for NVDA | Downloads Site Language English Portuguese vocalizer-nvda.com **단축키 안내 1. NVDA키 1) 기본값은 Insert 키이며, Caps Lock 키로 바꿀 수 있다. 2) 아래 단축키 목록에서 NVDA는 인서트 키로 대치될 수 있다. 즉, 단축키 NVDA-T는 인서트-T 키를 의미한다. (캡스락 키로 바꿨다면 NVD..
웹접근성 웹표준 관련 자료들 1.웹접근성 테스트 스크린리더(2019기준) -(윈도우) NVDA /크롬,파이어폭스 무료, JAWS만큼 인기가 있음, 여러가지 플러그인을 설치해야함 (하이라이트,NVDA Speach viewer), Browse모드와 Focus 모드가 다름 https://www.nvaccess.org/download/ 2.(윈도우)JAWS /크롬,익스플로러 유료 1년에 $90 , 데모를 컴퓨터 재시작할때 40분정도 무료로 사용가능 3.(맥) Voiceover / 크롬,사파리 맥북과 호환이 좋고, 사용감이 좋음 --------문서자료 코딩의 시작, TCP School HTML Tutorial (w3schools.com) 웹 접근성 지침 2.0 | Web Soul Lab 웹 접근성 지침 2.0 | Web Soul Lab 웹 ..
number - toFixed,parseInt,parseFloat,Math //toFixed(2) 인수로 소수점 몇번째까지 고정할지 정함, 단 type이 string으로 변환됨 const pi = 3.141592535 console.log(pi); const str = pi.toFixed(2); console.log(str);//3.14 console.log(typeof str); //string //숫자와 관련된 대표적인 전역함수parseInt, parseFloat const integer = parseInt(str); const float = parseFloat(str); console.log(integer,float); //3 3.14 console.log(typeof integer, typeof float);//number number //내장객체 Math //Math...
String prototype - indexOf,length,slice,replace,match,trim //String.prototype.indexOf() const result = 'Hello world'.indexOf('world'); const result2 = 'Hello world'.indexOf('wow'); console.log(result); //6 console.log(result2); //-1 //문자열없을 경우 -1 //String.length 스트링객체 문자길이 알고싶을때 사용하는 prototype //String.slice(x번째부터,y-1까지추출) : 추출의 개념 !! //**비교String.splice() //String.replace(a,b) a를 찾아서 b로 교체 const str = 'hello world'; console.log(str.replace('world','mag..
class 상속과 확장 class A기본구문 > class B extends A 에서의 super 개념 > class C extends A에서의 super와 매개변수추가 //class의 상속과 확장 class Vehicle{ constructor(name,wheel){ this.name = name; this.wheel = wheel; } } const myVehicle = new Vehicle('운송수단',2); console.log(myVehicle); //확장(상속) //super의 매개변수는 class Vehicle의 매개변수에서 받아주는 값 class Bicycle extends Vehicle{ constructor(name,wheel){ super(name,wheel); } } const myBicycle = new..
class의 개념 이해하기 (생성자함수>class 변경) //**생성자함수를 class로 변경하기 (ES6) //javascript는 프로토타입의 프로그램언어인데 안정적이고 신뢰도가 높은 class 개념을 다른 언어에서 착안하여 직관적이고 간결하게 활용도 높게 나타낸다 // function User(first,last){ // this.firstName = first; // this.lastName = last; // } // User.prototype.getFullName = function(){ // return `${this.firstName} ${this.lastName}`; // } class User { //내부함수constructor(매개변수a,b) //constructor:function(){} 의 축약형임 constructor(first,las..

티스토리툴바