스타일 처리 우선순위

지인들 참고하라고 쓴 글입니다. 좀 두서없음…

예제는 여기를 참고하세요(링크)

 

기본적으로…

일단 개체의 스타일 처리는 위부터 아래로, 그러므로 head부터 body로 이루어집니다.(참고로 이는 단순히 스타일 처리에만 국한된 건 아닙니다.)

 

아래와 같이 처리를 했을 때,

p {color:red;} /*빨간색 처리*/
p {color:blue;} /*파란색 처리*/

글씨는 파란색이 됩니다.

 

그리고 head부터 body로 처리되기 때문에, head의 처리가 우선시 됩니다.

즉, css 파일이 우선 처리되고, 이후 body에 있는 것들이 처리 됩니다.

<p style="color:green;">순정 p</p>

그러므로 body의 개체에 다음과 같은 스타일을 설정했다면, 이쪽이 우선시되어 글씨는 녹색이 됩니다.

CLASS 처리

지금부터는 개체에 class를 부여합니다. class를 부여하면, 개체 전체에 적용하는 것보다 우선시됩니다. 

<p class="not-id">id 설정하지 않은 클래스 p</p>

HTML 파일

p {color:red;} /*빨간색 처리*/
p {color:blue;} /*파란색 처리*/
.not-id {color:black;}/*검은색 처리*/

CSS 파일

 

이렇게 설정한다면, p의 색상은 파란색이 아니라 검정이 됩니다.

이 class는 여러 개체에, 여러 개를 적용할 수 있습니다.

<p class="not-id c-shuffle">id 설정하지 않은 클래스 p</p>

.not-id {color:black;}/*검은색 처리*/
.c-shuffle {color:brown;}/*갈색 처리*/

위는 2개 이상의 class를 적용했을 때입니다. class 명 사이에 띄어쓰기를 함으로써 class 명끼리 구분합니다.

class끼리 부딪칠 경우, 기본적인 설정에 의해 아래에 있는 class의 처리가 우선됩니다. 즉, 이 경우 c-shuffle의 처리가 우선되어… 글씨는 갈색이 됩니다.

 

ID 처리

지금부터는 개체에 id를 부여합니다. class와의 차이점은 고유 개체임을 나타내는 속성에 가깝습니다.

id는 따라서 class보다 우선시됩니다.

<p class="c-shuffle not-id">id 설정하지 않은 클래스 p</p>
<p id="pid" class="c-shuffle not-id">id 설정한 클래스 p</p>

.not-id {color:black;}/*검은색 처리*/
.c-shuffle {color:brown;}/*갈색 처리*/
#pid {color:violet;}/*보라색 처리*/

이렇게 될 경우, pid라는 id를 가진 p 개체는 보라색 글씨를 가지게 됩니다.

 

복합 선택자 처리

조금 어려운 내용입니다. '선택자'라는 건 css 요소에서 특정 요소를 선택하는 걸 의미합니다. 아까 보여드렸던 p나 .not-id 같은 것들이 그렇습니다.

여기서 다룰 것은 복합 선택자입니다. 두 개 이상의 선택자 요소를 결합하여 구체적으로 요소 하나를 선택하는 것입니다. 하위 선택자, 형제 선택자, 부모 선택자, 자식 선택자 등 여러 가지 있지만 여기서 다루지는 않습니다.

중요한 것은, 복합 선택자로 구체적으로 선택된 요소일 수록 우선적으로 처리해준다는 것입니다.

 

<div><p>div 안에 있는 p</p></div>

p {color:red;} /*빨간색 처리*/
p {color:blue;} /*파란색 처리*/
div p{color:navy;}/*남색 처리*/

div의 하위요소 p는 파란색이 되지 않고 남색이 됩니다.

다만, 이 경우 p에 class를 설정하게 된다면 class가 우선이 됩니다.

<div><p class="c-shuffle">div 안에 있는 p</p></div>

