바닐라 JS) 10. CSS

Sep 01, 2024

1. 색깔 확인하기

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"> <!--style.css 적용하기-->
    <title>Hello From HTML</title>
</head>
<body>
    <div class="hello">
        <h1>Hello!</h1>
    </div>
    <div class="hello">
        <h1>Hello!</h1>
    </div>
    <div class="hello">
        <h1>Hello!</h1>
    </div>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html>

app.js


const h1 = document.querySelector(".hello h1:first-child"); // HTML의 요소 가져오기

function handleTilteClick(){ // 클릭시 이벤트
    console.log(h1.style.color);
    h1.style.color = "blue";
    console.log(h1.style.color);
}

h1.addEventListener("click", handleTilteClick);

2. 가정법 사용하기

app.js


const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기

function handleTitleClick() { // 클릭 시 이벤트
    if (h1.style.color === "blue") { 
        h1.style.color = "tomato";
    } else {
        h1.style.color = "blue";
    }
}

h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출

3. 현재 상태 저장하기

app.js


const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기

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); // 클릭 시 handleTitleClick 함수 호출

4. CSS 파일에서 적용하기

className 사용하기

app.js


const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기

function handleTitleClick() {
    h1.className = "active";
}

h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출

style.css


body {
    background-color: beige;
}

h1 {
    color: cornflowerblue;
}

.active{
    color: tomato;
}

가정법 사용하기

app.js


const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기

function handleTitleClick() {
    if(h1.className === "active"){
        h1.className = "";
    } else {
        h1.className = "active";
    }
}

h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출

transition 사용하기

요소의 속성 값이 변화할 때 애니메이션 효과를 부드럽게 적용하는 데 사용
속성 값이 변화할 때 즉시가 아니라, 일정 시간 동안 부드럽게 변경되게 함


body {
    background-color: beige;
}

h1 {
    color: cornflowerblue;
    transition: color .5s ease-in-out;
}

.active{
    color: tomato;
}

오류의 위험 줄이기

정확한 변수명 사용하기
변수를 선언해서 사용하기


const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기

function handleTitleClick() {
    const clickedClass = "clicked";
    if(h1.className === clickedClass){
        h1.className = "";
    } else {
        h1.className = clickedClass;
    }
}

h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출

classList 사용하기

class들의 목록으로 작업할 수 있게 허용해 줌
className은 이전 class에 상관없이 다 교체해버림
contains : 확인하기

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"> <!--style.css 적용하기-->
    <title>Hello From HTML</title>
</head>
<body>
    <div class="hello">
        <h1 class="hi">Hello!</h1>
    </div>
    <div class="hello">
        <h1>Hello!</h1>
    </div>
    <div class="hello">
        <h1>Hello!</h1>
    </div>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html>

app.js


const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기

function handleTitleClick() {
    const clickedClass = "clicked";
    if(h1.classList.contains(clickedClass)){ // clicked가 포함되어있는지 확인
        h1.className = "";
    } else {
        h1.className = clickedClass;
    }
}

h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출

add : 추가하기
remove : 제거하기
app.js


const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기

function handleTitleClick() {
    const clickedClass = "clicked";
    if (h1.classList.contains(clickedClass)) { // clickedClass가 포함되어 있는지 확인
        h1.classList.remove(clickedClass); // clickedClass 제거
    } else {
        h1.classList.add(clickedClass); // clickedClass 추가
    }
}

h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출

toggle 이용하기

classList 내에 clicked classrk 있다면 clicked를 제거해주고 없으면 clicked를 추가해줌
app.js


const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기

function handleTitleClick() {
    h1.classList.toggle("clicked");
}

h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출