일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- debouncing
- 조건부스타일
- alias설정
- ?? #null병합연산자
- QueryClient
- createPortal
- es6
- 부모패딩
- 부모요소의 패딩 무시
- 함수형프로그래밍
- react
- parent padding
- tailwindCSS
- BFC
- ignore padding
- accordian
- 서초구보건소 #무료CPR교육
- CustomHook
- DOM
- BlockFormattingContext
- Carousel
- 문제해결
- 리액트
- ㅡ
- transition
- vite
- useQueryClient
- 화살표2개
- 제어컴포넌트
- twoarrow
Archives
- Today
- Total
프론트엔드 첫걸음
크롬디버깅 - 적용되고 있는 css 우선순위 확인하기 본문
css 파일 내에 같은 요소를 두고 여러 줄에 걸쳐서 효과를 주게 되는 때가 있다.
그러면 어떤 것이 우선순위인지, 왜 내가 의도한 결과가 나오지 않았는지 확인해야한다.
이때 크롬디버깅 툴을 사용한다.
내가 확인하고 싶은 요소 우클릭-> 검사 하면 내가 확인하고 싶은 요소의 css 스타일을 확인할 수 있다.
여러 줄에 걸쳐서 적용된 효과가 우측에 우선순위가 높은 순서대로 나타난다.
예)
'개발 공부 > CSS' 카테고리의 다른 글
부트스트랩 반응형 레이아웃 (0) | 2022.07.08 |
---|---|
애니메이션 효과가 들어간 상품 레이아웃 만들기 (0) | 2022.07.07 |
font awesome 라이브러리 설치방법 (0) | 2022.07.07 |
폰트 부드럽게 처리하기 (0) | 2022.07.06 |
@font-face (0) | 2022.07.06 |