# javascript30

15개의 포스트

JavaScript30 - 05

05 - Flex Panel Gallery Flex Panel Gallery을 공부하고 나서 My Avengers라는 FlexBox 와 transition을 이용한 겔러리를 만들어 보았다. image.png Learned CSS3 FlexBox Layout 레이아웃의 수직 구성뿐만 아니라 수평 구성도 유연하게 만들 수 있다. 구성은 다음과 같...

2019년 12월 5일
·
0개의 댓글

JavaScript30 - 04

04 - Array Cardio Day 1 이번 시간에는 Javascript의 Array.prototype.Methods(MDN)를 다뤄 보았다. Learned console.table()(MDN) console 창에 table 형태로 데이터를 표현해주는 배열 또는 객체를 인수로 받는 메소드이다. image.png [Array.proto...

2019년 12월 2일
·
0개의 댓글

JavaScript30 - 03

03 - CSS Variables CSS Variables를 공부하고 나서 custom CSS Variables를 만들어 보았다. 기존의 input을 컨트롤 하는 부분에 백그라운드의 색을 설정하고, 이미지를 회전 시킬 수 있도록 바꾸어 보았다. 캡처.PNG Learned CSS :root {속성 : 속성값;} 문서 구조에서 가장 상위 단계의 부모 요...

2019년 12월 2일
·
0개의 댓글

JavaScript30 - 02

02 - JS and CSS Clock JS and CSS Clock을 공부하고 나서 나만의 Clock을 만들어 봤다. 시계에 시간별로 숫자를 넣고, AM과 PM을 이용한 디지털 시간도 표현했다. clock.PNG Learned 배경이미지 꽉차게 하기 배경이미지를 브라우저 화면에 꽉차게 만들고 싶어서 다음과 같이 css를 설정했습니다.

2019년 12월 2일
·
0개의 댓글

JavaScript30 - 01

01 - JavaScript Drum Kit Drum Kit를 공부하고 나서 alphaSound라는 결과물을 만들어 보았다. 화면에 보이는 알파벳을 누르면 그 기호의 발음과 해당 기호의 이미지를 보이게 만들었다. alphaMain.PNG Learned [data-*](https://developer.mozilla.org/ko/docs/Web

2019년 12월 2일
·
0개의 댓글
post-thumbnail

11월 다섯째 주 TWIL

미디어를 재생하고, 멈추고, 재생중인지 확인하기 / 미디어 요소와 관련된 프로퍼티들 / 부모 엘리먼트 안의 자식 엘리먼트 가져오기 / MouseEvent.offsetX : 특정 엘리먼트 안에서 마우스 위치 감지하기 / 전체화면 설정하기 / Document: scroll event / Window.scrollY / HTMLElement.offsetTop / img 엘리먼트와 일반 엘리먼트의 width값 구하기 / 박스 크기를 넘어가는 문장에 말줄임표 생성하기 / if (조건) return true or false로 구성된 코드를 간단하게 적기

2019년 12월 1일
·
0개의 댓글

5. Flex Panels Image Gallery

image.png 개요 사용자 입력을 받아 분할된 div 에 변화를 주어보자. 배운 점 CSS : flex layout flex layout 은 Items 과 이를 감싸고 있는 Container 로 구성되어 있습니다. Itmes 비율을 조절하기 위해 flex: 증가너비 감소너비 기본너비 문구를 사용할 수 있습니다. 각 너비에 들어가는 값은 % 를 이...

2019년 11월 29일
·
0개의 댓글

4. Array Cardio Day

개요 Array 의 prototype function 을 사용해보자. foreach, sort, reduce, map 배운 점 Array 의 prototype function 인 foreach, sort, reduce, map 의 사용법을 실습해 보았습니다. 추가적으로 찾아볼 것 Array 의 prototype function 추가 확인. 반복적으로 ...

2019년 11월 22일
·
0개의 댓글

3. Playing with CSS Variables and JS

image.png 개요 range, color input 태그에 이벤트 리스너를 달아보자. 배운 점 CSS 내에서의 변수 값 사용 :root 문서의 최상위 단계에 정의되는 요소. -- 키워드를 통해 CSS 에서 변수를 사용할 수 있습니다. 여러 종류의 CSS 단위에 대응하기 위해 태그에 dataset 을 활용할 수 있습니다. 추가적으로 찾아볼 ...

2019년 11월 21일
·
0개의 댓글

2. CSS + JS Clock

image.png 개요 현재 시간에 대응하여 움직이는 아날로그 시계를 만들어보자. 배운 점 CSS property 사용 transition: 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있습니다. transform-origin: 변화의 중심을 지정합니다. (X축, Y축) javascript 를 통한 CSS property 조작 &...

2019년 11월 18일
·
0개의 댓글

1. JavaScript Drum Kit

image.png 개요 키보드 이벤트에 반응하는 div 와 audio 태그를 만들어보자. 배운 점 Array.prototype.forEach() 의 사용 Array 객체에서만 사용할 수 있으며 CallBack 함수를 매개변수로 받아 Array 의 모든 요소에 대해 CallBack 함수를 수행합니다. ES6 의 화살표 함수 익명 함수에서만 사용할 수 ...

2019년 11월 16일
·
0개의 댓글

0. JavaScript30 을 시작하며..

image.png 개발자 부트캠프를 기다리면서 목표가 흐릿한 공부를 하는 것보다는 무엇이라도 만들면서 하는 것이 좋다고 생각되어 검색을 하던 중 30일간 진행되는 Vanilla JavaScript 챌린지를 찾았다. 이미 어느 정도 문법이 익숙한 것을 전제로 한 강의여서 그런지 첫번째 부터 시간이 걸렸지만 답안도 공개되어 있고 이미 여러 블로그에서 풀이...

2019년 11월 16일
·
0개의 댓글
post-thumbnail

11월 둘째 주 TWIL

String.prototype.match() / String.prototype.replace() / Canvas API / Attribute modifications / 개발자 도구 console 객체의 여러가지 메서드를 이용하기 / MouseEvent.shiftKey / KeyboardEvent.shiftKey / element.checked

2019년 11월 9일
·
0개의 댓글
post-thumbnail

JavaScript 30 Day3 + Day5

JavaScript 30 코스 Day3과 Day5에서 배운 점을 정리하고, 그를 이용해 새로운 미니 프로젝트를 만들었다.

2019년 11월 8일
·
0개의 댓글
post-thumbnail

JavaScript 30 Day1 + Day2

JavaScript 30 코스 Day1과 Day2에서 배운 점을 정리하고, 그를 이용해 새로운 미니 프로젝트를 만들었다.

2019년 10월 27일
·
0개의 댓글