웹사이트를 계속 유지보수 하다보면 웹사이트를 계속 유지보수 하다보면 파일이 많아지고 어디에 무엇을 썼는지 찾기 힘들어지고, CSS가 안먹히는 경우가 종종생기고 합니다. 그럴때 중요한 것중에 하나가 CSS 우선순위 일것 같습니다. 우선순위에서 밀리면 CSS가 적용되지 않기 때문이예요!
요건 CSS적용 안될 때 해볼 만한 것들에 적었던 포스팅이예요!
2020/03/16 - [퍼블리싱/HTML&CSS] - [CSS]CSS가 안먹을때 해볼만한 것들
[CSS]CSS가 안먹을때 해볼만한 것들
유지보수를 하다 보면 내가 정확히 쓴 것 같은데 CSS가 안 먹힐 때가 많다. 그럴 때 해볼 만 것들을 적어보려고 한다. CSS가 안먹을 만한 이유 01. 캐시문제 02. 그전에 쓰였던 CSS와 충돌 03. 겹쳐서 ��
ddorang-d.tistory.com
이번 포스팅은 CSS 우선순위에 대해 적어보아요!
CSS 적용 우선 순위
1. 나중에 작성된(밑에 작성된) 스타일이 먼저 작성된(위에 작성된) 스타일보다 우선순위가 높습니다.
똑같은 선택자에게 적용하는것도 밑에 적은 스타일이 적용되고 위에 적었던 스타일은 무시됩니다.
2. !important > inline style > id > class 또는 attribute 순으로 우선순위가 높습니다.
똑같은 우선순위가 적용되었다면 더 많이 쓴 것이 더 우선순위가 높습니다.
!important 란
!important는 강제로 우선순위를 부여합니다. !important를 같은 속성에 여러번 선언하면 원래의 순서로 돌아갑니다. 또한 !important는 강제로 우선순위를 적용해주는거 이기 때문에 자주 사용하는걸 지양합니다. 다른 우선순위를 적용해 수정할 수 있는 부분을 적용했는데도 잘 되지 않을때만 써주는 것이 좋습니다.
'인라인 스타일'는 유지보수 쉽지 않기 때문에 잘 사용하지 않는 것처럼 !important는 남발하지 않는 것이 좋아요!
*!important는 제거하고 하고 싶을땐, 한번 더 적으면 기존 !important가 힘을 발휘하지 않게 됩니다.
*!important가 적용되지 않을 땐 여러번 적지 않았는지, 태그가 맞게 적용되었는지 확인해 볼 필요가 있어요.
사용예
|
1
2
3
|
.box01{background-color: red}
.box01{background-color: pink} //이게
|
cs |
- 두번째 줄이 적용됨!
|
1
2
3
|
.box01{background-color: red!important} //이게 적용됨
.box01{background-color: pink}
|
cs |
- 먼저 쓰여졌지만 !important를 적어 우선순위가 높음
'퍼블리싱 > HTML&CSS' 카테고리의 다른 글
| CSS로 삼각형안에 이미지 넣기 (0) | 2020.11.10 |
|---|---|
| [CSS/JQUERY] 풀스크린 메뉴( 화면 꽉찬 메뉴) 만들기 (0) | 2020.09.03 |
| [CSS]background-image 안나올때 (0) | 2020.07.29 |
| [CSS] 배경이미지로 아이콘 한번에 넣기 (0) | 2020.07.23 |
| [CSS]배경이미지에만 OPACITY 적용(multiple효과) (0) | 2020.06.30 |
