캐스케이딩
CSS 는?
캐스케이딩의 기준 3가지
중요도
CSS가 선언된 위치에 따라 우선순위가 결정됨.
위의 세가지가 있을 때
개발자가 제일 높고 사용자 브라우저 순서브라우저 스타일 시트
h1에는 폰트 사이즈
a 에는 밑줄과 색
button 에는 배경,보더 등이 적용되어있음
위같은것들은 브라우저 시트에 기본적으로 내장되어있는 세팅사용자 스타일 시트
사용자 폰트 지정
고대비 모드 사용 등본인의 취향이나 편이에 맞게 설정해 놓은 스타일 옵션
개발자 스타일 시트
말 그대로 개발자가 입력해 넣은 스타일
개발자 스타일 시트 내에서도 중요도가 한번 더 나뉨
구체성 (명시도)
id는 딱 하나만 있을 수 있기에 가장 높음
예시
위처럼 부여 했을 때 적용되는것은 가장 우선순위가 높은 바이올렛으로 적용됨
명시도 끌어 올리기
가장 낮은 전체 선택자에 !important 를 추가하면
적용외됨
하지만 해당 기능을 사용하면 코드의 우선순위들이 꼬일 가능성도 있으니
가급적 사용하지 않는게 좋음.
선언 순서
나중에 선언한 스타일이 우선 적용
대상이 동일할 경우
가장 마지막에 선언한 내용이 적용됨
