# CSS 개요 <div id="copyright"></div>
## 문법
```css 선택자 { 속성: 속성값; 속성: 속성값; } ``` > 옆으로 길게 작성하는 방식은 '가독성'이 떨어집니다.<br>몇몇 경우를 제외하고는 아래 방식을 사용하세요. ```css 선택자 { 속성: 속성값; 속성: 속성값; } ```
### 선택자(Selector)의 역할 속성과 값을 지정할 대상을 검색
```html <div>HELLO</div> <!--RED--> <span>HELLO</span> ``` ```css div { color: red; } ``` > 첫번째 요소가 검색되어 속성과 값이 적용됩니다.
### 속성(Property)과 값(Value)의 역할 검색된 대상에 지정될 CSS 명령
```html <div>HELLO</div> ``` ```css div { color: red; font-size: 20px; font-weight: bold; } /* 글자색: 빨강; */ /* 글자크기: 20px; */ /* 글자두께: 두껍게; */ ``` > 선택자로 검색한 대상에 각 속성과 값을 삽입하여 스타일을 지정합니다.
### `/* Comment */` 문서 내 수정사항이나 설명 등을 작성(주석) ```css /* HEADER SECTION */ header { color: #FF0000; /* Color Red */ } ```
## CSS 선언 방식
### 인라인(in-line) 방식 HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식
```html <div style="color: red; font-size: 20px; font-weight: bold;">HELLO</div> ``` > 이 방식은 '선택자'가 필요하지 않습니다.
### 내장(embedded) 방식 HTML `<style></style>` 안에 작성하는 방식
```html <head> <style> div { color: red; font-size: 20px; font-weight: bold; } </style> </head> <body> <div>HELLO</div> </body> ```
### 링크(link) 방식 HTML `<link>` 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
```html <head> <link rel="stylesheet" href="css/common.css"> </head> <body> <div>HELLO</div> </body> ``` ```css /* common.css */ div { color: red; font-size: 20px; font-weight: bold; } ``` > 이 방식의 사용을 추천합니다.
### `@import` 방식 CSS `@import`를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
```html <head> <link rel="stylesheet" href="css/common1.css"> </head> <body> <div>HELLO</div> </body> ``` ```css /* common1.css */ @import url("./common2.css"); ``` ```css /* common2.css */ div { color: red; font-size: 20px; font-weight: bold; } ```
## 선택자(Selector)
### 기본 선택자(Basic Selectors)
#### 1. 전체 선택자(Universal Selector) (요소 내부의)모든 요소를 선택 ``` * ```
```css * { color: red; } ``` ```html <div> <!--선택--> <ul> <!--선택--> <li>사과</li> <!--선택--> <li>딸기</li> <!--선택--> <li>오렌지</li> <!--선택--> </ul> <div>당근</div> <!--선택--> <p>토마토</p> <!--선택--> <span>오렌지</span> <!--선택--> </div> ```
#### 2. 태그 선택자(Type Selector) 태그이름이 `E`인 요소 선택 ``` E ```
```css li { color: red; } ``` ```html <div> <ul> <li>사과</li> <!--선택--> <li>딸기</li> <!--선택--> <li>오렌지</li> <!--선택--> </ul> <div>당근</div> <p>토마토</p> <span>오렌지</span> </div> ```
#### 3. 클래스 선택자(Class Selector) HTML `class` 속성의 값이 `E`인 요소 선택 ``` .E ```
```css .orange { color: red; } ``` ```html <div> <ul> <li>사과</li> <li>딸기</li> <li class="orange">오렌지</li> <!--선택--> </ul> <div>당근</div> <p>토마토</p> <span class="orange">오렌지</span> <!--선택--> </div> ```
#### 4. 아이디 선택자(ID Selector) HTML `id` 속성의 값이 `E`인 요소 선택 ``` #E ```
```css #orange { color: red; } ``` ```html <div> <ul> <li>사과</li> <li>딸기</li> <li id="orange" class="orange">오렌지</li> <!--선택--> </ul> <div>당근</div> <p>토마토</p> <span class="orange">오렌지</span> </div> ```
### 복합 선택자(Combinators)
#### 일치 선택자(Basic Combinator) `E`와 `F`를 동시에 만족하는 요소 선택 ``` EF ```
```css span.orange { color: red; } ``` ```html <div> <ul> <li>사과</li> <li>딸기</li> <li class="orange">오렌지</li> </ul> <div>당근</div> <p>토마토</p> <span class="orange">오렌지</span> <!--선택--> </div> ```
#### 자식 선택자(Child Combinator) `E`의 자식 요소 `F`를 선택 ``` E > F ```
```css ul > .orange { color: red; } ``` ```html <div> <ul> <li>사과</li> <li>딸기</li> <li class="orange">오렌지</li> <!--선택--> </ul> <div>당근</div> <p>토마토</p> <span class="orange">오렌지</span> </div> ```
#### 후손(하위) 선택자(Descendant Combinator) `E`의 후손(하위) 요소 `F`를 선택 ``` E F ``` > '띄어쓰기'가 선택자의 기호로 사용됩니다.
```css div .orange { color: red; } ``` ```html <div> <ul> <li>사과</li> <li>딸기</li> <li class="orange">오렌지</li> <!--선택--> </ul> <div>당근</div> <p>토마토</p> <span class="orange">오렌지</span> <!--선택--> </div> ```
#### 인접 형제 선택자(Adjacent Sibling Combinator) `E`의 다음 형제 요소 `F` 하나만 선택 ``` E + F ```
```css .orange + li { color: red; } ``` ```html <ul> <li>딸기</li> <li>수박</li> <li class="orange">오렌지</li> <li>망고</li> <!--선택--> <li>사과</li> </ul> ```
#### 일반 형제 선택자(General Sibling Combinator) `E`의 다음 형제 요소 `F` 모두 선택 ``` E ~ F ```
```css .orange ~ li { color: red; } ``` ```html <ul> <li>딸기</li> <li>수박</li> <li class="orange">오렌지</li> <li>망고</li> <!--선택--> <li>사과</li> <!--선택--> </ul> ```
### 가상 클래스 선택자(Pseudo-Classes Selectors)
#### HOVER `E`에 마우스(포인터)가 올라가 있는 동안에만 `E` 선택 ``` E:hover ```
```css a:hover { color: red; } ``` ```html <a href="http://www.naver.com">NAVER</a> ```
#### ACTIVE `E`를 마우스로 클릭하는 동안에만 `E` 선택 ``` E:active ```
```css div { width: 100px; height: 100px; background: tomato; transition: 0.4s; } div:active { width: 200px; } ```
#### FOCUS `E`가 포커스 된 동안에만 `E` 선택 ``` E:focus ``` > <a href="https://developer.mozilla.org/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC#%EB%8C%80%ED%99%94%ED%98%95_%EC%BD%98%ED%85%90%EC%B8%A0" target="_blank">대화형 콘텐츠</a>에서 사용 가능
```css input { width: 100px; outline: none; padding: 5px 10px; border: 1px solid lightgray; transition: 0.4s; } input:focus { width: 200px; border-color: red; } ``` ```html <input type="text"> ```
#### FIRST CHILD `E`가 형제 요소 중 첫번째 요소라면 선택 ``` E:first-child ```
```css .fruits li:first-child { color: red; } ``` ```html <ul class="fruits"> <li>딸기</li> <!--선택--> <li>사과</li> <li>오렌지</li> <li>망고</li> </ul> ```
#### LAST CHILD `E`가 형제 요소 중 마지막 요소라면 선택 ``` E:last-child ```
```css .fruits li:last-child { color: red; } ``` ```html <ul class="fruits"> <li>딸기</li> <li>사과</li> <li>오렌지</li> <li>망고</li> <!--선택--> </ul> ```
#### NTH CHILD `E`가 형제 요소 중 `n`번째 요소라면 선택<br> (`n` 키워드 사용시 `0`부터 해석(Zero-base)) ``` E:nth-child(n) ```
```css .fruits li:nth-child(2) { color: red; } ``` ```html <ul class="fruits"> <li>딸기</li> <li>사과</li> <!--선택--> <li>오렌지</li> <li>망고</li> </ul> ``` > `<li></li>` 중 2번째 요소를 선택합니다.
```css .fruits li:nth-child(2n) { color: red; } ``` ```html <ul class="fruits"> <li>딸기</li> <li>사과</li> <!--선택--> <li>오렌지</li> <li>망고</li> <!--선택--> </ul> ``` > '짝수'번째 요소들만 선택할 수 있습니다.
```css .fruits li:nth-child(n+3) { color: red; } ``` ```html <ul class="fruits"> <li>딸기</li> <li>사과</li> <li>오렌지</li> <!--선택--> <li>망고</li> <!--선택--> </ul> ``` > 3번째 요소부터 이후 요소들을 선택합니다.
```css .fruits p:nth-child(1) { color: red; } ``` ```html <!--선택된 요소 없음--> <div class="fruits"> <div>딸기</div> <p>사과</p> <p>망고</p> <span>오렌지</span> </div> ``` > `.fruits`의 첫번째 자식 요소가 `<p></p>`가 아니기 때문에 선택되지 않습니다.
#### NTH OF TYPE `E`의 타입(태그이름)과 동일한 타입인 형제 요소 중 `E`가 `n`번째 요소라면 선택<br> (`n` 키워드 사용시 `0`부터 해석(Zero-base)) ``` E:nth-of-type(n) ```
```css .fruits p:nth-of-type(1) { color: red; } ``` ```html <div class="fruits"> <div>딸기</div> <p>사과</p> <!--선택--> <p>망고</p> <span>오렌지</span> </div> ``` > `<p></p>`들 중에서 첫번째 요소를 선택합니다.
```css .fruits .red:nth-of-type(1) { color: red; } ``` ```html <!--선택된 요소 없음--> <ul class="fruits"> <li>오렌지</li> <li class="red">딸기</li> <li>망고</li> <li class="red">사과</li> </ul> ``` > 2번째와 4번째에 있는 `.red` 요소의 타입(태그이름)은 `li` 이기 때문에, `:nth-of-type(1)` 선택자는 `<li></li>`들 중에서 첫번째 요소를 선택하고 `.red` 인지 체크하게 됩니다.<br>따라서 조건에 맞는 요소가 없으므로 선택되지 않습니다.
#### 부정 선택자(Negation Selector) `S`가 아닌 `E` 선택 ``` E:not(S) ```
```css .fruits li:not(.strawberry) { color: red; } ``` ```html <ul class="fruits"> <li>오렌지</li> <!--선택--> <li class="strawberry">딸기</li> <li>망고</li> <!--선택--> <li>사과</li> <!--선택--> </ul> ```
### 가상 요소 선택자(Pseudo-Elements Selectors)
#### BEFORE `E` 요소 **내부의 앞**에, 내용(content)을 삽입 ``` E::before ```
```css ul li:before { /* support IE 8 */ content: "$"; } ul li::before { content: "$"; } ``` ```html <ul> <li>1</li> <!-- $1 --> <li>2</li> <!-- $2 --> <li>3</li> <!-- $3 --> <li>4</li> <!-- $4 --> </ul> ``` > 각 `<li></li>` 내부의 앞에 내용(content)으로 `$` 문자를 삽입했습니다.<br>내용을 넣기 위해서는 `content` 속성이 **필수**입니다.
```css div::before { content: url("../images/smile.png"); } ``` > `url()`을 통해서 이미지를 삽입할 수 있습니다.
#### AFTER `E` 요소 **내부의 뒤**에, 내용(content)을 삽입 ``` E::after ```
```css ul li:after { /* support IE 8 */ content: ".0"; } ul li::after { content: ".0"; } ``` ```html <ul> <li>1</li> <!-- 1.0 --> <li>2</li> <!-- 2.0 --> <li>3</li> <!-- 3.0 --> <li>4</li> <!-- 4.0 --> </ul> ``` > 각 `<li></li>` 내부의 뒤에 내용(content)으로 `.0` 문자를 삽입했습니다.
### 속성 선택자(Attribute Selectors)
#### ATTR 속성 `attr`을 포함한 요소 선택 ``` [attr] ```
```css [disabled] { opacity: 0.2; } ``` ```html <input type="text" value="HEROPY"> <input type="password" value="1234"> <input type="text" value="disabled text" disabled> ```
#### ATTR=VALUE 속성 `attr`을 포함하며 속성 값이 `value`인 요소 선택 ``` [attr=value] ```
```css [type="password"] { color: red; } ``` ```html <input type="text" value="HEROPY"> <input type="password" value="1234"> <input type="text" value="disabled text" disabled> ```
#### ATTR^=VALUE 속성 `attr`을 포함하며 속성 값이 `value`로 시작하는 요소 선택 ``` [attr^=value] ```
```css [class^="btn-"] { font-weight: bold; border-radius: 4px; } ``` ```html <button class="btn-success">Success</button> <button class="btn-danger">Danger</button> <button>Normal</button> ```
#### ATTR$=VALUE 속성 `attr`을 포함하며 속성 값이 `value`로 끝나는 요소 선택 ``` [attr$=value] ```
```css [class^="btn-"] { font-weight: bold; border-radius: 4px; } [class$="success"] { color: green; } [class$="danger"] { color: red; } ``` ```html <button class="btn-success">Success</button> <button class="btn-danger">Danger</button> <button>Normal</button> ```
## 상속(Inheritance)
```css .ecosystem { color: red; } ``` ```html <div class="ecosystem">생태계 <!--RED--> <div class="animal">동물 <!--RED--> <div class="tiger">호랑이</div> <!--RED--> <div class="lion">사자</div> <!--RED--> <div class="elephant">코끼리</div> <!--RED--> </div> <div class="plant">식물</div> <!--RED--> </div> ``` > 생태계(`.ecosystem`)에 적용된 색상이, 하위 요소들에게도 적용되었습니다.
### 상속되는 속성들(properties) - font - font-style - font-weight - font-size - line-height - font-family - color - text-align - text-indent - text-decoration - letter-spacing - opacity etc...
### 강제 상속 ```html <div class="parent"> <div class="child"></div> </div> ``` ```css .parent { position: absolute; /* 상속되지 않는 속성과 값 */ } .child { position: inherit; /* 강제 상속 받아 position: absolute; 와 동일 */ } ``` > 상속되지 않는 속성(값)도 `inherit`이라는 값을 사용하여 '부모'에서 '자식'으로 강제 상속시킬 수 있습니다. '자식'를 제외한 '후손'에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아닙니다.
## 우선순위
```html <body> <!--인라인 선언방식--> <div id="color_yellow" class="color_green" style="color: orange;">Hello world!</div> </body> ``` ```css div { color: red !important; } /* !important */ #color_yellow { color: yellow; } /* 아이디 선택자 */ .color_green { color: green; } /* 클래스 선택자 */ div { color: blue; } /* 태그 선택자 */ * { color: darkblue; } /* 전체 선택자 */ body { color: violet; } /* 상속 */ ``` > 하나의 요소를 가르키는 7개의 색상이 있습니다.<br>`Hello world!`라는 문자는 어떤 색상이 될까요?
### 우선순위 결정 같은 요소가 여러 선언의 대상이 될 경우,<br>어떤 선언의 CSS 속성(property)을 우선 적용할지 결정하는 방법 1. 명시도 점수가 높은 선언이 우선(명시도) 1. 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선(선언 순서) 1. 명시도는 '상속' 규칙보다 우선(중요도) 1. `!important`가 적용된 선언 방식이 다른 모든 방식보다 우선(중요도) > 우선순위에는 '중요도, 명시도, 선언 순서'의 개념이 있습니다. 각 개념이 의미하는 것을 기억하세요.
#### 1. 가장 중요(`!important`) 모든 선언을 무시하고 가장 우선 점수: `∞` pt ```css div { color: red !important; /* 가장 우선 */ } ```
#### 2. 인라인 선언 방식(Style Attribute) 인라인 선언(HTML `style`속성을 사용) 점수: `1000` pt ```html <div style="color: orange;">HELLO WORLD</div> <!-- 1,000pt --> ```
#### 3. 아이디(ID Selector) 아이디 선택자 점수: `100` pt ```css #color_yellow { color: yellow; /* 100pt*/ } ```
#### 4. 클래스(Class Selector) 클래스 선택자 점수: `10` pt ```css .color_green { color: green; /* 10pt */ } ```
#### 5. 태그(Type Selector) 태그 선택자 점수: `1` pt ```css span { color: blue; /* 1pt */ } ```
#### 6. 전체(Universal Selector) 전체 선택자 점수: `0` pt ```css * { color: darkblue; /* 0pt */ } ```
#### 7. 상속(CSS Inheritance) 상속 받은 속성은 항상 우선하지 않음 점수: 계산하지 않음 ```css body { color: violet; } ```
계산해 보세요! ```css .list li.item { color: red; } /* 21pt */ .list li:hover { color: red; } /* 21pt */ .box::before { content: "Good "; color: red; } /* 11pt */ #submit span { color: red; } /* 101pt */ header .menu li:nth-child(2) { color: red; } /* 22pt */ h1 { color: red; } /* 1pt */ :not(.box) { color: red; } /* 10pt */ :not(span) { color: red; } /* 1pt */ ``` > `:hover` 처럼 '가상 클래스'는 '클래스' 선택자의 점수(`10pt`)를 가지며, `::before` 처럼 '가상 요소'는 '태그' 선택자의 점수(`1pt`)를 가집니다.<br>부정 선택자 `:not()`은 점수를 가지지 않습니다.