In this post, 04 JavaScript lecture is introuduced.

CSS

style attribute

<h2>Java Script</h2>

다음과 같이 제목을 나타내는 HTML 코드를 수정하여 디자인을 바꾸고 싶다고 해보자.

<h2 style="color:powderblue">Java Script</h2>

다음처럼 HTML의 style 속성은 그 값으로 CSS 가 와야한다. 위 코드에서 CSS 코드 부분은 CSS의 문법 중, property 에 해당한다.

배경색을 바꾸고 싶다면 또 다른 property를 이용하면 된다.

<h2 style="background-color: coral;color: powderblue">Java Script</h2>

style tag

HTML 코드로 작성한 본문의 중간에 특정 단어들을 굵게 강조하고 싶다고 가정하자. 이를 위해 어떠한 기능도 없지만 CSS나 JS를 적용하기 위해 감싸주는 역할을 하는 태그가 필요하다. 이러한 태그 들에는 다음이 있다.

• div : 감싼 부분이 줄 바꿈 된다.

• span 줄 바꿈 되지 않는다.

  <span style="font-weight:bold;">Java Script</span>
  

그런데 만약, 본문의 여러 군데에 이렇게 수정해야 할 단어들이 많다고 하면 일일이 수정하기 불편할 것이다. 이를 아래처럼 HTML의 style tag 를 이용해 해결할 수 있다.

<html>
  <head>
    <style>
      .js {
        font-weight: bold;
        color: red;
      }
    </style>
    
  </head>
</html>
...

<body>
  <p>
    <span class="js">Javascript</span> is ...
  </p>
</body>

style tag 는 웹 브라우저에게 style tag로 감싼 코드가 CSS 코드라는 것을 알려주는 역할을 한다. 위와 같이 적으면 class가 “js” 인 모든 tag에 대해서 굵게, 그리고 색상을 Red로 한다는 뜻이다. 우리는 이 부분만을 수정하여 본문의 같은 class의 태그들인 감싼 글씨의 디자인을 바꿀 수 있다.

class 는 여러 태그를 그룹을 지을 때 사용하고, id 는 식별하기 위해 중복되지 않게 사용한다. class 선택자를 이용하여 효과를 주고 싶은 태그들을 광범위하게 그룹짓고 그 중에서 예외 처리를 하고 싶은 것들을 id 선택자를 이용하여 처리한다. 예를 들어, 아래와 같이 코드를 적으면 글씨의 색이 초록색이 된다.

<html>
  <head>
    <style>
      .js {
        font-weight: bold;
        color: red;
      }
      #first {
        color: green;
      }
    </style>
    
  </head>
</html>
...

<body>
  <p>
    <span id="first" class="js">Javascript</span> is ...
  </p>
</body>

추가로 다음과 같이 tag 선택자를 적을 수도 있다. 우선 순위는 id > class > tag 순이다.

<style>
  .js{
    ...
  }
  #first{
    ...
  }
  span{
    color:blue;
  }
</style>