12.3.3 클래스 속성 조작하기
style 속성으로 스타일을 조작하면 다음처럼 속성을 하나씩 적어야 해서 불편합니다.
<body>
<p>text</p>
<script>
const pEl = document.querySelector("p");
pEl.style.color = "red";
pEl.style.fontSize = "20px";
pEl.style.fontWeight = "bold";
pEl.style.lineHeight = "1";
</script>
</body>
이때 지정해야 하는 스타일이 명확하다면 자바스크립트로 속성을 하나씩 지정하지 않고 p 태그에 class 속성을 추가하고 클래스 선택자로 지정하는 편이 훨씬 더 깔끔합니다.
<style>
.active{
color:red;
font-size:20px;
font-weight:bold;
line-height:1;
}
</style>
</head>
<body>
<p >① class="active">text</p>
</body>
① class 속성을 추가하면 color, font-size, font-weight, line-height 속성이 일괄 적용됨