[HTML/CSS] CSS - 구체성, 상속, Cascading

9) 구체성

요소를 선택하는 데는 여러 방법이 있고, 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다. 그렇다면 만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까?

h1 {
    color: red;
}

body h1 {
    color: green;
}

위 코드의 두 규칙은 모두 <h1>을 선택하게 되지만, 두 규칙 지정하는 스타일은 서로 다르다. 하지만 결국 <h1>에는 color: green이 적용되는데 이는 구체성과 연관이 있다.

 

선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있는데, 이 규칙을 '구체성'이라 한다. 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 클수록 우선으로 적용된다.

---

0, 0, 0, 0

위와 같이 구체성은 4개의 숫자 값으로 이루어져 있고, 값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖고, 구체성은 아래의 규칙대로 계산된다.

​

1, 0, 0, 0 : Inline 스타일 (HTML 파일에 직접 style=""로 명시하는 것)

0, 1, 0, 0 : 선택자에 있는 모든 id 속성값 (#)

0, 0, 1, 0 : 선택자에 있는 모든 class 속성값 (.), 기타 속성, 가상 클래스

0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소

0, 0, 0, 0 : 전체 선택자

​

추가로 조합자는 구체성에 영향을 주지 않는다. (>, + 등)

/* 0,0,0,1 h1 요소 */
h1 {
    ...
}

/* 0,0,0,2 body, h1 요소 */
body h1 {
    ...
}

/* 0,0,1,0 class 속성 */
.grape {
    ...
}

/* 0,0,1,0 class 속성 */
*.bright {
    ...
}

/* 0,0,2,2 2개의 class 속성과 p, em 요소 */
p.bright em.dark {
    ...
}

/* 0,1,0,0 id 속성 */
#page {
    ...
}

/* 0,1,0,1 id 속성과 div 요소 */
div#page {
    ...
}

위의 코드를 보면 맨 마지막 0, 1, 0, 1 구체성이 가장 크므로, div#page에 적힌 CSS 코드가 적용된다.

---

<!-- 1, 0, 0, 0 Inline Style -->
<p id="page" style="color: blue">Lorem impusm dolor sit.</p>

/* 0, 1, 0, 1 id 속성과 p 요소 */
p#page {
    color: red;
}

위 코드와 같이 HTML 파일에 직접 적힌 Inline 스타일이 있다면, 1, 0, 0, 0 구체성을 갖는 Inline 스타일의 color: blue가 적용된다.

---

<!-- 1, 0, 0, 0 Inline Style -->
<p id="page" style="color: blue">Lorem impusm dolor sit.</p>

/* important */
p#page {
    color: red !important;
}

위의 <p>에는 !important로 인해 color: red가 적용된다.

​

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖는다. important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 쓴다.

​

​

정리

!important > inline > id > class > element

​

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

Cascade and inheritance

---

10) 상속

​

◆ 상속되는 속성

<h1>Hello, <em>CSS</em></h1>

h1 {
    color: slateblue;
}

위 코드에서 <em>은 부모인 <h1>의 color: slateblue를 상속받는다. 하지만 이처럼 모든 속성이 다 상속되는 것은 아닌데, margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다.

 

 

◆ 상속되는 속성의 구체성

<h1 id="page">Hello, <em>CSS</em></h1>

/* 0, 0, 0, 0, */
* {
    color: red;
}

/* 0, 1, 0, 1 id 속성과 h1 요소 */
h1#page {
    color: slateblue;
}

위 코드에서는 전체 선택자(*)를 이용해 color: red를 적용하고, id 선택자(#)를 이용해 color: slateblue를 선언했다. 전체 선택자의 구체성은 0, 0, 0, 0 이며, id 선택자의 구체성은 0,1,0,1인데, <em>에 전체 선택자인 color: red가 적용되는 이유는 상속된 속성은 어떠한 구체성도 갖지 못하기 때문이다.

​

https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

Inheritance

---

11) 캐스케이딩

cascading은 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙으로, 폭포가 내려오는 모양처럼 단계적인 이라는 의미를 지니며 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용된다.

h1 {
    color: red;
}

h1 {
    color: blue;
}

위 코드와 같이 구체성이 같은 두 규칙이 동일한 요소에 적용된다면cascading 규칙에 의해 밑에 있는 color: blue가 적용된다.

 

 

<p id="bright">Hello, CSS</p>

위 코드와 같은 HTML 파일에 <p> 요소에 id="bright"를 적었다.

p#bright {
    color: slateblue;
}

p {
    color: red;
}

위와 같이 <p> 요소에서id(#)bright를 정확히 선언한 규칙에 따라 color: slateblue가 적용됐다.

 

p {
    color: slateblue;
}

p {
    color: red;
}

반대로 id(#)을 선언하지않고 <p>요소만 선언하면cascading 규칙에 따라 밑에 있는 color: red가 적용되는 것을 볼 수 있다.

 

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

Cascade and inheritance

---

12) 선택자 정리

​

https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

---

https://www.edwith.org/boostcourse-cs-htmlcss/joinLectures/33592

[부스트코스] 비전공자를 위한 HTML/CSS 강좌소개 : edwith

위 4개의 내용은 부스트코스 무료 강의에서 들을 수 있습니다🥰

​

#HTML #CSS #HTMLCSS #HTML문법 #HTML태그 #HTML속성 #HTML태그중첩 #HTML빈태그 #HTML주석 #HTML문서구조 #HTML공부 #HTML연습 #HTML기초 #CSS구체성 #CSS상속 #상속 #CSS선택자 #CSS문법 #CSS구문 #문서구조 #가상선택자 #가상클래스 #가상요소 #class #id #선택자 #속성선택자 #inline #internal #external #import #제목태그 #콘텐츠모델 #시멘틱웹 #시멘틱마크업 #HTML5 #HTML5시멘틱 #block #inline #h1 #단락태그 #p #개행 #br #텍스트표현태그 #앵커 #a #href #target #내부링크 #div #span #ul #ol #dl #img #src #alt #상대경로 #절대경로 #gif #jpg #png #table #tr #th #td #caption #thead #tbody #tfoot #colspan #rowspan #form #input #text #password #radio #checkbox #file #submit #reset #button #image #select #textarea #label #fileset #legend #article #aside #figure #figcaption #header #main #footer #mark #nav #section #summary #time #코딩 #코딩공부 #코딩연습 #코딩독학 #비전공자 #부스트코스 #부스트코스HTML #부스트코스강의 #edwith