근혁 study 공부정리

{ //css 목록 보여주기 function updataList(list) { //함수로 묶어줌 listHTML = ""; //+눌렀을때 리스트추가 안되게 작업 for(const data of list){ //cssProperty를 for문을 이용해 계속 반복 listHTML += `${data.name} : ${data.desc} ${data.view}`; //listHtml로 화면에 cssProperty를 보이게 함 } cssList.innerHTML = listHTML; } updataList(cssProperty) //함수 호출 //버튼 클릭하기 searchBox.forEach(span => { //searchBox 버튼을 클릭했을때 span.addEventListener("click", ()=>..

속성 선택자 속성 예시 설명 [name] a[href] a태그 속성 중에 href가 있으면 선택 [name="value"] a[href="#header"] a태그 href 속성의 값이 '#header'이면 선택 name~="value" a[href~="web"] a태그 href 속성의 값이 'web'을 포함한 요소 선택 [name|="value"] a[href|="web"] a 태그 href 속성의 값이 'web'이거나 'web'으로 시작하는 요소 선택 [name^="value"] a[href*="web"] a 태그 href 속성의 값이 'web'이 포함되어 있는 태그를 선택합니다. [name$="value"] a[href$="com"] a 태그 href 속성의 값이 'com'으로 끝나는 태그를 선택합니..

Flex Flex는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식이다. Flexbox에서 사용하는 속성은 부모요소와 자식요소로 나눠진다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의한다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요하다. flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order 속성 설명 ali..

CSS선택자 css에서 선택자는 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들에게 스타일을 적용할 수 있다. css선택자에는 여러 방법이 있다 우선 기본 선택자와 계층 선택자를 알아보자 기본 선택자 속성 예시 설명 태그 선택자 div {color: #fff} div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 클래스 선택자 .class {color: #fff} class 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다. 아이디 선택자 #id {color: #fff} id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다. 그룹 선택자 div, p, {color: #fff} div 태그와 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 전체 선택자 * {color: #fff} 전체..

{ const searcBox = document.querySelector("#search-box"); //검색하기 변수에 저장 const cssCount = document.querySelector(".count"); //전체 목록 갯수 변수에 저장 const cssDesc = document.querySelector(".desc"); //css 속성 설명 변수에 저장 const cssList = document.querySelector(".list"); //css 속성 목록 변수에 저장 // CSS 속성 값/전체 갯수 출력하기 cssProperty.map((element, index) => { cssCount.innerText = "전체 목록 갯수 : "+ (index+1) +"개"; //css 속성..

{ 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"); //cssList에 show 추가 cssCount.innerText = index; //갯수 카운트 }) //알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다. searchBox.fo..

연산자 연산자란 수학 시간에 연산을 할 때도 마찬가지였지만, 컴퓨터를 이용해서 코드를 통해 연산을 할 때도 연산의 방식을 결정하는 기호를 '연산자'라고 부르고 연산되는 대상을 '피연산자'라고 한다. 우리에게 가장 익숙한 +,-,*,/이 가장 대표적인 예이다. 산술 연산자 산술연산자는 산수 시간에 배운 더하기(+), 빼기(-), 나누기(/), 나머지(%)가 있다. 산술 연산자로 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개 있어야 한다. 다음은 산술 연산자의 종류와 기본형을 정리한 표이다. 종류 기본형 설명 + A + B 더하기 - A - B 빼기 * A * B 곱하기 / A / B 나누기 % A % B 나머지 다음 예제를 통해 더하기,빼기,곱하기,나누기,나머지 연산자를 어떻게 사용하는지 확인하자...

indexOf { const searchBox = document.querySelector("#search-box"); //search Box 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 const cssCount = document.querySelector(".count em"); //em을 변수에 저장 cssList.forEach((element, index) => { //cssList에 있는 모든 li태그에 show 클래스 추가 element.classList.add("show"); console.log(index); cssCount.innerHTML = index + 1; //cssCount의 e..