돼

css가 충돌이 됬을때

· 2015-06-10 (수) 17:27:41 · 4804 · 4

오늘 작업하면서 이것저것 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 최후의 수단이기 때문에 !important 마저 꼬이면 나중에 처리 곤란해집니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
15-12-13 조회 2,528
15-12-13 조회 2,943
15-12-11 조회 2,603
15-12-11 조회 2,564
15-12-11 조회 2,569
15-12-10 조회 2,525
15-12-10 조회 2,586
15-12-10 조회 2,559
15-12-03 조회 3,203
15-12-03 조회 2,718
15-11-25 조회 2,798
15-11-09 조회 3,205
15-11-04 조회 2,968
15-06-09 조회 4,094
15-05-06 조회 5,090
15-03-28 조회 4,575
14-12-05 조회 4,996
14-10-25 조회 5,092
14-10-13 조회 4,269
14-10-03 조회 6,258
14-09-19 조회 4,962
14-09-18 조회 4,050
14-09-13 조회 4,614
14-09-03 조회 5,601
14-08-26 조회 4,207
14-08-26 조회 4,010
14-08-26 조회 3,977
14-08-11 조회 6,502
14-08-06 조회 4,126
14-08-06 조회 3,723
14-08-06 조회 3,936
14-08-01 조회 6,304
14-08-01 조회 3,842
14-07-30 조회 4,440
14-06-28 조회 5,164
14-06-28 조회 4,436
14-05-11 조회 4,589
14-05-09 조회 4,949
14-05-09 조회 7,707
14-04-30 조회 4,329
14-04-27 조회 4,194
14-04-25 조회 4,896
14-04-21 조회 3,874
14-04-21 조회 5,005
14-04-10 조회 4,603
14-04-01 조회 6,157
14-03-03 조회 3,532
14-02-25 조회 5,921
14-02-14 조회 5,195
14-02-13 조회 4,951
14-01-03 조회 4,445
13-12-06 조회 3,766
13-11-22 조회 5,522
13-11-18 조회 4,026
13-10-02 조회 4,447
13-10-02 조회 3,695
13-10-02 조회 3,961
13-10-02 조회 3,816
13-10-02 조회 4,182
13-09-16 조회 8,028
13-09-16 조회 5,395
13-08-18 조회 5,426
13-07-11 조회 4,061
13-07-10 조회 4,691
13-07-09 조회 4,729
13-07-09 조회 4,987
13-07-04 조회 4,486
13-07-04 조회 4,124
13-07-04 조회 4,238
13-07-01 조회 4,726
13-07-01 조회 4,558
13-07-01 조회 6,831
13-06-23 조회 4,378
13-06-05 조회 3,626
13-05-29 조회 4,868
13-05-10 조회 4,273
13-04-05 조회 4,895
13-04-05 조회 6,585
13-04-05 조회 1.1만
13-04-05 조회 7,175
13-04-05 조회 6,564
13-03-31 조회 5,835
13-03-31 조회 4,162
13-03-28 조회 4,523
13-03-28 조회 6,719
13-03-28 조회 9,199
13-03-28 조회 4,336
13-03-24 조회 3,950
13-03-21 조회 4,626
13-03-21 조회 1.8만
13-03-14 조회 3,934
13-03-10 조회 4,745
13-03-10 조회 4,506
13-03-10 조회 4,205
13-03-08 조회 5,260
13-03-08 조회 4,367
13-03-03 조회 5,025
13-03-03 조회 7,475
13-03-03 조회 4,219
13-03-03 조회 1.1만