코딩 공부 코딩 공부

highlight(); //외부 스크립트 함수 (highlight)호출 highlight(); //외부 스크립트 함수 (highlight)호출 modal (); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu (); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 // slider04 const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역 const sl..

highlight(); //외부 스크립트 함수 (highlight)호출 modal (); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu (); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 // slider03 const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역 const sliderInner = document.querySelector(".sli..

highlight(); //외부 스크립트 함수 (highlight)호출 modal (); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu (); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 // slider02 const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역 const sliderInner = document.querySelector(".sli..

const cssProperty = [ //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장 //a {num:1, name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {num:2, name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {num:3, name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {num:4, name:"animation-direction", desc:"animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {nu..

highlight(); //외부 스크립트 함수 (highlight)호출 modal (); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu (); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 //slider01 const sliderWrap = document.querySelector(".slider__wrap") //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img") //sliderImg에 div 태그 .slider_img 저장 const slider = document.querySelectorAll(".slider") //slider에 div 태그..

const cssProperty = [ //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장 //a {view:9, name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {view:20, name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view:30, name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view:40, name:"animation-direction", desc:"animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다...

const cssProperty = [ //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장 {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, ]; const searchBox = document.querySelector("#search-box"); //searchBox에 id="search-box" 태그 저장 const cssCount = document.querySelector(".count"); //cssCount에 class="count" 태그 저장 const cssDesc =..

const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //CSS속성 리스트 const cssCount = document.querySelector(".count em") //속성 갯수 //알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다. //searchBox.addEventListener is not a function // searchBox.addEventListener("click", function(){ // alert("ddd"); // }); cssList.forEach((li, index) => { li.classL..