CSS : 웹 문서의 스타일을 미리 저장해둔 시트
HTML과 따로 구분되어 웹 문서의 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꿔서 사용하는 등 편리하게 사용할 수 있다.
또한 반응형 웹 디자인을 적용하여 PC, 모바일 등 웹 브라우저의 크기가 다른 기기에서도 레이아웃을 자동으로 바꿔 줄 수 있다.
캐스케이딩(Cascading) 이란 스타일 시트에서 우선순위가 위에서 아래로 가는 계단식으로 적용된다는 의미로 사용된다.
즉 CSS는 우선순위가 있는 스타일 시트라고 볼 수 있다. 그렇기에 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정하는 것으로 스타일끼리의 충돌을 막을 수 있다.
스타일이 충돌하지 않게 하는 방법으로는 스타일 우선순위와 스타일 상속이 있다.
스타일 우선순위
스타일 규칙의 중요도와 적용 범위, 작성 순서에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다.
- 중요도
웹 브라우저에 내용을 표시할 때에 단순히 CSS 소스의 스타일만 적용되는 것이 아닌 컴퓨터 사용자(user)가 지정한 스타일, 웹 문서를 제작한 제작자(author)의 스타일, 웹 브라우저(browser)가 기본으로 정해놓은 스타일을 함께 사용한다.
사용자 스타일 → 제작자 스타일 → 브라우저 기본 스타일 순으로 중요도가 높다. - 적용 범위
중요도가 같은 스타일의 경우 스타일 적용 범위에 따라 우선순위가 정해진다.
스타일의 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아진다. 단, 스타일 규칙에 !important를 작성하면 그 스타일은 다른 스타일보다 우선순위가 높아진다.
!import → 인라인 스타일 → id 스타일 → 클래스 스타일 → 타입 스타일 순으로 우선 순위가 높다. - 작성 순서
중요도와 적용 범위가 같은 경우 스타일을 정의한 소스 순서로 우선순위가 정해진다.
나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씌운다.
스타일 상속
태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
웹 문서에서 사용하는 태그들은 서로 포함관계가 되어있다. 이때 포함하는 태그를 부모 요소, 포함되는 태그를 자식 요소라고 한다. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는데, 이것을 스타일 상속이라고 한다.
예를들어 <body>태그는 웹 문서에 사용한 모든 태그의 부모 요소이기 때문에 <body>태그 스타일에서 글자색이나 글꼴을 지정하면 그 스타일은 웹 문서 전체에 적용된다.
※배경색과 배경 이미지는 스타일 상속이 되지 않는다.
'웹 개발' 카테고리의 다른 글
| [CSS] 스타일과 스타일 시트 (0) | 2022.01.11 |
|---|---|
| [CSS] CSS 소스 경량화 (0) | 2022.01.11 |
| [HTML] 폼에서 사용하는 태그의 종류 (0) | 2022.01.03 |
| [HTML] <input> 태그의 주요 속성 (0) | 2021.12.30 |
| [HTML] <input> 태그의 type 속성 (0) | 2021.12.27 |