어떤 요소에 속성을 여러 차례 부여하면 어떻게 될까? 맨 마지막에 부여한 속성으로 보인다.
.article p {color: #ccc;}
.article p {color: #333;}
위와 같이 정해주면 .article p에는 #333색이 적용된다. 블로그 스킨을 만들거나 고칠 때 style.css를 보면 워낙 다양한 스타일이 정의되어 있다. 그러다 보니 앞에서 정의한 줄을 모르고 똑같은 요소에 속성을 다시 부여하는 일이 생길 수 있다. 한 번 부여한 속성이 실수로 바뀌지 않도록 하고 싶다면 속성에 !important를 붙인다.
.article p {color: #ccc !important;}
.article p {color: #333;}
위와 같이 쓰면 색이 #ccc로 고정되고 바뀌지 않는다. 그런데 다른 사람이 만든 스킨을 고칠 때 원작자가 바꾸지 못하도록 해 놓은 걸 모르고 뒤에서 새로 속성을 부여하고 왜 안 되지?를 되뇌이며 고생을 할 때도 있다. 요즘 나온 티스토리 스킨은 본문에 있는 요소 p를 바꾸지 못하게 정해 두었다. 어떤 까닭인지 모르지만 문단 사이를 떨어뜨리지 못하도록 만들어 놓았다.
레터 스킨을 예로 는다. 아마 어딘가에서 아래와 같이 속성을 부여했나보다. .article_view p{margin: 10px;}를 넣어도 문단 간격이 생기지 않았다. 까닭을 몰라서 skin.html을 열었더니 본문이 들어가는 영역 article_view을 영역 .tt_article_useless_p_margin로 둘러싸여 있다. 아래를 넣으면 문단 아래 간격이 생긴다.
.article_view .tt_article_useless_p_margin p {
margin-bottom: 10px !important;
}
같은 !important가 붙은 속성이 여럿이라면 뒤에 있는 속성이 적용된다.
