javascript30

CSS Variables

요구사항 css에서 변수를 사용하여 값을 설정 해보고 javascript로 css를 동적으로 컨트롤 해보자. 기본 소스코드 Update CSS Variables with JS Spacing: Blur: Base Color 처리과정 & 코드분석 css에서 :root 가상클래스에 변수를 추가해 주었다. (:root 에 추가해주는 것이 모든 요소에 변수를 정의하는 데에 도움이 된다.) 커스텀 속성 정의 부분 (--* 패밀리) :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } img태그에 선언한 변수들을 이용해서 값을 설정함 캐스케이딩 변수 사용 부분 (var()함수) img { padding: var(--spacing); background: var(--b..

CSS + JS Clock 정리

요구 사항 CSS 와 JavaScript를 이용하여 시,분,초 를 각각 동적으로 움직이게 구현한다. 기본 소스코드 html { background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=5); background-size: cover; font-family: 'helvetica neue'; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } .clock { width: 30rem; height: 30rem; border: 20px s..