!important 의 활용에 대해서 알아 볼꺼예요~
css는 순차적으로 적용되기 때문에 중복 적용 될 경우에는 가장 나중에 작성한 값이 적용됩니다.
예를들어 class="name" 라는 스타일이 적용되었을때
.name { color:#000000;}
.name { color:#ff0000;}
라고 중복되었을 경우 #ff0000에 색상이 적용되게 됩니다.
이 같은 경우에 뒤에 작성된 값이 아닌 앞에 작성된 값을 적용시키고 싶을때 우리는 !important 를 사용하게 됩니다.
!important 사용법은 {속성 : 속성값 !important; }와 같이 속성값 뒤에 !important를 붙여 주시면 됩니다.
위의 예로 표현한다면,
.name { color:#000000 !important;}
.name { color:#ff0000;}
이렇게 사용 됩니다.
댓글 3개
11년 전
간단하게 잘 정리 해주셨네요 감사합니다.
10년 전
참고로, 클래스명을 한번 더 선언하면 !important와 같은 효과로 스타일을 덮을 수 있습니다.
.name { color:#000000;}
.name.name { color:#ff0000;}
요렇게 name을 빈칸없이 한번 더 붙이면 밑의 색상이 적용되지요~
그리고, !important는 한 번 사용하기 시작하면 그걸 덮기 위해 또 다른 !important를 붙여야 한다는 단점이 있습니다. 클래스를 연달아 두 번 사용하는 방법도 마찬가지고요~
왠만하면 먼저 선택자의 우선 순위를 이용하거나 아이디값으로 제어를 해보고 정 안되면 사용하시길 권장합니다.
제 아는 분이 어떤 업체 코딩을 외주작업했는데 !important 많이 썼다고 뭐라고 했다네요ㅎ
.name { color:#000000;}
.name.name { color:#ff0000;}
요렇게 name을 빈칸없이 한번 더 붙이면 밑의 색상이 적용되지요~
그리고, !important는 한 번 사용하기 시작하면 그걸 덮기 위해 또 다른 !important를 붙여야 한다는 단점이 있습니다. 클래스를 연달아 두 번 사용하는 방법도 마찬가지고요~
왠만하면 먼저 선택자의 우선 순위를 이용하거나 아이디값으로 제어를 해보고 정 안되면 사용하시길 권장합니다.
제 아는 분이 어떤 업체 코딩을 외주작업했는데 !important 많이 썼다고 뭐라고 했다네요ㅎ
10년 전
네임값 중복으로도 되는군요 좋은 정보 알았습니다 :)
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 430 | 19년 전 | 4135 | ||
| 429 | 19년 전 | 3327 | ||
| 428 | 19년 전 | 4150 | ||
| 427 | 19년 전 | 3495 | ||
| 426 | 19년 전 | 3127 | ||
| 425 | 19년 전 | 3434 | ||
| 424 | 19년 전 | 2462 | ||
| 423 | 19년 전 | 2884 | ||
| 422 | 19년 전 | 2380 | ||
| 421 | 19년 전 | 3736 | ||
| 420 | 19년 전 | 4762 | ||
| 419 | 19년 전 | 3835 | ||
| 418 |
 醉生夢死™ |
19년 전 | 1771 | |
| 417 | 19년 전 | 2772 | ||
| 416 | 19년 전 | 2417 | ||
| 415 | 19년 전 | 2622 | ||
| 414 | 19년 전 | 4435 | ||
| 413 |
醉生夢死™ |
19년 전 | 2629 | |
| 412 | 19년 전 | 3073 | ||
| 411 |
 강강술냄세 |
19년 전 | 3011 | |
| 410 |
 somang |
19년 전 | 3716 | |
| 409 |
 Photofly |
19년 전 | 3657 | |
| 408 |
강강술냄세 |
19년 전 | 1880 | |
| 407 | 19년 전 | 2249 | ||
| 406 | 19년 전 | 2814 | ||
| 405 | 19년 전 | 2480 | ||
| 404 | 19년 전 | 4332 | ||
| 403 | 19년 전 | 3327 | ||
| 402 |
NeoGenesis
|
19년 전 | 4119 | |
| 401 | 19년 전 | 2633 | ||
| 400 |
 꿈꾸는비행기 |
19년 전 | 2534 | |
| 399 | 19년 전 | 2986 | ||
| 398 | 19년 전 | 2521 | ||
| 397 | 19년 전 | 2812 | ||
| 396 | 19년 전 | 2517 | ||
| 395 | 19년 전 | 3223 | ||
| 394 | 19년 전 | 1762 | ||
| 393 | 19년 전 | 3023 | ||
| 392 | 19년 전 | 2292 | ||
| 391 | 19년 전 | 2197 | ||
| 390 | 19년 전 | 2311 | ||
| 389 | 19년 전 | 2668 | ||
| 388 | 19년 전 | 2213 | ||
| 387 | 19년 전 | 4503 | ||
| 386 |
醉生夢死™ |
19년 전 | 2708 | |
| 385 |
醉生夢死™ |
19년 전 | 2520 | |
| 384 | 19년 전 | 3053 | ||
| 383 | 19년 전 | 3084 | ||
| 382 | 19년 전 | 3136 | ||
| 381 |
 태엽푸는새 |
19년 전 | 2655 | |
| 380 |
태엽푸는새 |
19년 전 | 3038 | |
| 379 | 19년 전 | 2565 | ||
| 378 | 19년 전 | 2238 | ||
| 377 | 19년 전 | 2801 | ||
| 376 | 19년 전 | 2488 | ||
| 375 |
태엽푸는새 |
19년 전 | 2582 | |
| 374 | 19년 전 | 3838 | ||
| 373 | 19년 전 | 3292 | ||
| 372 | 19년 전 | 5014 | ||
| 371 |
세은아빠2
|
19년 전 | 2440 | |
| 370 | 19년 전 | 4517 | ||
| 369 | 19년 전 | 3127 | ||
| 368 | 19년 전 | 2920 | ||
| 367 | 19년 전 | 3748 | ||
| 366 | 20년 전 | 2674 | ||
| 365 | 20년 전 | 3766 | ||
| 364 | 20년 전 | 4038 | ||
| 363 | 20년 전 | 3473 | ||
| 362 | 20년 전 | 3507 | ||
| 361 | 20년 전 | 4130 | ||
| 360 |
hwatta
|
20년 전 | 2390 | |
| 359 | 20년 전 | 5132 | ||
| 358 | 20년 전 | 3679 | ||
| 357 | 20년 전 | 2624 | ||
| 356 |
sdesign1s
|
20년 전 | 2304 | |
| 355 | 20년 전 | 2780 | ||
| 354 | 20년 전 | 3045 | ||
| 353 | 20년 전 | 2814 | ||
| 352 |
 bbking |
20년 전 | 5796 | |
| 351 |
 damoa.biz |
20년 전 | 2736 | |
| 350 |
bbking |
20년 전 | 4322 | |
| 349 |
hwatta
|
20년 전 | 2217 | |
| 348 | 20년 전 | 7333 | ||
| 347 | 20년 전 | 2437 | ||
| 346 | 20년 전 | 3535 | ||
| 345 | 20년 전 | 4336 | ||
| 344 | 20년 전 | 2681 | ||
| 343 | 20년 전 | 3942 | ||
| 342 | 20년 전 | 3091 | ||
| 341 | 20년 전 | 4124 | ||
| 340 |
damoa.biz |
20년 전 | 5183 | |
| 339 |
damoa.biz |
20년 전 | 4263 | |
| 338 | 20년 전 | 5903 | ||
| 337 | 20년 전 | 2068 | ||
| 336 |
damoa.biz |
20년 전 | 3361 | |
| 335 |
damoa.biz |
20년 전 | 3575 | |
| 334 |
damoa.biz |
20년 전 | 2969 | |
| 333 |
hwatta
|
20년 전 | 2474 | |
| 332 | 20년 전 | 4678 | ||
| 331 | 20년 전 | 2303 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기