스타일 충돌 CSS

 티스토리 에디터에서 span tag의 id를 지 멋대로 없애버리는 현상을 발견.

우회를 위해 H태그에 인라인을 삽입하려고 하였지만 왠지 바보같아져 클래스를 생성하기로 했다.

여담으로 이번에 인생 최초로  css란걸 수정해본다. 어쨌든 기본으로 써져있는 코드 보면서 문법 유추해서 수정해서 사용하려고 하는데 시험으로 p태그 클래스 생성한것이 본문에서 적용이 안 되는 현상이 발생했다.

 

구글 개발자 콘솔로 스타일을 확인해보니 로딩은 되었는데 취소선이 그어져 있다는것을 발견했다.

왜 그런지 검색을 해보니 스타일 충돌 시 더 상세한 내역의 definition이란 소리이다. 이는 higher specificity 또는 더욱 local rule이기 때문에 그렇다. 아니 css 문법도 모르겠고. 어쨌든 여기서도 겐또로 생각하자면 구글 inspect mode에서 아래 스타일이 상위로 표시된다.

.article-view p {
}

 

아래는 내가 테스트로 썼던 최초의 클래스이다.

p.testc1 {

}

대충 보니 .article-view라는 로컬 그룹에서의 p를 지정한것이 더 local로 처리된것으로 보인다. 따라서 

 

.article-view p.testc2 {

}

 

이를 시도해보았고 성공하였다.

 

다른 방식으로는 !important 를 붙이는 방식이다. 용법은 

 

color: red !important;

 

로서 해당 뒤에 바로 시작해서 ;전에 붙여야한다. 사실 이 방법으로도 성공했지만 비장의 오버라이드는 자주 쓰면 급할때 고장나는 법이니.

 

다음과 같은 사실도 방금 검색하여 알았다. 

스타일에서 dot와 #으로 시작되는게 차이가 있는데 

 

 '  .  '은 class selector로서 온데다 다 쳐붙여서 쓸 수 있는  클래스가 맞고 #은 하나의 attribute에 지정해서 쓰는 id 태그의 단 하나의 속성을 변경할 때 사용한다.