본문 바로가기

javascript/javascript30

06 - Ajax Type Ahead 12345678910111213141516171819202122232425262728293031323334353637383940414243const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; const cities = [];fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)); function findMatches(wordToMatch, cities) { return cities.filter(place => { // he.. 더보기
05 - Flex Panels image gallery 5번째 강의시간에는 CSS의 Flex를 통해서 이미지 갤러리를 만들어보는 시간이다. CSS에 Flex는 한국에서는 거의 사용하기 힘든 속성이다. 왜냐면... 익스플로러 상위버전에 사용 가능하기 때문에사용하기 쉽지 않다.그래도 알아두어야 나중에나 응용을 할 수 있기때문에 안쓴다고 해서 넘어가지 말자.https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90 MDN에서 css flex를 찾아본 결과이다. 자세히 나와있으니 모르시는 분들은 한번씩 읽어보면 좋을꺼 같다.자바스크립트의 토글을 이용해서 클라스를 추가하고 제거하고를 이용해서 효과를 주고 .. 더보기
04. Array Cardio Day 1 4 - Array Cardio Day14번째 시간에는 어떠한걸 만드는게 아니라 배열을 어떻게 다루는가에 대한 강의 였다.filter(), map(), sort(), reduce()4가지 함수로 총8가지 조건에 대한 풀이를 보여준다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven,.. 더보기
03. CSS + Clock 3번째 예제에는 input을 통해서 즉각적으로 값을 변경하고 적용하며 CSS에서는 공통적으로 색상을 적용하는 방법에 대해서 나왔다.1234567891011121314:root { --base: #ffc600; --spacing: 10px; --blur: 10px;}img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur));}/*var(--base)이 부분은 :root {--base:#ffc600;}에 설정된 색상값을 모두 적용한다.*/.h1 { color: var(--base);}Colored by Color Scriptercs일단 국내에서 쓰는 CSS랑은 좀 차이가 있어보인다. 내가 에이전시에서 할때는 크로스브라우징.. 더보기
02.Javascript + css Clock 이번에는 자바스크립트와 CSS스타일을 이용해서 간단하게 시계를 만들어 보려고 한다. 12345678 cs일단 html의 구조는 위와 같다.시,분,초를 각각 나눠서 html div 태그로 만들어 두고 중심을 맞춰야하기 때문에 'hand'라는 클라스를 공통적으로 적용한다.12345678910111213.hand { width:50%; height:6px; background:black; position: absolute; top:50%; transform-origin: 50%; transform:rotate(90deg); transition: all 0.5s; transition-timing-function:cubic-bezier(0.1, 2,7, 0.58 ,1);}/*시,분,초의 중심을 맞추기위해서는 tr.. 더보기
01.Drum Kit Javascript30 Javascript30 영상을 보고 개인적으로 정리 하는 글입니다.제 이해가 틀린 부분도 있을 수 있으니 틀린 부분이 있다면 댓글로 적어주시면 감사하겠습니다.자바스크립트30은 총 30개의 예제를 따라해보면서 순수 자바스크립트만 사용해서 이벤트를 작동시킨다.요즘 React,Vue.js 등 프레임워크가 많아지고 제이쿼리로 사용이 편해지면서 접할 기회가 없어져가는데 가장 중요한기본기를 다질 수 있는 예제인거 같다. 앞으로 예제를 하나씩 따라해보면서 내가 몰랐던것에 대해서도 배워보고응용해서 다른것도 만들어보는 시간을 가지려고한다. 1 - Javascript Drum Kit Keycode.info - 컴퓨터에 입력되는 키의 event.which값을 쉽게 확인할 수 있다.12345678910.. 더보기

티스토리툴바