CSS 기본 문법

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링 하면 되는지 브라우저에 설명하기 위한 언어이다.

 

HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center etc)가 존재해 CSS가 없이도 어느 정도의 스타일 표현이 가능했으나 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가되어 복잡하고 혼란스러운 언어가 되어 버렸다.

 

HTML5에서는 HTML은 정보와 구조화, CSS는 Styling의 정의라는 본연의 임무에 충실한 명확한 구분이 이루어졌다.

HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 있다. 그러나 HTML 없이 단독으로 존재하는 CSS는 의미 없다.

 

CSS3 관련 용어

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

CSS는 HTML 요소의 style(design, layout etc)을 정의하는 데 사용된다. 이를 위해 선행되어야 하는 것은 스타일을 적용하고자 하는 HTML 요소를 선택하는 것이다.

 

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

CSS Rule Set

위와 같은 구문을 Ruel Set(혹은 Rule)이라 하며 선택된 특정 HTML 요소를 어떻게 렌더링(Rendering)할 것인지 브라우저에 지시하는 역할을 한다. 위 CSS Rule set은 HTML 문서에 속해 있는 셀렉터를 통해 모든 h1 요소를 선택한 후 선택된 h1 요소의 스타일을 선언 블록에서 정의하고 있다.

 

이와 같은 Rule Set의 집합을 Style Sheet라 한다.

 

 

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

셀렉터로 HTML 요소를 선택하고 {} 내에 프로퍼티와 값을 지정하는 것으로 다양한 style을 정의할 수 있다. 프로퍼티는 표준 스펙으로 이미 지정된 것을 사용해야 하며 사용자가 임의로 지정할 수 없다. 여러 개의 프로퍼티를 연속해서 지정ㅇ할 수 있으며 세미콜론(;)으로 구분한다.

 

 

3. 값 (Value / 속성값)

셀렉터로 지정한 HTML 요소에 style을 적용하기 위해 프로퍼티를 사용했다. 프로퍼티의 값은 해당 프로퍼티에 사용할 수 있는 값을 '키워드'나 '크기 단위' 또는 '색상 표현 단위' 등의 특정 단위로 지정하여야 한다.

 

 

4. HTML과 CSS의 연동

HTML은 CSS를 포함할 수 있다. CSS를 가지지 않은 HTML은 브라우저에서 기본으로 적용하는 CSS(user agent stylesheet)에 의해렌더링된다.

• Link style: HTML에서 외부에 있는 CSS 파일을 로드하는 방식이다. 가장 일반적인 방식이다.
• Embedding style: HTML 내부에 CSS를 포함시키는 방식이다. 다만 Link style을 사용하는 편이 좋다.
• Inline style: HTML 요소 내에 style 프로퍼티를 사용해 CSS를 기술하는 방식이다. JavaScript가 동적으로 CSS를 생성할 때 사용하는 경우가 있다.

 

5. Reset CSS 사용하기

모든 웹 브라우저는 디폴트 스타일을 가지고 있어 CSS 없이도 작동하지만 웹 브라우저에 따라 디폴트 스타일이 상이하고 지원하는 tag나 style도 제각각이라 주의가 필요하다.

Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용하며, 브라우저별로 제각각인 디폴트 스타일을 하나로 통일시켜주는 역할을 한다.

 

자주 사용되는 Reset CSS는 다음과 같다.

• Eric Meyer’s reset
• normalize.css

 

 

 

 

*이 글은 poiemaweb의 콘텐츠를 필사한 글입니다.

출처:

https://poiemaweb.com/css3-syntax