갈색 글씨를 가졌던 c-shuffle을 설정하면…

이렇게 갈색이 되어버립니다. 이 경우, 다음처럼 div안에 있는 c-shuffle에 대해서 설정해봅니다.

div .c-shuffle{color:navy;} /*남색 처리*/

이렇게 남색이 됩니다.

다만 상위 요소인 div에 class를 설정하여 지정하면 하위 요소인 p에 c-shuffle을 설정하여도 남색이 됩니다.

<div class="d-shuffle"><p class="c-shuffle">div class 안에 있는 p</p></div>

p {color:blue;} /*파란색 처리*/
.c-shuffle {color:brown;}/*갈색 처리*/
.d-shuffle p {color:navy;}/*남색 처리*/

즉, 부모 혹은 상위 요소에 class를 설정하면 자식 혹은 하위 요소는 해당 class 안에 있는 개체만 해당되어, 좀 더 넓은 개념인 class보다 우선시 되는 것입니다.

다만 id는 고유 개체임을 나타내는 것이기 때문에, 부모 혹은 상위 요소에 class를 지정한다고 하여도 id에 설정한 값으로 나타납니다.

수정해주고 싶다면, div #pid{} 와 같이 복합 선택자에서 id를 정확하게 집어줘야 합니다.

복합 선택자 또한 style에서 처리하는 것이기 때문에 body에서 처리하는 것보다 우선순위가 낮습니다.

 

복합 선택자는 요소가 많아질 수록 구체적이 되기 때문에, 더 우선적으로 처리 됩니다.

<div class="hello"><span>hello 처리</span></div>

.hello {color:orange;}/*주황 처리*/

이 경우 글씨는 오렌지가 됩니다.

.hello {color:orange;}/*주황 처리*/
.hello span{color:gray;}/*회색 처리*/

하지만 이렇게 구체적으로 하위요소인 span까지 넣는다면 글씨는 회색이 됩니다.

 

important 처리

가급적 쓰지 말라고 권장하고 싶은 부분입니다(쓰셔야할 때가 있으므로 가급적 쓰지 않는게 좋습니다).

important는 모든 요소의 우선처리를 무시하고 제일 우선적으로 이 스타일을 처리해달라고 하는것입니다.

p {color:red;} /*빨간색 처리*/
p {color:blue !important;} /*파란색 처리*/
.not-id {color:black;}/*검은색 처리*/
.c-shuffle {color:brown;}/*갈색 처리*/
#pid {color:violet;}/*보라색 처리*/
div .c-shuffle{color:navy;}/*남색 처리*/
.d-shuffle p {color:navy;}/*남색 처리*/

둘째줄처럼 요소에 !important를 끼워넣습니다.

이 경우 모든 선택자에 할당된 요소들을 무시하고…  p라는 개체는 파란색이 됩니다.

이렇게요.

이건 body에 설정한 style도 무시하며, JS에 의한 설정도 무시합니다. 이렇게 될 경우 이후 내용이 복잡해질수록 끝에 !important만 붙여야하는 상황이 발생할 수도 있기 때문에… 치트키라고 생각하고 정 안 될 때 한두번만 사용하세요. 어디에 소스를 배포할 생각이라면 가급적 붙이지 않는 걸 추천합니다.

 

마지막으로…

이건 우선처리 관련해서만 글을 쓴 것입니다. 사실 정확하게 뭐가 어떻게 바뀌느냐는 정확한 설명들이 있으니 보시는 게 좋습니다.(위에서 쓴 것들중에 빠진 것들, 예외되는 것들도 있습니다)

감이 잘 안 잡히신다면 예제로 올린 fiddle을 참조해봐주세요.

마무리를 어떻게 짓지… 가급적 쉽게 쓰려고 이것저것 빼고 친 것들이 많은데 이해하기 쉬울지 모르겠습니다. 도움이 되었으면 좋겠네요. 굿럭.