외부 CSS가 적용 안 되거나 특정 영역만 적용되는 이유
이전 포스팅에서 CSS 버튼 만들기에 대해 알아보았습니다. 사이트에서 원하는 스타일의 버튼을 만들어 소스코드를 적용해도 백그라운드 혹은 글자색의 색상이 적용되지 않을 경우 해결방법에 대해 알아보겠습니다.
CSS 사이트에서 원하는 스타일을 만든 뒤 소스코드를 적용해도 기댓값대로 적용되지 않는 이유는 CSS의 우선순위 때문에 그렇습니다. 링크 색상이나 백그라운드 색상의 예를 들어보겠습니다.
제가 사용하는 고래 스킨은 외부 CSS를 만들어도 적용되지 않습니다. 그 이유는 CSS 우선순위 때문입니다.
CSS 우선순위
CSS에서도 우선순위가 존재합니다.
- ! important
- insline style attribute
- id
- attribute
- tag
위처럼 1번부터 순서가 정해지는데 CSS 외부 사이트에서 복사해 온 소스코드를 보면 다음과 같이 되어 있습니다.
빨간 박스를 보면. myButton이라는 class 속성을 지니고 있습니다.
고래스킨 a tag CSS 확인
css의. post-content a { 를 찾아보면 color 뒤에! important가 존재하는 것을 알 수 있습니다.
따라서 CSS 외부 소스코드를 적용해도 이! important로 인해 class보다 높은 순이를 지니고 있기 때문에 class 속성인 myButton 색상이 적용되지 않는 것입니다.
CSS 외부 아이콘 버튼 색상 적용방법
이 문제를 해결하기 위해서는 외부 아이콘 소스코드인 myButton class에 우선순위를 더 높게 주면 됩니다. 우선순위를 높게 주려면. post-content a { 역시! important를 가지고 있으므로 해당 값을 지우고 myButton의 색상 부분에 !important를 적용하면 색상이 적용되는 것을 확인하실 수 있습니다.
간단히 고래스킨에서 외부 CSS 아이콘 버튼이 적용되지 않는 이유와 해결방법에 대해서 간단히 알아보았습니다. 보다 더 자세한 내용은 아래에서 확인할 수 있습니다.
이 블로그의 인기 글
