className
Element.className = '이름';
Element.className 속성에 직접 값을 지정해 줄 수 있음
classList
Element.classList.toggle
: 클래스가 존재한다면 클래스를 제거하고, 클래스가 존재하지 않는다면 클래스를 추가하는 메서드
Element.classList.add
: 명시된 클래스를 추가하는 메서드
Element.classList.remove
: 명시된 클래스를 제거하는 메서드
cf) ID와 class 차이
ID는 한요소에만 사용, CLASS는 여러요소에 중복사용가능한 스타일 정의법
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick1(){//기존 클래스 이름 font-style이 사라지지 않고 클래스명을 추가하는 코드
const clickedClass = "active";
if (h1.classList.contains(clickedClass)){
h1.classList.remove(clickedClass);
}else{
h1.classList.add(clickedClass);
}
}
function handleTitleClick2(){//handleTitleClick1과 동일하게 동작하는 코드
h1.classList.toggle("active");
}
function handleTitleClick3(){//기존 클래스 이름 font-style이 사라지며 className이 바뀜
const clickedClass = "active";
if (h1.className === clickedClass){
h1.className = "";
}else{
h1.className=clickedClass;
}
}
h1.addEventListener("click", handleTitleClick1);
//h1.addEventListener("click", handleTitleClick2);
/*
const title = document.querySelector("div.hello:first-child h1");
function handleWindowResize(){
title.style.color= "blue";
}
function handleWindowCopy(){
title.style.color= "tomato";
}
function handleWindowOnline(){
alert("all Good");
}
function handleWindowOffline(){
alert("there is no wifi!");
}
h1.addEventListener("click", handleTitleClick);
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("offline", handleWindowOnline);
*/
/*
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
console.log(h1.style.color);
h1.style.color = "blue";
console.log(h1.style.color);
}
h1.addEventListener("click", handleTitleClick);
*/
기본동작을 막는 것
event.preventSubmit();
event.preventDefault();
clock
interval: 몇초 간격으로 무엇인가 반복되도록 하고 싶을 때 ex.)setInterval(호출하려는 함수,5000);
timeout: 일정시간이 흐른뒤 딱 한번만 실행되도록 하고 싶을 때 ex.)setTimeout(호출하려는함수,5000);
padStart(2,"0"): 문자의 길이를 늘려야할 때 사용. 0이라는 문자를 앞에 추가시켜 두자리로 만듦
const seconds = String(date.getSeconds()).padStart(2,"0");
깃 연동 에러
원격저장소에 연동하는데 아래와 같은 에러가 발생했다.
fatal: 'origin' does not appear to be a git repository
fatal: Could not read from remote repository.
연결되었는데 안되는 경우 다시 등록해본다.
git remote add origin https://github.com/Jeongyun-Jang/chrom-clone.git
연결후에 다시 push를 해보니 된다.
크롬 클론코딩 링크