1. 기본 문법, 주석

태그선택자

선택자 {
	속성: 값;
    ...
}

주석

• /* */ 로 작성

2. 선언 방식

내장 방식

• <style></style> 안에 작성
• 유지보수 측면에서 비추.

인라인 방식

• html 요소 내에 style="속성: 값; ..." 으로 작성
• 우선순위가 불필요하게 높아서 유지보수 측면에서 비추.

링크 방식

• <link rel="stylesheet" href="./css/main.css"> 으로 적용
• 병렬로 연결되기 때문에 처리빠름.

@import 방식

• css 파일 내에서 다른 css 파일을 불러와 씀.
• main.css 내에 @import url("./box.css"); 로 import 함.
• 직렬로 연결되기 때문에 html이 모두 해석된 후에야 불러옴. 지연 발생.

3. 선택자_기본

전체 선택자

• * 로 작성

	* {
    	color: red;
    }

tag 선택자

	li {
    	color: red;
    }

class 선택자

	.orange {
    	color: red;
    }

id 선택자

	#orange {
    	color: red;
    }

4. 선택자_복합

일치 선택자

	span.orange {
    	color: red;
    }

• span 태그 중에 class=orange 인 애들을 선택

자식 선택자

	ul > .orange {
    	color: red;
    }

• ul 의 자식 중에 class=orange 인 요소들을 선택.
• 딱 부모-자식 관계에 있을 때에 선택 가능.

하위 선택자

	ul .orange {
    	color: red;
    }

• ul 의 하위 요소 중에 class=orange 인 요소들을 선택.
• 즉, 부모-자식 을 넘어서서 부모-자식-자식 이어도 선택 가능.

인접 형제 선택자

선택자 다음의 형제요소 딱 하나만을 선택

	.orange + li {
    	color: red;
    }

	<ul>
    	<li>딸기</li>
        <li>수박</li>
        <li class="orange"></li>
        <li>망고</li>   /* 이놈만 선택 */
        <li>사과</li>
    </ul>

일반 형제 선택자

선택자 다음의 형제요소 모두를 선택

	.orange ~ li {
    	color: red;
    }

	<ul>
    	<li>딸기</li>
        <li>수박</li>
        <li class="orange"></li>
        <li>망고</li>   /* 이놈도 선택 */
        <li>사과</li>   /* 이놈도 선택 */
    </ul>

5. 선택자_가상클래스(1)

어떤 동작에 대해 반응함

hover

마우스를 올려놓았을 때 동작

a:hover

active

마우스로 클릭하는 중에 동작

a:active

focus

선택자 요소가 포커스 되면 동작

• 모든 요소가 focus 가 가능하지는 않음.
• 원래 focus가 가능하지 않은 요소를 focus가 가능하도록 만들어주려면? 다음과 같이 tabindex=-1을 추가

	<div class="box" tabindex="-1"></div>

input:focus

5. 선택자_가상클래스(2)

first-child

선택자 ABC가 형제 요소 중 첫째라면 선택. 첫째가 아니면 선택하지 않음.

	.fruits span:first-child {
    	color: red;
    }

	<div class="fruits">
    	<span>딸기</span>  /* 이놈만 선택 */
        <span>수박</span>
        <div class="orange"></div>
        <p>망고</p>
        <h3>사과</h3>
    </ul>

last-child

nth-child

	.fruits *:nth-child(2) {
    	color: red;
    }

	<div class="fruits">
    	<span>딸기</span>
        <span>수박</span>  /* 이놈만 선택 */
        <div class="orange"></div>
        <p>망고</p>
        <h3>사과</h3>
    </ul>

• (2) 자리에 (2n) 이라고 쓰면 zero-based numbering 이 되어 20, 21, 2*2, ... 즉 짝수번째 형제 요소가 선택됨.

	.fruits *:nth-child(2n) {
    	color: red;
    }

	<div class="fruits">
    	<span>딸기</span>
        <span>수박</span>  /* 이놈 선택 */
        <div class="orange"></div>
        <p>망고</p>   /* 이놈도 선택 */
        <h3>사과</h3>
    </ul>

• (2n+1) 이라고 쓰면 홀수 번째 형제 요소들을 선택.

not

	.fruits *:not(span) {
    	color: red;
    }

	<div class="fruits">
    	<span>딸기</span>
        <span>수박</span>  
        <div class="orange"></div>  /* 이놈 선택 */
        <p>망고</p>   /* 이놈도 선택 */ 
        <h3>사과</h3>  /* 이놈도 선택 */
    </ul>

7. 선택자_가상요소

:: 으로 선택

before

• 가상의 inline 요소를 만들어 지정된 요소의 '앞'을 선택
• 내부에 무조건 content 속성이 존재해야 함.
• inline 이라서 width, height 속성을 주어도 적용이 안 되므로, 이를 block 요소로 바꾸려면 display: block; 을 속성에 추가.

	.box::before {
    	content: "앞!";
    }

after

• 내부에 무조건 content 속성이 존재해야 함.
• inline 이라서 width, height 속성을 주어도 적용이 안 되므로, 이를 block 요소로 바꾸려면 display: block; 을 속성에 추가.

8. 선택자 속성

속성선택자

[속성이름] 혹은 [속성이름=값] 으로 씀.

	[type="password"] {
    	color: red;
    }
    [data-fruit-name] { /* data속성도 가능 */
    	color: red;
    }

9. 스타일 상속

상속되는 스타일

거의 글자 관련된 속성들 위주.

• font-style: 글자기울기
• font-weight: 글자 두께
• font-size: 글자 크기
• line-height: 줄 높이
• font-family: 폰트
• color: 글자 색
• text-align: 정렬

강제 상속

원래 상속 안되는 스타일도 강제로 상속시킴

	.parent {
    	height: 200px;
    }
    .child {
    	height: inherit;  /* 강제상속 */
    }

10. 선택자 우선순위

1. 점수가 높은 선언이 우선함.
2. 점수가 같다면, 가장 마지막에 해석된 선언이 우선함.

'명시도' 라고 함.

	<div
    	id="color_yellow"
        class="color_green"
        style="color: orange;">  <!-- 점수: 1000점 -->
        Hello world! <!-- 글자색은? -->
    </div>

	div { color: red !important; }
    #color_yellow { color: yellow; }
    .color_green { color: green; }
    div { color: blue; }
    * { color: darkblue; }
    body { color: violet; }

선택자의 점수

• !important: 무한대
• 인라인 선언: 1000
• id 선택자: 100
• class 선택자: 10
• 태그 선택자: 1점
• 전체 선택자: 0
• body 선택자: 상속만. 점수없음

	div { color: red !important; }   /* 무한대 */
    #color_yellow { color: yellow; } /* 100 */
    .color_green { color: green; } /* 10 */
    div { color: blue; } /* 1 */
    * { color: darkblue; } /* 0 */
    body { color: violet; } /* 점수없음 */

선택자 점수계산 연습

	.list li.item {}     /* 21점. class 두개, 태그 하나. */
    .list li:hover {}   /* 21점. 가상클래스도 결국 클래스니까 10점으로 계산 */
    .box::before {}   /* 11점. ::는 가상요소이고 얘는 태그랑 비슷하므로 1점으로 계산. */
    #submit span {}   /* 101점. id선택자 + tag선택자 */
    header .menu li:nth-child(2) {}   /* 22점. 1점/10점/1점/10점 */
    h1 {}   /* 1점 */
    :not(.box) {} /* 10점. not 은 점수계산 안함 */