css란 무엇일까?
- (Cascading Style Sheets), 즉 웹 페이지를 꾸미려고 작성하는 코드이다.
그렇다면 css가 웹 페이지를 꾸밀 때 쓰는 코드인 건 알겠는데 Cascading은 뭐고 정확히 css가 뭐야?
라고 나는 의문을 가지게 되었고 그래서 나는 이번에 css에 대해 알아보려고 한다.
먼저 Cascading(캐스케이딩)은 폭포, 위에서 아래로 쏟아지는 이라는 뜻을 가지고 있는데
css가 Cascading Style Sheets 인 만큼, 캐스케이딩 원리가 가장 중요하게 적용이 된다.
css를 통해 색, 크기, 여백, 배치 등을 조정할 수 있는데 웹 페이지를 제작 하다 보면
css가 정말 어마어마하게 길어지는데 무수히 많은 스타일들을 중첩해서 적용이 가능하다보니
동일한 속성일 경우에는 '우선순위'에 따라 적용이 되며 우선순위가 높은 스타일부터
위에서 아래로 하나씩 적용이 된다.
캐스케이딩에는 크게 2가지의 원칙을 통해 어떤 요소에 스타일을 어떻게 적용할 지 결정 된다.
1. 스타일 우선 순위 / 2. 스타일 상속
먼저 스타일 우선 순위부터 알아보자면 스타일 요소는 각각 우선 순위를 가지고 있고
여러개의 스타일이 있다면 우선 순위가 가장 높은 스타일이 적용 된다.
스타일 우선 순위는 아래 3가지 요소를 통해 우선 순위를 결정한다.
1. 중요도 - 스타일이 선언된 위치에 따라서 우선 순위가 매겨지는 것.
2. 명시도 - 셀렉터가 가리키는 것이 명확할수록 우선 순위를 높게 주는 것.
3. 코드 순서 - 코드에서 가장 마지막에 등장한 속성을 최우선으로 적용하는 것.
두번째 스타일 상속은 태그들이 어떻게 포함 되었는지에 따라 어떤 스타일을 적용할 지 결정하는 원칙인데
스타일 상속은 단어 그대로 스타일이 상속 되는 것.
부모 요소 안에 자식 요소가 있으면 부모 요소에게만 스타일을 적용해도 자동으로 자식요소 또한
부모 요소의 스타일을 그대로 상속 받아 적용 되는 것이다.
<div style='color: red'>
<p>p는 자식입니다.</p>
</div>
예를들어 위 코드처럼 div에 color: red를 선언하면 p에게는 아무것도 선언 하지 않더라도
부모 요소의 스타일을 그대로 상속 받아 적용 되기 때문에
실제로 텍스트를 가지고 있는 p의 color가 red가 된다.