웹에서는 CSS가 스타일과 관련된 기능을 전담합니다. 물론 HTML에서도 가능하지만 CSS에서 하는 것 보다 조화롭게 하지는 못합니다.
CSS의 의미와 구성요소
CSS는 Cascading Style Sheets의 약자입니다. Style Sheets는 스타일 문서들이라고 해석됩니다. 즉, CSS는 웹페이지의 스타일을 정리해둔 문서인 것입니다. 또한 Cascade는 폭포가 되어 떨어지다의 의미로 CSS는 스타일 적용시 우선순위를 가지고 순차 적용을 합니다.
CSS의 기본 구조
CSS는 일종의 웹에 적용할 스타일 명세서입니다.
1. 선택자(Selector)
먼저 <article>태그를 가리키는 그림 속의 article을 선택자(Selector)라고 부릅니다. 선택자는 일종의 연결 통로입니다.
즉, CSS를 적용할 때 스타일을 지정할 특정 HTML 요소를 선택하는 역할을 수행합니다.
2. 속성(Property)
CSS에서 프로퍼티는 지정 또는 변경하고 싶은 스타일 속성의 이름입니다. 올바르게 사용을 해야 원하는 스타일을 잘 적용할 수 있습니다.
font-size, color , backgroup ,...등 다양하게 사용 가능합니다.
3. 값(Value)
마지막으로 16px, blue 에 해당하는 부분은 값(Value)라고 하며 값은 다음과 같이 나뉩니다.
-
CSS에 정의된 특정 키워드(
blue,block등) -
수치와 특정 단위(
px,%,em,rem,vh,vw등)
이러한 값들은 프로퍼티와 짝을 이루어 사용됩니다. 또한 각 프로퍼티에 허용되는 값의 종류가 정해져 있으므로 정확히 알고 사용해야 합니다.
4. 선언 블록(Declaration Block)
선택자 뒤에 위치한 {}(중괄호) 안의 한 블록 또는 덩어리를 선언 블록(Declaration block)이라고 말합니다. 중괄호로 시작과 끝을 나타내며 블록 안의 내용을 한 단위로 하고 각각 적혀 있는 선택자에 한해 스타일이 적용됩니다.
한편 CSS에서는 프로퍼리와 값으 짝을 선언(Declaration)이라고 부릅니다.
또한 선언 블록 내에서 다른 선언과의 구분은 ;(세미콜론)으로 구분됩니다. 각 선언이 끝날 때마다 선언이 끝나는 구분을 짓지 않는다면 스타일이 제대로 반영되지 않을 수 있습니다.
출처)
groom-edu
해당 내용은 k-digital credit 구름 강의 내용을 보고 정리한 내용입니다.
