Effect/search5 서치 이펙트 07 서치 이펙트 원본 페이지 보기 원본 소스 보기 script 코드 document.querySelector(".search__info span").innerHTML = cssProperty.length; const searchTime = document.querySelector(".time span"); const seaechList = document.querySelector(".search__list"); const searchAnswers = document.querySelector(".search__answers"); const seaechMissAnswers = document.querySelector(".search__missAnswers"); const searchStart = document.. 2022. 10. 14. 서치 이펙트 06 서치 이펙트 원본 페이지 보기 원본 소스 보기 script 코드 const cssList = document.querySelector(".search__list .line"); const cssProp = []; // 데이터 출력하기 const updateList = () => { let listCSS = ""; cssProperty.forEach((data, index) => { listCSS += `${data.num}. ${data.name} : ${data.desc}`; cssProp.push(`${data.num}. ${data.name} : ${data.desc}`); }); cssList.innerHTML = listCSS; } updateList(); // 반대로 정렬 function so.. 2022. 10. 14. search 03 search03 CSS 의 속성들이 있는 구조이다. 이번에는 검색창을 없애고 [a-z] 클릭?창을 만들었다. 클릭하면 설명창과 갯수가 나오는 구조이다. 원본 소스 보기 HTML <div class="ketword"> <div class="search__info"> <div class="ketword"> <span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span> <span>f</span> <span>g</span> <span>h</span> <span>i</span> <span>j</span> <span>k</span> <span>l</.. 2022. 8. 22. search 02 search02 CSS 의 속성들이 있는 구조이다. 검색하고 지우면 목록이 없어진다. 원본 소스 보기 HTML <div class="search__wrap"> <span>inclides()를 이용하여 CSS 속성 검색하기</span> <h1>CSS 태그 검색하기</h1> <div class="search__box"> <label for="search">검색하기</label> <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해 주세요."> </div> <div class="search__info"> <div class="type">플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요.</d.. 2022. 8. 18. search 01 quiz01 html, css, javascript 의 속성들을 써서 누르면 각 속성들이 나오는 구조이다. 원본 소스 보기 HTML < main id="main"> <div class="search__wrap"> <span>indexOf()를 이용하여 CSS 속성 검색하기 <h1>HTML 태그 검색하기 <div class="search__box"> <label for="search">검색하기</label> <input type="text" id="search" placeholder="HTML 테그를 입력해 주세요."> </div> <div class="search__list"> <div class="html"> <ul> <li data-name="a"><.. 2022. 8. 16. 이전 1 다음
