[CSS] CSS(Cascading Style Sheets)란? / CSS Rule Set

 

CSS(Cascading Style Sheets)란?

  - HTML, XML과 같은 구조화 된 문서(Document)를 화면, 종이에 어떻게 렌더링할것인지 정의하기 위한 언어

  - HTML의 각 요소(Element)의 style(design, layout etc)을 정의해 화면에 어떻게 렌더링 하면 되는지 브라우저에게

   설명하기 위한 언어

 

 

 

HTML5 이전버전과 현 버전의 차이

HTML5 이전버전	HTML5
- HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS가 없이도 어느정도의 스타일 표현 가능했음.  - 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가해 복잡하고 혼란스러운 언어였음.	HTML : 정보, 구조화  CSS : stylying의 정의  본연의 임무에 충실한 명확한 구분

 

 

HTML과 CSS는 각자 문법을 갖는 별개의 언어이다.

(HTML은 CSS를 포함할수 있지만 HTML없이 단독으로 존재하는 CSS는 의미가 없다)

 

 

---

CSS3 의 Rule set

 

 - 위와 같은 Rule Set의 집합을 스타일시트(Style Sheet)라 한다.

 - 셀렉터에 의해 특정 HTML 요소를 어떻게 Rendering할 것인지 브라우저에 지시하는 역할을 한다.

 

1.셀렉터 (Selector, 선택자)

   - CSS는 HTML 요소의 style(design, layout etc)를 정의하는데 사용.

   - 스타일을 적용하고자 하는 HTML요소를 선택하기 위해 CSS에서 제공하는 수단.

   - CSS Rule set은 HTML 문서에 속한 셀렉터를 통해 h1요소를 선택한 후 h1요소의 스타일을 선언 블록에서 정의한다.

 

 

2. 프로퍼티 (Property / 속성)

 - 셀렉터로 HTML 요소를 선택하고 {}냐에 프로퍼티(속성)와 값을 지정하는 것으로 다양한 style 정의할 수 있음.

 - 표준스펙으로 이미 지정되어 있는 것을 사용하여야 한다.

 - 여러개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론(;)으로 구분한다.

 

 

p {        color : ...;        font-size : ...; }

 

3. 값 (Value / 속성값)

   - 프로퍼티의 값은 해당 프로퍼티에 사용할 수 있는 값을 "키워드"나 "크기 단위" 또는 "색상 표현 단위"등

    특정 단위로 지정한다.

 

p {        color : orange;        font-size : 16px; }