Programming/Front-end

공부한 내용을 정리합니다
Programming/Front-end

JS / Searching For Elements

getElementById getElementById : Id를 가져올 수 있다. document.getElementById("id"); getElementsByClassName : array로 가져다준다 getElementsByName : array로 가져다준다 querySelector querySelector css selector를 명시해줘야한다. id를 가져오는 경우에는 ("#id") 라고 입력한다. 단 하나의 element만 return 해준다. querySelectorAll 여러 element를 array로 가져오는 방법. document.querySelector(“.hello h1:first-child”) document.getElementsByClassName(”hello”)

Programming/Front-end

JS / Array 다루기

array 안에 있는 항목 받아오기 const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; // Get Item from Array console.log(daysOfWeek[5]); //sat 결과가 sat인 이유 컴퓨터는 숫자를 0부터 센다. array에 element 추가 해주기 : push 맨 끝에 item을 추가 해준다. const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; // Get Item from Array console.log(daysOfWeek); // Add one more day to the array daysOfWeek.push("sun"); // push는 항목 하..

Programming/Front-end

CSS / backdrop-filter, filter

주로 메뉴 상단에 자주 주게 되는 백드롭 필터 효과에 대해 메모해둔다. backdrop-filter: blur(2px); /* 가우시안 블러같은 효과 */ backdrop-filter: brightness(60%); /* 명도 */ backdrop-filter: contrast(40%);/* 대비 */ backdrop-filter: drop-shadow(4px 4px 10px blue);/* 그림자 */ backdrop-filter: grayscale(30%);/* 그레이스케일 */ backdrop-filter: hue-rotate(120deg);/* 포토샵에서 색 레이어 깔고 색상 효과 준 느낌 */ backdrop-filter: invert(70%);/* 색반전 */ backdrop-filter: o..