CSS와 JavaScript로 HTML문서 내 Style 적용하는 방법 비교

HTML 문서에는 일반적으로 CSS를 이용해서 스타일링을 합니다. CSS는 스타일링을 위한 목적으로 만들어진 마크업 언어이기도 하니까요. 그런데, JavaScript를 이용해서도 HTML 문서를 스타일링 할 수가 있습니다. 왠지 같은 기능을 서로 하는 것 같은데, 그럴만한 이유는 다 존재합니다.

우선은 CSS와 Javascript가 같은 스타일링을 하는 데 있어 어떻게 서로 다른 모습을 띄는 지 살펴봅시다.

아래와 같은 간단한 샘플코드를 준비해보았습니다.

<body>
    <h1 id="hello">JavaScript Stydy</h1>
</body>

글자 크기 변경하기

글자 크기를 변경하는 스타일링으로 간단하게 비교해보겠습니다.

CSS 경우 <style> 태그 영역 안에서 id 선택자로 대상을 선택한 후 font-size 속성으로 16px을 지정해주었습니다.

<h1 id="hello">JavaScript Stydy</h1>

<style>
   #hello {
      font-size: 16px;
      }
</style>

Javascript의 경우에는 <script> 태그 안에서 getElementById() 함수를 이용해서 대상을 선택한 후 폰트 크기를 16px로 지정해주었습니다. 문법 형태가 약간 서로 다른 점이 눈에 띕니다.

<h1 id="hello">JavaScript Stydy</h1>

<script>
    document.getElementById("hello").style.fontSize = "16px";
</script>

CSS는 font-size라고 쓰는데, Javascript는 fontSize라고 사용하고 있습니다. 결과는 모두 동일합니다.

글자 색상 변경하기

글자 색상 변경 스타일링으로 한번 더 비교를 해보도록 하겠습니다.

CSS 선택자로 선택해서 글자색을 파란색으로 지정했습니다.

<h1 id="hello">JavaScript Stydy</h1>

<style>
  #hello {
    color: blue;
  }
</style>

Javascript의 경우 getElementById()를 사용해서 글자색을 파란색으로,

<h1 id="hello">JavaScript Stydy</h1>

<script>
   document.getElementById("hello").style.color = "blue";
</script>

getElementById와 비슷하게 동작하는 querySelector()를 사용하는 방식도 함께 살펴봅니다.

쿼리셀렉터는 괄호 안애 CSS선택자 형태로 사용한다는 차이가 있습니다.

    <h1 id="hello">JavaScript Stydy</h1>

    <script>
        document.querySelector("#hello").style.color = "blue";
    </script>

세 가지 코드의 결과 모두, 글자색을 파랗게 잘 적용해주고 있습니다.

보너스 - jQuery로 글자색상 변경하기

굳이 알지 않아도 될 것 같지만, jQuery로도 한번 살펴보는 것도 좋을 것 같습니다.

jQeury는 자바스크립트 라이브러리로서, Javascript를 더 간결하고 쉽게 사용하기 위해 만들어졌습니다.

그 편리함의 반대급부에 대해서도 다양한 의견들이 존재하는데요, 일단 한번 살펴보는 거죠 뭐^^

우선 jQuery 사용을 위해서는 라이브러리를 불러와야 하니까 요거 한줄 넣고 시작해줘야 합니다. 다들 잘 아시죠?

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<h1 id="hello">JavaScript Stydy</h1>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
    $("#hello").css("color", "red");
</script>

제일 앞의 달러표시 $의 의미는 document.querySelector 라고 보시면 됩니다.

즉, $ = document.querySelector 입니다. 16글자를 1개 기호로 줄여주는 편리함과 간결함 때문에 사용하는 겁니다.

코드를 가만히 살펴보면 Javascript는 style 키워드를 사용하는데, jQuery는 css라는 키워드를 사용하죠.

그래서 jQuery 만의 명령어, 문법 형태가 존재하기 때문에 추가적인 학습이 어느정도 필요해지기도 합니다.

jQuery도-보너스로-비교해봅니다 — jQuery도 보너스로 비교해봅니다

아무튼 결론은 CSS, Javascript, jQuery 모두 동일한 결과를 잘 보여주고 있습니다.

마치며

같은 기능을 하는 게 여러 가지로 존재하고 있어서, 이렇게까지 왜 하는건지 궁금할 수도 있겠습니다만, CSS는 주로 Static한 다시 말해 웹문서의 '정적'인 스타일링을 할때 사용을 하게 되고, 이후 사용자의 사용결과에 따라 웹문서의 스타일링을 '동적'으로 실시간 변화를 주어야 할 때 주로 사용한다는 차이가 있습니다.

그리고 DOM 조작을 위한 자바스크립트 코드는, 조작 대상이 되는 HTML 엘리먼트들의 아래쪽에 써줘야 한다는 점도 꼭 이해를 해주어야 합니다. </body> 태그 앞에 써준다고 그냥 기억하면 됩니다.^^

즐거운 코딩생활, 즐코딩

KINcoding

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

JavaScript로 버튼을 다루는 방법 2가지(onclick, addEventListenter) (0)	2023.01.16
Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) (0)	2023.01.15
Node.js + Express로 초간단 서버 만들기, 3분 컷 (0)	2023.01.08
switch 구문? - 가끔 사용되니 if와 비교하여 이 참에 정리 (0)	2023.01.06
[Javascript] 반복문 for.. in 과 for.. of 의 차이 (2)	2023.01.05

즐코딩 - KINcoding

CSS와 JavaScript로 HTML문서 내 Style 적용하는 방법 비교