HTML과 CSS JavaScript를 사용하는 방법
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first" class="container">
<h1>Click me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>CSS
body {
background-color: beige;
}
h1 {
color: cornflowerblue;
}
.active {
color: tomato;
}JS
const clickText = document.querySelector(".container h1");
const handleClick = () => {
}
clickText.addEventListener("click", handleClick);CSS 코드를 보면 .active 클래스의 색상을 지정해놨다, 하지만 어떤 HTML의 요소도 현재 active라는 클래스를 가진 요소가 없고 이를 JavaScript를 이용하여 지정해주면 색상은 tomato로 변경되게 만들려고 한다.
JS
const clickText = document.querySelector(".container h1");
const handleClick = () => {
clickText.className = "active";
}
clickText.addEventListener("click", handleClick);handleClick 함수안에 h1의 클래스를 active로 지정해주는 로직을 작성한다.
결과: 클릭시 색상이 tomato로 변경되며 console.dir(clickText); 를 이용하여 살펴보면 className이 active로 변경된것을 확인할 수 있다.
CSS는 HTML을 바라보고 JavaScript는 HTML을 변경한다.
JS
const clickText = document.querySelector(".container h1");
const handleClick = () => {
if (clickText.ClassName === "active") {
clickText.ClassName = "";
} else {
clickText.ClassName = "active";
}
}
clickText.addEventListener("click", handleClick)- clickText는 container 클래스 자손인 h1을 가리키고 있다.
- addEventListener는 사용자의 클릭을 기다리고 있다.
- h1 요소가 클릭되면 handleClick 함수를 실행한다.
- 만약 h1의 class가 active이면 이 값을 빈문자열로 바꾼다.
- h1의 class가 active가 아니라면 이 값을 문자열 active로 바꾼다.
- CSS에 active 클래스를 갖는다면 색상을 tomato로 지정한다.
- 클릭 할때마다 active 클래스가 입력되었다가 사라졌다 하면서 글자색상이 변경된다.
CSS
.active {
color: tomato;
transition: color .5s ease-in-out;
}- CSS를 사용하고 있기 때문에 트렌지션도 사용이 가능하다.
- 트렌지션은 부드러운 전환효과를 제공한다
JS 코드 리펙토링 방법
JS
const clickText = document.querySelector(".container h1");
const handleClick = () => {
if (clickText.ClassName === "active") {
clickText.ClassName = "";
} else {
clickText.ClassName = "active";
}
}
clickText.addEventListener("click", handleClick)
// 위 코드는 className을 문자열로 직접 입력해야 한다.
// CSS의 클래스 이름을 변경하면 JS는 두번 수정 되어야한다.
// 이는 오타의 위험성과 유지보수에 불편함을 초래한다.
// 떄문에 아래와 같이 코드를 변경할 수 있다.JS
const clickText = document.querySelector(".container h1");
const handleClick = () => {
const clickedClass = "active"
if (clickText.className === clickedClass) {
clickText.className = "";
} else {
clickText.className = clickedClass;
}
}
clickText.addEventListener("click", handleClick)- 함수 블록 안에서 clickedClass 변수에 문자열 "active"를 할당한다.
- 이로써 CSS의 클래스 지정명이 변경되어도 clickedClass 변수 한번만 변경해 주어도 되며 오타로 인한 에러의 가능성도 줄어들었다.
- 변수 자체에 오타가 있다면 JS가 콘솔에서 에러를 알려준다.
버그
- 만약 HTML의 요소에 원래 지정되어 있는 클래스와 스타일이 있다면?
다음 포스팅에서
프론트엔드 개발자 지망생