@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins"; } body { background: #7fb181; } .typing__wrap { display: flex; align-items: center; justify-content: center; height: 100vh; } .typing__inner { width: 60vw; min-height: 40vh; background: #fff; border-radius: 20px; padding..
const musicWrap = document.querySelector(".wrap__music"); const musicImg = musicWrap.querySelector(".music__img img"); const musicSong = musicWrap.querySelector(".music__song"); const musicName = musicSong.querySelector(".name"); const musicArtist = musicSong.querySelector(".artist"); const musicProgress = musicWrap.querySelector(".music__progress"); const musicProgressBar = musicProgress.queryS..
* { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } img { width: 100%; vertical-align: top; } body { background: #c9ad97; } .wrap__card { display: flex; align-items: center; justify-content: center; height: 100vh; } .card__inner { width: 700px; height: 700px; background-color: #fff; border-radius: 20px; padding: 30px; } .cards { display: flex; flex-wrap: wrap; justify-c..
const changeColor = document.querySelectorAll("#change01 .color a") changeColor.forEach(span => { span.addEventListener("click", () => { const colorName = span.dataset.color; document.querySelector("#change01 .text").style.color = colorName; }) }); .aa { display: flex; align-items: center; justify-content: center; } #change01 { text-align: center; } #change01 h3 { font-size: 25px; } #change01 .t..
데이터 저장하기 데이터를 저장은 키워드, 변수명, 자료형으로 구성되어있습니다. 기본적인 형태로는 "키워드 변수명 = 자료형"으로 구성됩니다. 키워드에 대하여 배워봅시다. 데이터 저장하는 방법 데이터 저장하는 방법으로는 var, let, const가 있다. var, let, const을 비교해보자! var 데이터 저장 가능 중복선언 가능 재활당(변경) 가능 중복선언 가능 코드 { var a = "var 1"; var a = "var 2"; document.write(a); } 결과 재활당(변경) 가능 코드 { for(var b=1; b
for문 for문은 반복문의 일종으로 특정한 부분의 코드가 반복적으로 수행될 수 있도록 한다. for문는 while문과는 달리 일반적으로 해당 루프에 연계된 루프 변수가 존재하며, 그 변수의 비교 및 증감을 위해서 별도의 문법을 할애한 점이 구분된다. 문법 기본적인 형태는 for( ){ }이다. ( )안에는 초기값, 조건식, 증감식이 들어간다. 초기값에서는 for문에서 사용할 변수를 정의한다. 조건식에서는 반복을 얼마나 수행해야 하는지의 조건을 정의한다. 증감식에서는 초기값에서 정의한 변수의 변화를 정의한다. { }안에는 자바스크립트 코드를 작성한다. 기본형 for( 초기값; 조건식; 증감식 ){ 자바스크립트 코드; } 0~9까지 작성해보자 { for( let i=0; i