본문 바로가기

WEB Basic/JavaScript16

[JavaScript30] 03. CSS Variables - CSS 속성 값 변수 사용하기 JavaScript30 - 바닐라 자바스크립트 Day3 1. 소스코드 - HTML Update CSS Variables with JS Spacing: Blur: Base Color 2. 주목할 만한 문법 2.1. CSS 사용자 지정 속성 - CSS 사용자 지정 속성은 CSS를 작성하다보면 중복되는 속성값을 작성하는 상황을 자주 겪을 것인데, 이런 상황에서 중복되는 값을 여타 프로그래밍 언어처럼 변수처럼 사용자 지정 속성(변수)에 값을 저장해서 CSS속성 값으로 사용할 수 있는것이다. - :root{}가 변수를 전역변수처럼 호출 할 수 있도록 선언하는 부분이고, --지정속성명: 값; 형태로 선언을 한다. - 선언된 값은 앨리먼트에서 css속성의 속성값으로 호출돼 사용되는데, CSS속성명: var(--지정속.. 2021. 3. 6.
[JavaScropt30] 02. JS and CSS Clock - Date객체 현재시간 JavaScript30 - 바닐라 자바스크립트 Day2 1. 소스코드 - HTML 2. 주목할 만한 문법 2.1. setInterval(함수, 밀리초) - 밀리초(millisecond, ms)마다 함수를 실행시키는 메서드, setInterval() 메서드는 window 객체의 메서드이기 때문에 window.setInterval()처럼 호출할 수도 있지만 window.을 생략하고 setInterval()로 바로 호출할 수도 있다. - 1000 ms = 1 second (1000밀리초 = 1초) // 1초마다 setDate() 함수를 실행 setInterval(setDate, 1000); 참고: www.w3schools.com/jsref/met_win_setinterval.asp Window setInter.. 2021. 3. 5.
[JavaScript30] 01. JavaScript Drum Kit - 키보드 입력 이벤트 JavaScript30 - 바닐라 자바스크립트 Day1 1. 소스코드 - HTML A clap S hihat D kick F openhat G boom H ride J snare K tom L tink 2. 주목할 만한 문법 2.1. window.addEventListener('이벤트명', 함수) - window객체에 이벤트를 추가하는 메서드 2.1.1. 'keydown' 이벤트 - 키보드가 눌렸을 때 이벤트가 발생 // 키보드 버튼이 눌렸을 때 playing 함수를 실행 window.addEventListener('keydown', playing); 2.2. document.querySelector(`앨리먼트[속성 값="${백 틱 표현식}"]`); - document.querySelector( ): 앨.. 2021. 3. 4.
[JavaScript30] 바닐라 자바스크립트 30일 코스 JavaScript30 - 바닐라 자바스크립트 30일 코스 JavaScript30은 어떠한 자바스크립트 프레임워크(앵귤러, 리액트, 뷰)를 사용하지 않고 바닐라(순수) 자바스크립트 코드만을 이용해 CSS와 함께 다양한 기능을 구현하며 자바스크립트 기본 문법, DOM구조와 조작, 표준 ES6문법을 활용하는 방법을 배울 수 있다. 이 강의코스는 무료로 제공되며 영어로 진행된다. 자막도 영어만 나오기 때문에 어느 정도의 영어 듣기 능력이 있어야 내용을 이해할 수 있을 것이다. 강의를 수강하는 방법은 위 'JavaScript30 메인 페이지' 사진의 중앙에 보이는 Email Address란에 자신의 이메일 주소를 입력하고 우측의 주황색 Join버튼을 클릭하면 입력한 이메일 주소로 확인 메일이 가게 된다. 수신한.. 2021. 3. 3.

티스토리툴바