반응형 Effect36 SearchEfferct02 searchEffect02 includesOf() 문자열 메서드를 사용하여 CSS 속성을 검색할 수 있게 코딩하였습니다. 원본 소스 보기 원본 사이트 보기 HTML 전체적인 HTML 구조는 동일하며, search__list(속성 리스트)에 data-type 속성을 추가하여 타입으로도 검색이 가능하도록 하였습니다. 1 2 3 4 5 6 indexOf()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 전체 속성 갯수0 accent-color : 특정 요소에 색상을 지정할 때 사용됩니다. align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 .. 2022. 8. 17. SearchEffect01 searchEffect01 indexOf() 문자열 메서드를 사용하여 CSS 속성을 검색할 수 있게 코딩하였습니다. 원본 소스 보기 원본 사이트 보기 HTML 검색창, 전체 데이터의 갯수를 확인하기 위한 영역, 태그 데이터를 입력합니다. 키워드와 리스트의 데이터를 비교하기 위해, 각 리스트에 data-name="" 속성을 부여합니다. 1 2 3 4 5 6 indexOf()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 전체 속성 갯수0 accent-color : 특정 요소에 색상을 지정할 때 사용됩니다. align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 .. 2022. 8. 16. QuizEffect04 quizEffect04 js를 이용한 객관식 기출문제입니다. 참고하여 웹디자인기능사 시험을 준비합니다. 원본 소스 보기 자바스크립트 퀴즈 3번의 응용으로 객관식 문제를 만들었습니다. if문 안에 if문 사용과 출력문의 사용 이유 등을 확인해야합니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySele.. 2022. 8. 8. QuizEffect03 quizEffect03 js를 이용한 기출문제입니다. 참고하여 웹디자인기능사 시험을 준비합니다. 원본 소스 보기 자바스크립트 이벤트 메서드, for문, forEach문, if else문을 사용하여 문제 출력, 정답 숨기기, 정답 확인을 출력합니다. //선택자 const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelectorAll(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.q.. 2022. 8. 6. QuizEffect02 quizEffect02 js를 이용한 주관식 기출문제를 만들어봤습니다. 2번 문제의 답을 확인하며 사용된 js코드를 해석해봅니다. 원본 소스 보기 자바스크립트 이벤트 메서드를 통해 클릭했을 때 저장된 코드를 실행하게 합니다. 또한, if{}else{}문을 통하여 정답과 오답의 강아지 애니메이션을 각각 다르게 출력합니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질.. 2022. 8. 4. QuizEffect01 quizEffect01 웹디자인기능사 필기를 대비하여 js를 이용해 기출문제를 만들어봤습니다. 1번 문제의 답을 확인하며 사용된 js코드를 해석해봅니다. 원본 소스 보기 자바스크립트 html, css로 구성한 레이아웃에 javascript를 사용하여 데이터 값을 삽입합니다. 이벤트 메서드를 통해 클릭했을 때 저장된 코드를 실행하게 합니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .as.. 2022. 8. 4. 이전 1 2 다음 반응형
