webplacidcy

const searchBox = document.querySelector("#search-box"); // 사용자의 입력 칸에 대한 태그의 search-box 아이디 이름을 불러온다 const cssList = document.querySelectorAll(".list ul li"); // li의 data-name(검색할 속성의 데이터) 값 const cssCount = document.querySelector(".count em"); // 전체 속성의 개수 cssList.forEach((element, index) => { // 검색할 전체 속성의 데이터(element), 속성이 저장된 값의 배열 인덱스(index) element.classList.add("show"); // 요소에 show 클래스 이..

const searchBox = document.querySelector("#search-box"); // 사용자의 입력칸에 해당하는 태그의 id(search-box)를 불러와 입력 이벤트를 저장 const cssList = document.querySelectorAll(".list ul li"); // li의 data-name(검색할 데이터 이름) searchBox.addEventListener("keyup", () => { // 키를 눌렀다가 떼었을때 이벤트 const searchWord = searchBox.value; // 사용자가 입력한 데이터를 searchWord 변수에 저장 cssList.forEach(ele => {// cssList의 요소들(찾을 데이터 이름)을 foreach문으로 접근 ..

배열의 가장 마지막 요소를 반환하고 삭제한다 문법 arr.pop(); 코드 const arr = [1, 2, 3]; const arrPopValue = arr.pop(); // 삭제된 배열 요소를 반환한다 document.write(arr); document.write("반환값 : " + arrPopValue); 결과 1,2 반환값 : 3

배열의 마지막 번지에 새로운 요소를 추가하고 배열의 크기를 반환한다 문법 arr.push(...items:number[]); ...items:number[] 매개변수에는 추가할 배열 요소를 대입할 수 있다 코드 const arr = [1, 2, 3]; const arrCount = arr.push("javascript", 1); // 두 가지 이상의 값을 추가할 수 있다 document.write(arr); document.write(" "); document.write("반환값 : " + arrCount); 결과 1,2,3,javascript,1 반환값 : 5

배열의 모든 요소들을 결합해 하나의 문자열을 만드는 함수 문법 arr.join(seperator:string); 매개변수인 seperator에는 배열의 각 요소를 구분하기 위한 문자열이고 생략하게 되면 배열 원소들 사이에 쉼표를 추가한다 코드 const arr = ["javascript", "jquery", "c"]; document.write(arr.join()); document.write(arr.join('+')); document.write(arr.join('-')); 결과 javascript,jquery,c javascript+jquery+c javascript-jquery-c

문서의 내용에 맞게 태그를 작성하여 브라우저나 개발자가 태그의 사용 의미를 확인 할 수 있도록 코딩하는 것 1. header - 홈페이지의 상단 로고나 메인메뉴를 담고 있다 - ~ 태그의 제목 내용을 가지고 있다 - 다른 header 태그나 footer 태그 등을 추가할 수 없다 로고 2. footer - 문서의 바닥글을 나타내며 저작권, 연락처 등이 있다 - 하나의 페이지에 여러개를 추가할 수 있으나 사이트 내용 특성상 권장하지 않는다 ... 연락처 : 02-000-0000 Cobyright 2022. XXX All Rights reserved 3. section - 문서의 일부분을 정의하며 제목이 있는 주제별 그룹이다 - ~ 태그 중 하나를 추가하는 것이 좋다 - 의미 있는 구역을 그룹화할때 사용하는..

1. section 주제 별로 영역을 그룹화 하기 위해 사용 되며 주로 자식 요소로 hn태그 (h1~h6) 태그와 일반적인 컨텐츠가 포함된다. 상품 소개 상품 1 상품 2 상품 3 2. article section 태그와 같이 주제 별로 영역을 그룹화할때 사용하지만 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다. 블로그 및 SNS 영역 / 뉴스 기사 / 신문 내용 등에 사용된다 블로그 글 포스팅 1 포스팅 2 포스팅 3 3. 차이점 article은 내용이 독립적이다. article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있다. section은 주제별로 구분한 그룹이다. 논리적으로 관계있는 요소 또는 문서를 분리할 때 ..

요소의 안쪽 여백 크기를 변경하는 속성이다 1. padding : 20px -> 위/아래/왼쪽/오른쪽 모두 20px 만큼 여백을 늘린다 2. padding : 10px 20px -> 위/아래 10px, 왼쪽/오른쪽 20px만큼 여백을 늘린다 3. padding : 10px 20px 30px 40px -> 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px만큼 여백을 늘린다 4. padding : 10px 20px 30px -> 위 10px, 왼쪽/오른쪽 20px, 아래 30px만큼 여백을 늘린다 padding : 20px padding : 10px 20px padding : 10px 20px 30px 40px padding : 10px 20px 30px 결과