- 2023.03.07 -> CSS in JavaScript
자바스크립트와 상호작용하기 위한 총 3가지의 스텝이 있다고 한다.
- Element 찾기
- event를 listen하기
- event에 반응(react)하기
이전 글에서 간단한 개념과 함께 1번과 2번을 정리했다. 오늘부터는 3번에 대해서 천천히 정리해보고자 한다.
간단하게 title을 눌렀을 때, title의 색상을 바꾸는 것이다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<!-- <h1 autoFocus class="hello" id="title">Grab me!</h1> -->
<div class="hello">
<h1 id="title">Grab me 1!</h1>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
if(h1.style.color === 'blue'){
h1.style.color = "tomato";
}else {
h1.style.color = 'blue';
}
}
h1.addEventListener("click", handleTitleClick);위의 코드를 변수를 사용해서 좀 더 간결하게 표현하면 아래와 같이 수정할 수 있다.
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
const currentColor = h1.style.color;
let newColor;
if(currentColor === 'blue'){
newColor = "tomato";
}else {
newColor = 'blue';
}
h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick);
하지만 좋은 코드는 자바스크립트와 HTML, CSS 코드를 분리하는 것이 좋다고 한다. 따라서 CSS StytleSheet를 분리하는 방법을 다음 강의에서 정리해보고자 한다.
2023.03.14
#3.7 CSS in JavaScript Part Two
- style을 적용하기 적합한 도구는 .css파일이다.
- style을 적용하기 위해서 자바스크립트의 엘리먼트를 접근하는 것이 아니라, css파일에 특정 클래스나 id로 style을
적용해두고 이벤트가 발생하면 해당 style이 적용될 수 있도록 앨리먼트의 속성을 바꿔주는 방식을 사용하자.
- animation을 적용하기 좋은 도구는 JS이다.
- raw String이 반복되면 오타로 인한 에러 발생확률이 높아지기 때문에 상수로 만들어서 사용하자.
function handleTitleClick(){
const clickedClass = "clicked" //오타로 인한 오류를 방지하기 위해 변수를 사용하는 것은 중요하다.
if(h1.className === clickedClass){
h1.className = "";
}else {
h1.className = clickedClass;
}
//h1.className = "active"; //Getter 이자 Setter
console.log(h1.className)
}
h1.addEventListener("click", handleTitleClick);
#3.8 CSS in JavaScript Part Three
- classList : 특정 태그가 여러 개의 클래스를 갖고 있을 수 있는데, 이러한 경우 클래스들을 리스트로 관리할 수 있게 한다.
function handleTitleClick(){
const clickedClass = "clicked" //오타로 인한 오류를 방지하기 위해 변수를 사용하는 것은 중요하다.
//classList -> 특정 태그에 여러 개의 클래스가 존재하는 경우 className 자체를 Setter로 사용하여 변경하면
//불필요한 클래스까지 삭제되기 때문에 classList를 사용해보자.
// SOL 1>
if(h1.classList.contains(clickedClass)){
h1.classList.remove(clickedClass);
}else {
h1.classList.add(clickedClass);
}
// SOL 2> toggle
h1.classList.toggle(clickedClass);
//파라미터로 넘겨준 token이 존재하면 remove, 없으면 add하는 function
}