| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- fetch pull 차이
- Main
- api 라우트
- 바닐라JS
- TS
- git flow start
- Mac
- 백준
- JavaScript
- js
- git flow finish
- 실무는 공식문서로
- Next.js
- 책으론 원리만
- AJAX
- 힘들었던 한주
- git
- 개발일지
- 끝까지 잘 마무리하기
- 클라이언트 컴포넌트
- javascript30
- CSS
- jQuery
- 공부할 거 넘많다~
- axios
- HTML
- 서버 컴포넌트
- 차이점
- 다시 홧팅
- freecodecamp
- Today
- Total
목록javascript30 (3)
다다의 개발일지 6v6
[JS] Day 3 - CSS Variables ( JS로 CSS 변수 수정하기! )
spacing, blur, base Color를 변경하면 사진에 그대로 적용되도록 할 예정! 우선 css를 건드려 보았다.hl { color: #f66687;}img { width: 50%; max-height: 600px; object-fit: cover; padding: 10px; background-color: #f66687;}이렇게 기본값으로 고정시키고 각각의 색, spacing을 JS로 변경하려고 했는데 그러면 전체 기본 색이 #F66687로 똑같은데.hl의 color따로 img의 배경색 따로 변경해줘야 한다. 그래서!! 아예 기본 색을 변수로 선언하려고 함. :root와 CSS 변수 (- -base, - -spacing, - -blur):root란?:root는 ..
[JS] day2 - JS and CSS Clock ( 돌아가는 시계 만들기 )
처음엔 바늘들이 9시를 가리키고 있어서 90도 돌려줬다 . 제일 오른쪽을 기준으로 바늘을 돌려주면 된다. transform: rotate(90deg); transform-origin: 100% 50%; /* 축을 오른쪽으로 두고 회전시키려면 right(X축 100%) center(Y축 50%)와 같음. */ 이제 시간이 지날때마다 초침, 분침, 시침을 움직여 줘야한다. 현재 시간을 받아오고 const now = new Date(); 만약 42초라면 360도 : 60초 = x 도 : 42초 이렇게 비례식을 세워서 x를 구하면 된다!x = 360 × 42 ÷ 60 여기까지 하면 초침은 돌아가야 하는데 돌아가지 않는다.. 문제점 & 해결getElementsByClassName..
[JS] Day 1 - Javascript Drum Kit ( 키보드로 드럼치기!! 바닐라 js 프로젝트 1 시작 )
https://javascript30.com/ JavaScript 30Build 30 things with vanilla JS in 30 days with 30 tutorialsjavascript30.com우선 DOM조작, 이벤트 핸들링 부터 알아보자DOM 조작을 위한 주요 document 메서드 특정 요소를 선택하는 방법document.getElementById("id이름"); // ID로 요소 선택document.getElementsByClassName("클래스이름"); // 클래스 이름으로 여러 개 선택 (배열 비슷한 형태)document.getElementsByTagName("태그이름"); // 태그 이름으로 여러 개 선택 (예: "div", "p")document.querySelector..