CSS 핵심개념(6)

깨진알·2023년 11월 24일

CSS

목록 보기
6/10

CSS 핵심개념(6)

캐스케이드

케스케이딩(Cascading)이라고도 하며, "여러 스타일 시트를 결합하고 이들 사이의 충돌을 해결하는 프로세스"의 의미를 가지고 있다.

캐스케이드 순서 및 우선순위

  • 중요성 : 인라인 캐스케이드(HTML 내에서 작성한 파일) > CSS 파일 > User Agent Stylesheet(브라우저 기본 제공)
  • 코드 상의 순서 : 나중에 쓴 것일수록 우선순위가 높다. (같은 선택자가 있을 경우, 나중에 작성한 선택자의 우선순위가 더 높다.)
  • 명시도의 점수가 높을수록 우선순위가 높다.
  • 명시도 : ID개수, Class개수, 요소개수를 순서대로 나열해서 점수를 매기며 앞의 숫가자 클수록 우선순위가 높다. 즉, 복잡할수록 명시도가 높아져 순위가 높아진다.
.flight-card .footer > a {
  color: #1a345e;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-left: 24px;
  text-decoration: none;
}

/*
.flight-card .soldout {
  color: #dce0e8;
}
*/

.flight-card .footer > a.soldout {
  color: #dce0e8;
}

상속

상속받은 속성들은 가까운 조상일수록 우선순위가 높다.

profile
프론트엔드 지식으로 가득찰 때까지

0개의 댓글