CSS는 왜 중요한가?
CSS는 HTML의 스타일이 표시되는 방법을 기술하는 언어이다. 디자이너가 따로 존재하는 상황에서 개발자가 CSS를 다루는 것이 중요할까?라고 생각할수도 있다. 그러나 CSS를 비롯한 기본적인 UI설계 능력은 직무를 떠나서 매우 중요하다. 사용자를 고려하지 않은 어플리케이션은 아무도 사용하지 않을 것이다. 프론트엔드 개발자에게 필요한 디자인 관련 역량은 다음과 같다고 알려진다.
- 레이아웃 디자인
- 타이포그래피
- 정렬과 배색에 관련된 감각
- UX에 대한 고민
이러한 역량을 충분히 발휘하기 위해서라도 CSS를 잘 알아두는 것은 중요하다.
CSS의 문법
div (선택자) {
background-color(속성): #ffffff; (값)
font-size(속성): 20px; (값)
}CSS 문법은 크게 선택자(selector), 속성(property), 값(value)의 형태로 이루어져 있으며, 객체와 비슷한 형태로 이루어진다. 기본적으로 CSS의 모든 디자인은 선택자를 통해 해당 부분을 선택하여 속성값을 지정하는 원리로 선택자의 종류와 우선순위만 정리하면 어렵지 않게 작성할 수 있다.
선택자와 우선순위
선택자는 다음과 같이 크게 4가지로 나눌 수 있다.
- HTML 요소 선택자 (1점)
- 클래스(class) 선택자 (10점)
- 아이디(id) 선택자 (100점)
- 그룹(group) 선택자 (복합적)
HTML요소 선택자의 경우 div나 h2와 같은 태그를 그대로 선택자로 사용한다. 이러한 요소 선택자는 가장 낮은 우선순위를 가진다.
class선택자의 경우 .class_name과 같이 .으로 시작하며 HTML요소 선택자보다 높지만 id선택자에 비해 낮은 우선순위를 가진다. class선택자는 많은 요소에서 쓰일 때에 사용한다.
id선택자의 경우 #id_name과 같이 #을 이용하며 가장 높은 우선순위를 가진다. 또한 id선택자는 하나의 문서에서 한 요소에만 사용되어야 한다.
그룹 선택자의 경우 나머지 선택자들의 묶음으로 구성되며 우선순위 또한 포함된 선택자들의 합으로 계산된다. 그 예로 .items li.item1의 경우 class선택자 2개와 HTML요소 선택자 1개로 이루어져 있으므로 21점의 우선순위를 가진다.
그렇다면 HTML 문서 안에서 직접 CSS 속성을 지정하는 인라인 선언의 경우는 어떠한 우선순위를 가지는가? 인라인 선언은 위의 모든 선택자에 우선하여 적용된다(1000점). 따라서 다음과 같이 HTML 문서에 직접 스타일을 지정하는 일은 추천하지 않는다.
<div style="color: red;">이보다 높은 우선순위는 바로 !important로 모든 경우에 우선하여 적용되며(99999999...점) 이를 남발할 경우 순위 개념이 무의미해질 수 있기에 사용을 자제해야 한다.
