노마드 코더 바닐라 JS 챌린지 5일차

어제 코드챌린지는...문제를 끝까지 읽자는 교훈을 줬고 여태 제출한것들 봤는데

3일차 퀴즈를 내가 다 안풀었나보다...이렇게 2주간 1번 더 제출 안되면 챌린지 탈락이기에

다시 경각심을 갖고 끝까지 마무리를 잘해보자는 생각을하면서 오늘도 강의를 정리해본다

근데 생각보다 오늘 강의는 상당히 짧은편이다

 

---

#3.6 CSS in Javascript

-css는 element 선택자로 선택된 변수.style에 추가적으로 .을 붙인 후 다른 property를 적으면 그 값을 생성, 변경 또는 확인 할 수 있다. 

 

const h1Tag = document.querySelector('#title');

//h1태그의 글씨색 확인
console.log(h1Tag.style.color);
//h1태그의 폰트사이즈 변경
h1Tag.style.fontSize = "20px";

-css에서와는 달리 property를 스네이크케이스가 아닌 카멜케이스로 적어줘야된다. font-size(x) fontSize(o)

-element의 상태가 blue일 때  red로 바꿔준다는 코드는 일치 연산자를 사용한다

function handleTitleClick(){
	if(h1.style.color ==='blue'){
    	h1.style.color="red";
    }
}

-노마드코더는 style은 자바스크립트가 아닌 css파일에서 수정하는 것을 선호한다

#3.7 CSS in Javascript part Two

-html, css, js파일 간의 상호작용을 하려면 css에 사용할 class를 html 파일 태그에 없다고 해도 만들어 두고

js파일에서 해당 element에 className이라는 property를 넣어줌으로써 이벤트로 하여금 css를 바꿔줄 수 있다

//해당 클래스 이름이 있으면 없애주고 없으면 추가해주는 클릭 이벤트를 만들어서 addEventListener한 경우
function handleTitleClick(){
	const clickedClass = "clicked";
    if(h1.className===clickedClass){
    	h1.className="";
    }else{
    	h1.className = clickedClass;
    }
}

-같은 string이 여러번 사용될 때는 실수할 가능성이 많아지기 때문에 변수에 담아서 해당 변수를 사용하는 것이 바람직하다.

#3.8 CSS in Javascript part Three

-className을 사용하면 클래스 이름 전체를 바꾸지만 classList는 class의 내용물을 조작할 수 있는 기능이 있다. 해당 태그가 여러 class를 가지고 있는 경우 하나의 클래스만 활용할 것이라면 classList를 사용하는 것이 맞다

-h1.className === clickedClass 와 같은 기능으로 clickedClass가 포함되있는지 여부를 알기위해 h1.classList.contains(clickedClass)와 같이도 사용할 수 있다. 마찬가지로 add(), remove()등의 여러기능을 사용할 수 있다

-h1의 classList에 class name이 포함되었다면 제거하고, 포함되지 않았다면 추가하는 기능의 긴 코드를 toggle()로 대체할 수 있다.

const clickedClass = "clicked"
if(h1.classList.contains(clickedClass)){
	h1.classList.remove(clickedClass);
 }else{
 	h1.classList.add(clickedClass);
}

 

를 toggle()로 대체하면 다음과 같은 한줄로 대체할 수 있다.

h1.classList.toggle("clicked");