[위클리페이퍼 - 1주차]
CSS (Cascading Style Sheets) 라는 이름에서부터 알 수 있듯이(몰랐지만?)
최종적으로 적용할 CSS속성을 결정할때 CSS 규칙을 순서에 따라 합쳐서 적용한다.
즉 우선순위가 높은 규칙을 우선적으로 적용한다 (계단식 폭포처럼)
순서는?
개발자 도구에서 위에 있는 내용이 아래 적힌 내용을 덮어서 적용된다
user agent stylesheet (브라우저 개발자도구에서 확인할 수 있는 기본 CSS) : 우선순위 낮음 -> 덮어쓸 수 있다.
인라인 스타일 : 코드에 직접 작성 -> 가장 우선순위 높음
CSS에서는 나중에 쓰여있는 코드일수록 우선순위가 높다.
선택자의 명시도 seclector specificity 가 높을수록 (선택자 id, class, 태그 등 개수..) ▷ 구글 'specificity calculator'
MDN 명시도 내용 참고해보기
https://developer.mozilla.org/ko/docs/Web/CSS/Specificity
스타일 적용이 잘 안될 때 꿀팁 !
잘못 적용된 스타일이 있다면 개발자 도구에서 해당 속성을 검색해서 찾아볼 수 있다.
상속
해당 선택자에 직접 작성된 css > user agent stylesheet > 가까운 조상(부모)일수록 cascading 순위가 높다
개발자 도구에서 상속된 내용을 조사할 수 있음
모든 속성이 상속되는 것은 아님
'개발 공부 일지 > HTML_CSS' 카테고리의 다른 글
input:focus border 스타일 지정이 안된다면? (0) | 2024.07.10 |
---|---|
Font awesome 적용하기 (0) | 2024.07.08 |
CSS : 레이아웃 (0) | 2024.07.05 |
HTML 핵심개념 (0) | 2024.07.04 |
HTML/CSS 웹페이지 작성하기 (0) | 2024.07.02 |