What is CSS?

https://mozzang.tistory.com/3 (HTML이란?)을 먼저 보고 오길 바랍니다.

 

 

CSS : Cascading Style Sheet

 

??? 단어의 뜻을봐서는 감이 잘 안올 것이다.

 

자, 쉽게 말해보자면 CSS는 browser에게 웹사이트의 그 content가 어떻게 보여야하는지에 대해 알려주는 도구이다.

 

예를들면, HTML은 "browser야 이건 title이야" 라고 한다면

             CSS는 "browser야 그 title은 녹색이어야 해" 라고 하는 것이다.

 

             HTML은 "browser야 이건 사진(이미지)이야" 라고 한다면

             CSS는 "browser야 그 사진(이미지)는 가로 25px, 세로 100px 이어야해" 라고 하는 것이다.

 

             HTML은 "browser야 이건 link(하이퍼링크)야" 라고 한다면

             CSS는 "browser야 그 link에 마우스를 올리면 녹색으로 바뀌어야해" 라고 하는 것이다.

 

실제 예시를 보자.

▲ 기사 제목이 검은색이다. (=HTML)

 

▲  기사 제목에 마우스 커서를 올리면 녹색으로 변한다.(=CSS)

 

 

 

또 다른 비유를 들자면,

HTML은 웹사이트의 뼈대를 만든다고 했다면, CSS는 그 뼈대에 근육 or 살을 붙이는 것이다.

▲ HTML                                                          ▲ CSS

 

 

이처럼 CSS는 HTML을 좀 더 이쁘게 꾸미는 역할을 하는 것이다. CSS와 HTML은 단짝과 같은 존재이다.

 

또한 HTML은 CSS없이 존재할 수 있지만, CSS는 HTML없이 존재할 수 는 없다.

뼈 없이 근육과 살만으로 구성된다면 흐물흐물 해서 형태를 유지할 수 없지 않을까? 와 같은 맥락인 것이다.

 

CSS가 무엇인지 이해하는데 도움이 되었으면 한다.