startdeveloping웹 개발

const cssProperty = [ {view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view: "13", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view: "40", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {view: "20", name: "anim..

const cssProperty = [ {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시..

const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //속성 리스트 const cssCount = document.querySelector(".count em"); //속성 갯수 //모든 데이터 보이기 cssList.forEach((li, index) => { li.classList.add("show"); cssCount.innerText = index; }) //전체 속성 갯수 보이기 // cssList.forEach((element, index) => { // element.classList.add("show"); // co..

https://css-speedrun.netlify.app/

const searchBox = document.querySelector("#search-box")// searchBox 변수에 저장 const cssList = document.querySelectorAll(".list ul li")// 다수의 li를 cssList에 저장 const cssCount = document.querySelector(".count em")// em을 cssCount에 저장 cssList.forEach((element, index) => {// cssList의 각각 element, index에 적용 element.classList.add("show");// cssList의 element에 각각 클래스 show 추가 console.log(index)// cssCount에 inde..

const searchBox = document.querySelector("#search-box");//search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li");//다수의 li를 변수에 저장 searchBox.addEventListener("keyup", () => {//input을 클릭했을 때 이벤트 설정 const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소 변수에 저장 // console.log(searchWord) cssList.forEach(el =>{//다수의 li한테 적용 console.log(el.dataset.name) const cssName = el.dataset.n..

함수 우리는 앞에서 데이터를 저장할 때 변수를 선언하여 저장했습니다. 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있습니다. 선언적 함수 함수를 사용하여 코드를 저장한 것을 '함수 정의문'이라고 합니다. 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다. 함수 정의문은 다음과 같이 선언합니다. 기본형 function 함수명(){ 자바스크립트 코드; } 다음 예제는 함수 정의문과 익명 함수를 변수에 참조한 예입니다. 이렇게 두 가지 방식으로 함수를 선언한 다음 각각 호출하여 코드를 실행합니다. 익명 함수 자바스크립트의 익명 함수는 변수에 함수의 ..

id/class 차이점 id 선택자와 class 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것입니다. 예를 들어 id와 class를 사용하면 모든 요소가 아닌 특정한 요소에만 스타일을 적용할 수 있습니다. id 선택자와 class 선택자의 차이는 문서 안의 '복수'의 요소에 스타일을 적용하는 것인가 아니면 '유일'한 요소에 스타일을 적용하는 것인가입니다. 결론적으로 말하면 id는 '유일'한 요소에 적용, class는 '복수'의 요소에 적용할 수 있습니다. id: '유일'한 요소에 스타일을 적용 선택자에 (#)과 (id)명을 붙여 식별 class: '복수'의 요소에 스타일을 적용 요소에 (.)과 (class)를 붙여 구별