다다의 개발일지 6v6

var, let, const의 차이점은 크게 변수 선언 방식, 스코프(scope), 호이스팅(hoisting), 그리고 재할당 가능 여부에서 나타난다.1. var (과거 방식)함수 스코프(function scope)를 가진다.변수 선언 전에 사용할 수 있지만 undefined가 할당된다. (호이스팅)동일한 변수명을 중복 선언할 수 있다.재할당 가능.console.log(a); // undefined (호이스팅 때문에 오류가 나지 않음)var a = 10; if (true) { var b = 20; // 블록 내부에서 선언해도 바깥에서 접근 가능 (함수 스코프)}console.log(b); // 20 (의도치 않은 값 변경 가능) ➡ var는 함수 스코프이기 때문에 블록 {} 내부에서 선언해도 바깥에..

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는 ..

처음엔 바늘들이 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..

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..

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..

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-1 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-1 www.freecodecamp.org  Remember that fonts with spaces in the name must be wrapped in quotes for CSS.-> 폰트 이름에 공백이 있는 경우는 꼭 CSS용 따옴표로 감싸야 한다.!!font-family: "Open Sans"..