1. CSS 기본

기본 문법, 주석

<div>tonyhan</div>

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

• 선택자{속성: 값;}
  선택자 : 어디에 적용할지, 태그/id/class 사용가능
  속성 : 스타일의 종류
  값 : 어떤 속성이 들어갈지

/* 주석 */
color: red;
margin: 20px; 요소 외부 여백

안쪽에 있는 성분이 더 앞으로 나오게 된다.

---

CSS 선언 방식

• 내장 방식 : 별도의 css 필요없음, css가 많아지면 보기불편. 잘 안씀.

<style>
  div{
	}
</style>

• 링크 방식 : css 우선순위 최우선이고 유지보수 어려워서 잘 안씀

• 인라인 방식 : 링크로 파일을 가져와서 연결하는 방식. 병렬방식

• @import 방식
  

css의 @import 규칙으로 css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식

위와 같은 것은 직렬방식으로 연결되어 있다고 이야기 한다. box.css는 main.css가 연결되기 전까지는 box가 연결되지 않는다. 그래서 연결을 지연시키거나 단절시킬 수 있다. 많이 사용하지 않는다.

---

CSS 선택자

기본

* { : 전체 선택자, 복합 선택자 쓸때만 사용함
	color: red;
}

li { : 태그 선택자, 태그 이름인 것에 선택
	color: red;
}

.orange { : 클래스 속성의 값이 orange인 요소 선택
	color: red;
}

#orange { : id 속성의 값이 orange인 요소 선택
	color: red;
}

복합

뒤에서 앞으로 해석하는게 보다 편함

span.orange { 일치 선택자, 동시에 만족하는 요소 선택, 반드시 태그->클래스 순서로 선택자를 사용해야한다. 띄어쓰기 하는거 아니다.
	color: red;
}

<span class="orange"></span>

ul > .orange { 자식 선택자, 선택자 ul의 자식 요소 .orange를 선택
}

<ul>
	<li class="orange">
</ul>

div .orange { : 하위(후손) 선택자, 선택자 div의 하위 요소 .orange를 선택 띄어쓰기도 하나의 기호, 많이 씀
}

<div>
	<ul>
    	<li class="orange"></li>
    </ul>
    <span class="orange"></span>
</div>

.orange + li { : 인접 형제 선택자, orange의 다음 형제 요소 li 하나를 선택
}

<ul>
	<li class="orange"></li>
    <li></li> : 얘만 선택됨
    <li></li>
</ul>

.orange ~ li { : 일반 형제 선택자, .orange의 다음 형제 요소 li 모두를 선택
}

<ul>
	<li class="orange"></li>
    <li></li> : 얘만 선택됨
    <li></li> : 얘도 선택됨
</ul>

가상 클래스

마우스를 올리었을때 바뀐다. css에서 극히 일부분 바뀔 수 있는 기능을 제공해준다.

transition 속성을 넣으면 자연스럽게 칸이 늘어나는 것을 확인할 수도 있다.

색깔을 바꿀 수도 있다.

a:hover { : 가상 클래스 선택자 hover
	color: red;
}

a:active { : active, 마우스를 클릭하고 있는 동안 선택
}

누르고 있는 동안 바뀌는 것을 확인할 수 있다.

a:focus { : focus, 요소가 focus가 되면 선택을 하게 된다.
}

focus가 될 수 있는 요소는 HTML 대화형 콘텐츠(input, a, button, label, select) 혹은 tabindex 속성을 사용한 요소도 사용가능

이런식으로 input 요소 선택시 검은 테두리가 생긴다.

이런식으로 색이 바뀌게 만들 수 있다.

tabindex 속성을 넣어서 이렇게 바뀔 수도 있다.

.fruits span:first-child { : first-child, 선택자 span가 형제 요소 중 첫째라면 선택
}

첫번째 자식을 고르는데 -> span을 가지고 있어야 하고 -> fruit class의 후손이어야 한다.

.fruits div:first-child {}
첫번째 자식을 고르는데 -> div 이어야 한다. -> fruit 클래스의 후손이어야 한다. 이 조건에 만족하는 건 없다.

