일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 자바스크립트
- github
- 계획
- javascript
- Vanilla
- 프로젝트
- Firebase
- react
- expo
- CSS
- Nicolas
- react-hook
- scflix
- Netflix
- Nomad
- 마무리
- 코코아톡
- 바닐라 자바스크립트
- TiMER
- 오류
- 클론코딩
- vanilla js
- Hook
- react-native
- Nomad coder
- Project
- HTML
- 느낀 점
- coding
- Clone
- Today
- Total
목록javascript (27)
꾸매코딩
클릭 시 변경되는 슬라이더를 만들어 보았다. [ HTML ] 1 2 3 4 5 6 6개의 슬라이더 공간(item)을 설정해 주었다. [ CSS ] body { padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } .slider { display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 40px; } .slider__item { width: 80%; height: 300..
[ HTML ] Open Modal --Modal-- Close Open Modal 버튼을 눌렀을 때 Modal이 나오도록 할 것이다. background는 modal창 배경 부분을 나타내고 content는 modal 창 내부를 나타낸다. [ CSS ] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; } button { all: unset; background-color: mediums..
결과 스타일 변경 초기화 기능을 추가 Font Awesome 아이콘은 fontawesome 위 사이트를 통해 받아왔다. 코드 [ timer.html ] 00:00:00 [ style.css ] 간단한 배치와, 크기만 설정해 주었다. .timer-box { display: flex; flex-direction: column; align-items: center; margin-top: 125px; } .timer { font-size: 60px; margin-bottom: 30px; transition: all 1s; } .timer-form__Btn { display: flex; flex-direction: row; justify-content: center; text-align: center; paddi..
개발 동기 타이머 어플을 사용하여 공부 시간을 측정하고 있는데, 배우고 있는 JavaScript를 통해 타이머를 직접 만들고 싶다는 생각이 들어서 만들게 되었다. 계획 매초 1씩 증가하는 타이머 기능을 만들 예정이다. 버튼(button)을 이용하여 타이머의 시작, 정지, 초기화 기능을 나타내 줄 예정이다. 타이머 기능 let TIME = 0; // 타이머 실행 버튼 function startButton() { updateTimer(); stopButton(); setInterval(updateTimer, 1000); // 매 초당 updateTimer 반복 } //... 생략 // 타이머 증가 함수 function updateTimer(){ const hours = Math.floor(TIME/3600)..
1. JSON (JavaScript Object Notation) 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이므로, 구문 분석 및 JSON 데이터 생성을 위한 코드는 C, C++, C#, 자바, 자바스크립트, 펄, 파이썬 등 수많은 프로그래밍 언어에서 쉽게 이용할 수 있다. 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작다. 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 ..
1. innerText vs innerHTML 단순히 text를 가져올때는 큰 차이가 없다. 의 를 가져올 때 차이가 발생한다. innerText → Text만 innerHTML → Tag + Text [index.html] Hello world [index.js] const span = document.querySelector(".span"); console.log(`span.innerText = ${span.innerText}`); //span.innerText = Hello world console.log(`span.innerHTML = ${span.innerHTML}`); //span.innerHTML = Hello world [출력 결과] innerText는 불러온 Object에 Text 값만 ..