[CSS] ③ CSS 우선순위와 명시도(Specificity)
▶우선순위와 명시도(Specificity) 한 요소를 가리키는 여러 선택자의 스타일이 한 번에 적용되어 적절한 스타일을 적용하는 데에 어려움을 겪은 적이 있을 것입니다. 선택자가 여러 개이고, CSS를 여러 파일에 작성했다면 이런 문제는 더 자주 발생합니다. 이제부터 각 스타일이 한 요소에 중첩되는 상황에서 어떤 스타일이 우선순위로 적용되는지 살펴보겠습니다 :) ▷마지막에 작성된 스타일이 적용된다 div { color: blue; color: red; } 위의 코드처럼 한 선택자에 같은 스타일 프로퍼티를 지정하면 상단에 작성된 스타일은 상쇄되어 제일 마지막에 작성된 스타일이 우선순위로 적용됩니다. 즉 여기서는 color가 red로 적용됩니다. 혼란을 야기하지 않도록 위의 코드처럼 불필요한 스타일 프로퍼티..
프론트엔드/CSS
2022. 7. 6. 15:52
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 인프런
- 디프만
- 데이터분석
- rtl
- 프론트엔드 공부
- testing
- 파이썬
- 딥러닝
- frontend
- styled-components
- 자바
- Python
- react-query
- 스타일 컴포넌트 styled-components
- 자바스크립트
- 리액트 훅
- CSS
- jest
- 타입스크립트
- TypeScript
- 프론트엔드
- 자바스크립트 기초
- 머신러닝
- HTML
- JSP
- react
- 리액트
- 프론트엔드 기초
- 프로젝트 회고
- next.js
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함