코딩 자율학습 HTML + CSS + 자바스크립트: 12.3.3 클래스 속성 조작하기

slide 1 of 23, currently active
slide 2 of 23
slide 3 of 23
slide 4 of 23
slide 5 of 23
slide 6 of 23
slide 7 of 23
slide 8 of 23
slide 9 of 23
slide 10 of 23
slide 11 of 23
slide 12 of 23
slide 13 of 23
slide 14 of 23
slide 15 of 23
slide 16 of 23
slide 17 of 23
slide 18 of 23
slide 19 of 23
slide 20 of 23
slide 21 of 23
slide 22 of 23
slide 23 of 23

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 속성이 일괄 적용됨

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.