목록2025/02/19 (3)

다다의 개발일지 6v6

[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..
Frontend/JavaScript 2025. 2. 19. 20:52
[CSS] Learn Accessibility by Building a Quiz - 접근성을 고려한 홈페이지 만들기

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-1 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-1 www.freecodecamp.org 먼저 결과물  접근성(accessibility)은 모든 사람, 심지어 장애가 있는 사람들도 웹페이지를 쉽게 사용할 수 있도록 만드는 것입니다.이 과정에서는 퀴즈 웹페이지를 구축합니다. 키보드 단축키, ARIA 속성, 디자인 모범 사례와 같은 접근성 도구를 배웁니다.  접근성과 시맨틱 HT..
Frontend/HTML, CSS 2025. 2. 19. 15:45
[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..
Frontend/JavaScript 2025. 2. 19. 01:16
이전 Prev 1 Next 다음