CSS 시작

less than 1 minute read


CSS

cascading style sheets 의 줄임말이다.

웹 페이지를 만드는 언어인 html은 단순히 정보를 표현하는 언어에서 점차 디자인 뱡향으로도 업데이트를 하기 시작했다.

시간이 지나고 html이 중요한 언어로 자리잡으면서 근본으로 돌아가 정보에 집중하기로 했고 디자인은 CSS라는 별도의 언어를 만들어 처리하기로 하였다.


style

<li><font color="red">HTML</font></li>
<li><font color="red">CSS</font></li>
<li><font color="red">JavaScript</font></li>
  • HTML
  • CSS
  • JavaScript

  • html에서 디자인 까지 처리하기 위해서 만든 태그인 font는 더 이상 사용하지 않고 css를 사용한다.

    css를 사용할 때는 먼저 이 언어를 사용한다는 명시적 표시가 필요하다.

    그 표시 방법이 <style> ~ </style> 태그이다. 이 영역에서는 html이 아닌 css코드로 해석하게 된다.

    <style>
      /* 이 웹페이지에 있는 li태그의 폰트 컬러를 붉은색으로 바꾼다.*/
      li{
        color:red;
      }
    </style>
    
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    
  • HTML
  • CSS
  • JavaScript

  • 이처럼 html과 css를 사용하여 표현하면 정보와 디자인의 분리를 명확하게 할 수 있어 정보만 필요로하는 작업을 더 원활하게 수행할 수 있게된다.

    뿐만 아니라 색상을 바꿀 경우 font를 사용했다면 모든 색상을 하나씩 바꾸어 주어야하지만 css에서는 하나의 색상 정보만 바꾸어 주면 된다.

    이렇게 css는 강력한 장점을 가지고 있기 때문에 기존 문법과 사용이 다름에도 html을 사용한다면 필수적으로 알아야하는 언어이다.