css가 충돌이 됬을때
오늘 작업하면서 이것저것 css가 많이 사용되고 오픈코드들 css를 호출하면서 충돌이 너무 많아서
그냥 !important 이걸 사용했습니다.
!important : 다른것 css순서 무시. 무조건 적용
css코딩할때 위에서 아래로 하나씩 코딩을 하시는데
아래에 있는 css클래스가 먼저 적용이 됩니다.
.test {border:1px solid #ddd; width:20px;}
.test {border:1px solid #ddd; width:120px;}
이렇게 되면 test 클래스에 넓이는 width:120px이 적용되어집니다.
하지만 여기서
.test {border:1px solid #ddd; width:20px !important;}
.test {border:1px solid #ddd; width:120px;}
이와같이 했을때에는 넓이가 20px로 사용이 되니 참고하시면서
분명 작업을 했는데도 틀이 깨지거나 안맞는다하면 해당 css속성코드에 !important를 사용해보시기 바랍니다
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 4개
그래도 뒤로가기 버튼 꾹꾹 눌러서 살려냈습니다.ㅎㅎ
-----
참고로, 클래스명을 한번 더 선언하면 !important와 같은 효과로 스타일을 덮을 수 있습니다.
.name { color:#000000;}
.name.name { color:#ff0000;}
요렇게 name을 빈칸없이 한번 더 붙이면 밑의 색상이 적용되지요~
그리고, !important는 한 번 사용하기 시작하면 그걸 덮기 위해 또 다른 !important를 붙여야 한다는 단점이 있습니다. 클래스를 연달아 두 번 사용하는 방법도 마찬가지고요~
왠만하면 먼저 선택자의 우선 순위를 이용하거나 아이디값으로 제어를 해보고 정 안되면 사용하시길 권장합니다.
제 아는 분이 어떤 업체 코딩을 외주작업했는데 !important 많이 썼다고 뭐라고 했다네요ㅎ
부트스트랩 코드를 모두 익힌 상태에서 충돌시켜서 디자인변경시에 쓰기에
자신의코드는 몇안됩니다. 그럴때 유용합니다 ㅎ 이중클래스는 한수배우네요 ㅎ
완전대박 감사합니다.알기쉽게 정리해주셔서 좋아요!
!important 최후의 수단이기 때문에 !important 마저 꼬이면 나중에 처리 곤란해집니다.