[Study] HTML/CSS | 04 CSS 이해하기

- 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
- 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
- 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
- 전체 선택자는 0, 0, 0, 0을 가진다.
- 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
- CSS 소개

• Cascading Style Sheets(CSS)

HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인합니다.

• CSS 문법과 적용

h1 { color: yellow; font-size:2em; }

HTML의 속성은 영어로 attribute이고, CSS의 속성은 property입니다.

attribute는 정적으로 변하지 않고 property는 동적으로 그 값이 변할 수 있다는 의미를 내포하고 있습니다.

<!-- Inline -->
<div style="color:red;"> 내용 </div>

<!-- Internal -->
<style> div {color: red;} </style>

/* External */
div {color: red;}

/* Import */
@import url("css/style.css");

• 선택자

/* 요소 선택자 */
h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

/* 그룹화 */
h1, h2, h3, h4, h5, h6 { color: yellow; }

/* class 선택자 */
.foo { font-size: 30px; }

/* 다중 class */
/* <p class="foo bar"> ... </p> */
.foo { font-size: 30px; }
.bar { color: blue; }

/* id 선택자 */
/* 문서 내에 유일한 요소에 사용 */
#bar { background-color: yellow; }

/* 속성 선택자 */
p[class] { color: silver; } /* <p>이면서 class 속성이 있는 요소 */
p[class][id] { text-decoration: underline; } /* <p>이면서 class 속성과 id 속성이 함께 있는 요소 */
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

• 문서 구조 관련 선택자

선택자 중에는 문서의 구조를 이용하여 요소를 선택하는 선택자도 있습니다.

문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 "조합자" 또는 "결정자" 라고 부릅니다.

부모와 자식, 조상과 자손, 형제

/* 자손 선택자 */
div span { color: red; } /* <div>의 자손 요소인 <span>를 선택하는 선택자 */

/* 자식 선택자 */
div > h1 { color: red; } /* <div>의 자식 요소인 <h1>를 선택하는 선택자 */

/* 인접 형제 선택자 */
div + p { color: red; } /* 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자 */

• 가상 선택자 1

가상 선택자에는 가상 클래스와 가상 요소가 있습니다.

가상 클래스 선택자는 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용할 수 있는 선택자입니다.

/* 문서 구조와 관련된 가상 클래스 */
li:first-child { color: red; }
li:last-child { color: blue; }

/* 앵커 요소와 관련된 가상 클래스 */
a:link { color: blue; }
a:visited { color: gray; }

/* 사용자 동작과 관련된 가상 클래스 */
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

/*  */

• 가상 선택자 2

가상 요소는 가상 클래스와 비슷합니다. 다만 클래스가 아닌 요소라는 점만 다릅니다.

/* 가상 요소 */
p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }

• 구체성

어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결정하기 위해

브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택합니다.

1. 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
2. 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
3. 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
4. 1, 0, 0, 0 : 인라인 스타일
5. 전체 선택자는 0, 0, 0, 0을 가진다.
6. 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
7. important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖는다.

• 상속

상속은 어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것을 말합니다.

• 캐스케이딩

cascading은 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙입니다.

cascading은 폭포가 내려오는 모양처럼 단계적인 이라는 의미를 지니며, 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용됩니다.

1. 중요도(!important)와 출처
2. 구체성
3. 선언 순서