# javascript30

93개의 포스트

Ajax Type Ahead

06 - Ajax Type Ahead

2021년 3월 21일
·
0개의 댓글
post-thumbnail

Flex Panels Image Gallery

flex 속성을 이용한 이미지 넓이 조절

2021년 3월 17일
·
0개의 댓글

Array Cardio Day 1

2021년 3월 15일
·
0개의 댓글
post-thumbnail

[Javascript 30] Day 16 - mousemove textshadow

this와 e.target이 다를 때의 offset, 구조분해할당 찍먹

2021년 3월 15일
·
0개의 댓글
post-thumbnail

Playing with CSS Variables and JS

사용자 지정 CSS 속성

2021년 3월 15일
·
0개의 댓글
post-thumbnail

CSS + JS Clock

transform-origin 사용하여 회전하는 중심 지정

2021년 3월 14일
·
0개의 댓글
post-thumbnail

JavaScript Drum Kit

복잡한 선택자 & transitionend event

2021년 3월 14일
·
0개의 댓글
post-thumbnail

Javascript30 - Sticky Nav

이번에 진행한 실습은 Sticky Nav로, scroll되는 위치를 파악해서 Nav의 속성을 fixed로 바꾸어주는 간단한 실습을 진행했다.

2021년 3월 3일
·
0개의 댓글
post-thumbnail

Javascript30 - Follow along link Highlighter

오랜만에 자바스크립트 30 포스팅이다! 최근에 진행하는 프로젝트에 신경 쓰느라, 상대적으로 계속 우선순위에서 밀리고 있다😂😂 그래서 주말 오전에 짬을 내서 진행해보았다. 이번 실습은 Link Highlighter를 만들어 보았다.

2021년 2월 20일
·
1개의 댓글
post-thumbnail

Javascript30 - Adding Up Times with Reduce

이번 실습은 영상이 쭉 있다고 가정하고, data-time(dataset attribute)에 표현되어 있는 영상 길이 정보를 한번에 가져와서 console.log로 찍는 연습을 해보았다.

2021년 2월 4일
·
0개의 댓글
post-thumbnail

Javascript30 - Sort Without Articles

이번 실습은 배열로 전달된 요소를 'A', 'An', 'The'와 같은 단어 빼고 사전식으로 정렬해보는 실습을 해 보았다.내가 짠 코드와 정답코드를 비교해보며 정규표현식의 위대한 힘을 알게되었다. 😂😂정규표현식에 대해 학습한다.Array.prototype.sort

2021년 1월 31일
·
0개의 댓글
post-thumbnail

Javascript30 - LocalStorage

이번 실습에는 Localstorage를 이용해서 페이지가 refresh 됐을때도 입력했던 값이 사라지지 않고 유지될 수 있도록 구현해 보았다. 😎

2021년 1월 30일
·
0개의 댓글
post-thumbnail

Javascript30 - slide in on scroll

이번 실습은 scroll event를 통해 특정 위치에 도달하게 되면 휙~하고 image들이 slide-in 되는 효과를 만들어 보았다.

2021년 1월 26일
·
0개의 댓글
post-thumbnail

Javascript_30_30

드디어! 이 시리즈의 마지막 게시물이 업로드 되었습니다! 30개를 정리하고 꾸준히 포스팅해서.. 나름 뿌듯하네요!마지막 게시물은 Day 30 project를 다룰건데, 굉장히 귀여운 게임을 구현했습니다.얼른 마무리짓자구요!랜덤으로 튀어나오는 두더지 잡기 게임을 구현해본

2021년 1월 26일
·
0개의 댓글
post-thumbnail

Javascript_30_29

안녕하세요! Derek 입니다 😃 점점 끝이 보이네요! .gif) Day 29 project와 다음 편인 30번째 주제는 굉장히 재밌을거에요! 오늘은 스탑워치 기능을 구현해볼겁니다 :) 바로 시작해볼게요. 29. Countdown Timer 목표

2021년 1월 24일
·
0개의 댓글
post-thumbnail

Javascript30 - Custom Video Player

html video tag에 대해 공부한다. transition으로 감추고, hover 될때 up 되는 방식으로 재생 bar를 커스터마이징 해서 구현항 방식이 인상깊었다.

2021년 1월 23일
·
0개의 댓글
post-thumbnail

Javascript_30_28

오늘 내일로 해서 javascript30 시리즈를 포스팅 마무리 지으려고 하니.. 바쁘네요!귀여운 토토로 보고 힐링 한번 하고 가실게여.Day 28 project는 예전에 다뤘었던 동영상 플레이어 기능 구현을 주제를 하고 있어요.음 약간 다뤄보긴 했지만, 다른 인터페이

2021년 1월 23일
·
0개의 댓글
post-thumbnail

Javascript_30_27

고지가 멀지 않았습니다! 얼른 30개 마치는 날이 기다려지네요..!오늘은 Day 27 project를 정리해보려고 합니다.정리할 주제는 블로그나 게시물 정리할때 흔히 보여서 자주 사용되는 기능입니다! click 후 drag 하여 게시물을 움직인다.가로로 overflow

2021년 1월 23일
·
0개의 댓글
post-thumbnail

Javascript_30_26

시리즈 5개 게시물만 남았네요! 어서 마무리짓고 싶은 마음뿐..!이번 게시물은 Day 26 project를 다뤄볼거에요! 오늘은 눈에 보이는 멋진 게시물 관련 기능을 정리해보려고합니다. 상단 그림처럼 메뉴 네비게이션 바에 목록 표시를 dynamic하게 구현한다.24번

2021년 1월 21일
·
0개의 댓글
post-thumbnail

Javascript30 - Sequence Key Detection

이번 챕터에서는 secret key를 입력하면 화면에 귀여운 유니콘이 출력되는 재미있는 실습을 해보았다.내가 설정한 secret Key인 'fun javascript'를 입력 할 때마다 화면에 유니콘이 추가된다😄😄어릴때 '킹오브파이터'라는 게임에서 ←→←→←

2021년 1월 20일
·
2개의 댓글