<div class="fruit">
	<span></span> : 얘 선택
    <span></span>
    <div></div>
    <p></p>
    <h3></h3>
</div>

.fruits h3:last-child { : last-child, 선택자 h3가 형제 요소 중 막내라면 선택
}

<div class="fruit">
	<span></span>
    <span></span>
    <div></div>
    <p></p>
    <h3></h3> : 얘 선택
</div>

.fruits *:nth-child(2) { : NTH CHILD, 현재 요소 중 (n)째라면 선택
}
여기에서 전체선택자가 사용된다.

<div class="fruit">
	<span></span>
    <span></span> : 얘 선택
    <div></div>
    <p></p>
    <h3></h3>
</div>

.fruits *:nth-child(2n) { : 현재 요소 중 짝수 번째 선택
}
n은 0부터 1..2... 순으로 세어가면서 선택을 하게 된다.
.fruits *:nth-child(n+2) { : 2번째 요소 부터 선택하게 된다.
}

.fruits *:not(span) { : 부정 선택자, span이 아닌 요소 선택 
}
여기에서 전체선택자가 사용된다.

가상 요소

.box::before { : 가상 요소 선택자, 인라인 요소가 삽입됨, 가상의 요소를 만들어서 삽입하는 특징을 가진다. .boc 요소의 내부 앞에 내용을 삽입. 자주사용함.
	content: "앞!";
}
반드시 content라는 속성의 내용을 비워두는 한이 있더라도 반드시 작성해주자

<div class="box">
	여기에 내용이 삽입됨
	Content
</div>

.box::after { : 가상 요소 선택자, 인라인 요소가 삽입됨, 가상의 요소를 만들어서 삽입하는 특징을 가진다. .boc 요소의 내부 뒤에 내용을 삽입. 자주사용함.
	content: "뒤!";
}

<div class="box">
	
	Content
    여기에 내용이 삽입됨
</div>

이제 여기에서 생기는 문제점이 before, after은 모두 인라인요소이다보니 width, height를 설정해주어도 박스가 생기지 않는다. 그래서 인라인을 블록요소로 바꾸기 위해 display:block;을 사용하자

속성

[disabled] { : 속성 선택자, 특정 속성을 가진 것을 찾는다.
}

[type] { : 속성 이름만 찾아서 선택하는 것은 유용해 보이지 않는다.
}

[type="password"] { : 속성 type이면서 값이 password인것을 찾는다.
}

<input type="text" value="tonyhan18" />
<input type="password" value="1234" />
<input type="text" value="ABCD" disabled />

[data-fruit-name] {
}

data타입도 가능하다.

스타일 상속

스타일을 상속할 수 있다.

그런데 모든 속성이 상속되지 않고 특정 속성들만 상속된다.
주로 크기, 색깔, 정렬, 폰트 등 글자/문자 관련 속성들만 가능하다.

그렇다고 모든 글자/문자 속성이 상속되는 것은 아니다.

또한 강제로 상속시킬수도 있다.

inherit를 사용하면 부모요소의 높이값이 강제상속될 수 있다.

위와 같이 색깔부분도 강제상속된것을 확인할 수 있다.

선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우,
어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

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

위와같이 여러가지가 섞이어 있으면 무엇을 우선적으로 적용하게 될까?

div : 태그 선택자이고 !important로 끝난다.
#color_yellow : id선택자이다.
.color_green : 클래스선택자이다.
div : 태그 선택자인데 !important가 없다.
* : 전체 선택자
body : 태그 선택자

점수를 매기면 위와같이 매기어진다.

!important > inline > ID > Class > 태그 > 전체 > body
넓은 곳을 담당할 수록 점수가 낮아진다.

!important(중요도)
점수가 같으면 마지막 정의가 우선된다. 이를 선언순서라고 부른다.
body라는 태그에 속성을 적용하면 상속되기 때문에 점수를 계산하지 않는다.

대충 위의 예제로 점수를 계산해보자
특이한 것 중심으로 보면
가상클래스 선택자(:)는 10점이다.
가상요소(:: == 태그)는 1점이다.
:not(부정선택자)인데 가상클래스 선택자이지만 점수 계산해주지 않는다.

---