오늘 작업하면서 이것저것 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와 같은 효과로 스타일을 덮을 수 있습니다.
.name { color:#000000;}
.name.name { color:#ff0000;}
요렇게 name을 빈칸없이 한번 더 붙이면 밑의 색상이 적용되지요~
그리고, !important는 한 번 사용하기 시작하면 그걸 덮기 위해 또 다른 !important를 붙여야 한다는 단점이 있습니다. 클래스를 연달아 두 번 사용하는 방법도 마찬가지고요~
왠만하면 먼저 선택자의 우선 순위를 이용하거나 아이디값으로 제어를 해보고 정 안되면 사용하시길 권장합니다.
제 아는 분이 어떤 업체 코딩을 외주작업했는데 !important 많이 썼다고 뭐라고 했다네요ㅎ
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기