기초

기본문법 및 주석

• 선택자{속성: 값;}
  선택자: 스타일(CSS)을 적용할 대상 (Selector)
  속성: 스타일(CSS)의 종류(Property)
  {}: 스타일 범위의 시작과 끝

- HTML
<div>Hello</div>

- CSS
div {
  font-size: 50px;
  color: blue;
  text-decoration: underline;
}

-주석
/**/

---

CSS 선언방식

- 내장방식

html에서 style 태그로 작성하는 방식

<style>
	div{
    	color: red;
    }
</style}

- 인라인 방식

요소의 style속성에 직접 스타일을 작성하는 방식
선택자가 없음
유지보수 측면에서 단점을 가짐 (우선순위)

<div style="color: red;></div>

- 링크 방식

link 태그로 외부 css 문서를 가져와서 연결하는 방식

<link rel="stylesheet" href="./css/main.css">

- main.css
div{
	color: red;
}

- import 방식

CSS의 @import 규칙으로 CSS문서 안에서
다른 CSS 문서를 가져와 연결하는 방식
연결을 지연시키는 용도로 사용가능

<link rel="stylesheet" href="./css/main.css">

- main.css
@import url(./box.css)
div{
	color: red;
}

- box.css
.box {
	background-color: red;
}

---

CSS 선택자

기본 선택자

• Universal Selector
  *
  모든 요소를 선택

* {
	color: red;
}

• Type Selector
  태그이름
  해당 태그 요소 선택

li {
	color: red;
}

• class Selector
  .class
  HTML class 속성의 값이 해당 값인 요소 선택

.ABC {
	color: red;
}

• ID Selector
  #id
  HTML id 속성의 값이 해당 값인 요소 선택

#ABC {
	color: red;
}

복합선택자

기본 선택자를 조합한 선택자

• Basic Combinator
  ABC.XYZ
  선택자 두개를 동시에 만족하는 요소 선택

ABC.XYZ {
	color: red;
}

• Child Combinator
  ABC > XYZ
  선택자 ABC의 자식 요소 XYZ 선택

ABC>XYZ {
	color: red;
}

• Descendant Combinator
  ABC .XYZ (띄어쓰기 주의)
  선택자 ABC의 하위 요소 XYZ 선택

ABC. XYZ {
	color: red;
}

• Adjacent Sibling Combinator
  ABC + XYZ
  선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

ABC + XYZ {
	color: red;
}

• General Sibling Combinator
  ABC ~ XYZ
  선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

ABC ~ XYZ {
	color: red;
}

---

Pseudo-Classes(가상 클래스 선택자)

Pseudo-Classes(가상 클래스 선택자)

• HOVER
  선택자 요소에 마우스 커서가 올라가 있는 동안 선택

a:hover {
	color: red;
}

• ACTIVE
  선택자 요소에 마우스를 클릭하고 있는 동안 선택

a:active {
	color: red;
}

• FOCUS
  선택자 요소가 포커스 되면 선택
  포커스가 가능한 요소에서만 작동함

input:focus {
	background-color: red;
}

cf. tabindex 속성을 통해 Focus가 될 수 있는 요소로 만들 수 있다.

• FIRST CHILD
  선택자가 형제 요소 중 첫째라면 선택

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

• LAST CHILD
  선택자가 형제 요소 중 막내라면 선택

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

• NTH CHILD
  선택자가 형제 요소 중 n번째라면 선택

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

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

• NOT
  XYZ가 아닌 ABC 선택

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

---

Pseudo-Elements (가상 요소 선택자)

Pseudo-Elements (가상 요소 선택자)

• BEFORE, AFTER
  요소의 내부 앞/뒤에 Content를 삽입
  인라인 요소
  content <- 필수속성

- HTML
<div class = "box"
	content!
</div>

- CSS
.box::before{
	content: "앞"
}
.box::after{
	content: "뒤"
}

- print
앞content!뒤

---

Attribute (속성선택자)

• ATTR
  특정 속성을 포함하는 요소 선택

- HTML
<input type="text" value = "Hello">
<input type="password" value = "1234">
<input type="text" value = "ABCD" disabled>

- CSS
[disabled] {
	color: red;
}

• ATTR=VALUE
  특정 속성을 포함하고 특정 값인 요소 선택

- HTML
<input type="text" value = "Hello">
<input type="password" value = "1234">
<input type="text" value = "ABCD" disabled>

- CSS
[type="password"] {
	color: red;
}

---

스타일 상속

스타일 상속
글자/문자 관련 속성들은 상속됨
상속되지 않는 속성들은 inherit를 사용해서 상속할 수 있음

---

선택자 우선순위

선택자 우선순위
같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
1. 점수가 높은 선언이 우선함
2. 점수가 같다면, 가장 마지막에 해석된 선언이 우선함

- HTML
<div id="color_yellow"
    class="color_green"
    style="color: orange;">
    hello!
</div>

- CSS
div {color: red !important;} -> 태그
#color_yellow {color: yellow} -> ID
.color_green {color: green;} -> Class
div {color: blue;} -> 태그
* {color: darkblue} -> 전체
body {color: violet} -> 태그

!important : infinity
인라인 : 1000
ID : 100
CLASS : 10
태그 : 1
전체 선택자 : 0
상속 : X