# vanillajs

16개의 포스트
post-thumbnail

늘어나는 카드 효과

오늘부터 가장 기본이자, 중요한 HTML, CSS, Vanilla JS 만을 사용하여 심플한 프로젝트를 시작한다.오늘 프로젝트는 클릭시 확장되는 이미지 카드를 작업했다.✔️ 체크flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위

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

프로그래머스 웹 프론트엔드 과제 with vanillaJS 4

모달에서 고양이의 성격, 태생 정보를 렌더링합니다. 해당 정보는 /cats/:id 를 통해 불러와야 합니다.코드를 분석하게 되면 app.js에서 onClick()( imageInfo 즉, 모달창을 보이게 만들어 주는 함수 )이라는 메소드를 정의해서 params로 Sea

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

프로그래머스 웹 프론트엔드 과제 with vanillaJS 3

문제 > #### 이미지 상세 보기 모달 관련 디바이스 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘려야 합니다. 필수 이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC

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

프로그래머스 웹 프론트엔드 과제 with vanillaJS 1

문제 > 1. 현재 HTML 코드가 전체적으로 로만 이루어져 있습니다. 이 마크업을 시맨틱한 방법으로 변경해야 합니다. 다크 모드(Dark mode)를 지원하도록 CSS를 수정해야 합니다. 2-1. CSS 파일 내의 다크 모드 관련 주석을 제거한 뒤 구현합니다.

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

Vanilla JS

바닐라 자바스크립트는 브라우저를 통해 우리에게 제공된 JavaScript라고 보면된다.바닐라JS는 새로운 프레임워크 또는 라이브러리가 아닌 순수한 Javascript다.바닐라JS 공식사이트를 접속해서 다운받을 수 있다.하지만 정작 파일을 다운받으면 파일 사이즈가 0KB

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

[PJT] vanillaJS로 quiz webApp 만들기

오늘은 비교적 쉬운? 미니 프로젝트 quiz app을 만들었다.문제를 풀고, 자동 채점되어 정오표까지 알려주는 웹앱이다.fileindex.htmlstyle.cssscript.jsdesign 참고 (https://uidesigndaily.com/)ui gradi

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

[PJT] vanillaJS로 Countdown timer 만들기

해당 시리즈에는 vanillaJS로만 만든 미니 플젝을 올릴 계획이다.처음에는 프레임워크 중심으로 공부를 했지만, vanillaJS를 잘 다뤄야 어떤 프레임워크도 잘 다룰 수 있다는 사실을 깨달았기 때문에! 이 시리즈를 기획하게 되었다.오늘 만들어볼 미니 프로젝트는 c

2020년 12월 30일
·
0개의 댓글

[Vanilla JS] 테트리스 만들기

[Vanilla JS] 테트리스

2020년 12월 4일
·
0개의 댓글
post-thumbnail

여유상점_0824 : 3) FormData post fetch Api not working : req.body undefined 4) Page change without new html file , using JS

3) FormData post fetch Api not working : > Front JS > Backend JS > Solution : app.use(bodyParser.json()) should be included in main server.js !!!1

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

Dance&Dancer_Match_7) 2020_06_17

We Changed to Concept of out project, Before we were making services similar with "Steezy.co" , in Korea version But Since , "Class101" already launch

2020년 6월 19일
·
0개의 댓글
post-thumbnail

Redux 적용하기 (Vanila JS)

바닐라 JS 로 리덕스 counter 적용해보기

2020년 6월 18일
·
0개의 댓글
post-thumbnail

Vanilla JS로 짱깸뽀(가위 바위 보) 게임 만들기

바닐라 자바스크립트로 만든 추억의 짱깸뽀 게임이다.시작 버튼을 눌러 게임 시작게임을 한판 할 때 마다 하단의 코인이 하나씩 소모됨룰렛 주변으로 게임 결과가 표시 됨승리할 경우 랜덤으로 코인이 지급짱깸뽀 사운드를 추가해야 하는데 구하기가 쉽지 않음여기를 클릭하면 게임 화

2020년 6월 6일
·
0개의 댓글
post-thumbnail

핀터레스트 레이아웃 구현하기

핀터레스트 레이아웃 사용시 자바스크립트만으로 구현이 가능하다. Masonry 플러그인을 활용하면 좀더 다양한 인터렉션을 활용할 수 있지만 성능 및 블록 틀어짐 이슈 때문에 자바스크립트만 활용하였다.현재 화면에 나열된 요소들의 부모를 기준으로 posirion: absol

2020년 6월 6일
·
0개의 댓글
post-thumbnail

바닐라 자바스크립트로 인덱스 구하기

제이쿼리의 index()를 바닐라 자바스크립트로 구현하는 방법이다.HTMLjavascript

2020년 6월 6일
·
0개의 댓글
post-thumbnail

Vanilla JS_DOM요소

Vanilla JS원래의 JavaScript를 의미하는 것.1) id로 접근getElementById(elementID) return Am Element Object2) tag 이름으로 접근 getElementsByTagName(tagname)return A NodeL

2020년 6월 2일
·
0개의 댓글

Feb6 - Birthday Countdown

1. 무엇을 만들었는가? 바닐라 자바스크립트를 이용한 생일 카운트 다운 2. HTML 3. CSS 4. Javascript 5. 완성된 화면 ⬇️⬇️ 스크린샷 2020-02-09 오후 7.47.26.png 6. References udemy - 20 Web Projects With Vanilla JavaScript [Nomad Cod...

2020년 2월 9일
·
0개의 댓글