1. CSS(Cascading Style Sheets)
룰 기반의 언어
여러가지 규칙을 나열하는 방식으로 작성
특정 요소, 특정 요소들의 집합의 스타일 규칙을 정의
h1{ color:red; font-size: 12px; }사용방법
선택자(Selector) : 스타일을 지정할 HTML 요소를 선택
선언블록: 중괄호 내부에 여러 선언들을 작성
선언 : 프로퍼티와 값으로 이루어진 쌍
선택자의 형태로 이루어진 하나의 rule
2. Cascading 원칙
계단식으로 구성되어 위에서부터 아래로 떨어지는 것을 의미
스타일 우선순위
적용 범위가 적을수록 우선시 된다
tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
인라인 스타일로 작성하면 css파일로 style을 구성해도 인라인 스타일이 적용됨
소스코드의 순서가 뒤에 있으면 덮어쓴다 : 동일한 스타일을 준 경우에 해당됨
스타일 상속
부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
자식 요소에서 재 정의할 경우, 부모의 스타일을 덮어씀
상속이 되지 않는 속성도 존재(배경이미지, 배경 색 등)
3. CSS 적용 방법
내부스타일(embeded)
HTML 내부의 head태그에 style태그를 선언하여 작성
인라인스타일(inline)
하나의 요소에만 스타일을 적용하고 싶을 때 사용
외부스타일(external)
4. 선택자
4-1) 요소 선택자(type selector, tag selector)
4-2) id 선택자
HTML 태그의 전역 속성 중 id 속성으로 선택
이름표를 달아준다고 생각하면 됨(HTML 전체 요소중 하나의 요소에만 지정해야함)
#welcome{ color: red; }
4-3) class 선택자
HTML 태그의 전역 속성 중 class 속성으로 선택
이름표를 달아주지만, 중복이 가능
해당 class를 가진 모든 요소를 선택
요소가 2개의 class를 가지는 경우 마지막에 작성된 스타일이 적용됨
.title{ color:red; }
.title{ color: blue; }class가 title인 요소는 색상이 blue로 적용
4-4) 속성 선택자(Attribute selector)
<style>
a[target] {
color:hotpink;
}
a[href="http://example.com"]{
color:skyblue;
}
a[href^="http://"]{
color:purple;
}
a[href$=".com"]{
color:silver
}
a[href*="example"]{
color:red
}
</style>
<body>
<a href="http://example.com" target="_blank">Example Link(com/http)</a>
<a href="http://example.org" target="_blank">Example Link(org/http)</a>
<a href="https://exa-mple.com">Example Link(com/https)</a>
<a href="https://example.org">Example Link(org/https)</a>
</body>
태그[속성]
태그[속성="값"] : 값이 정확해야만 선택
태그[속성^="값"] : 시작하는 요소를 선택
태그[속성$="값"] : 끝나는 요소를 선택
태그[속성*="값"] : 중간이라도 상관없이 값을 가지는 요소를 선택
5. 가상클래스 선택자 (selector:___)
실제로 존재하지 않는 상태에 이름을 붙여준 것(클래스가 없지만 마치 있는 것 처럼 이름을 붙여줌)
<body>
<h2>Movie List</h2>
<ul>
<li class="movie">Toy Story</li>
<li class="movie">Zootopia</li>
<li class="movie">Inside Out</li>
<li class="movie">Finding Nemo</li>
</ul>
<ol>
<li>Americano</li>
<li>Latte</li>
<li>Hot Choco</li>
</ol>
<p>Lorem ipsum dolor sit amet</p>
<p>consectetur adipiscing elit</p>
<p>Commodi voluptates sint iure quas quasi.</p>
</body>5-1) :first-child(:last-child)
5-2) :nth-child(num)
숫자외에도, 2n, 2n-1, even, odd 등으로 요소를 선택할 수 있음
li:nth-child(3){
color: orange;
}
5-3) :first-of-type(:last-of-type)
5-4) :nth-of-type()
숫자외에, 2n등과 같이 함수형으로 사용 가능
p:nth-of-type(odd){ color:blue; }
5-5) not
selector:not(selector){} : 콜론 앞의 selecotr를 선택하고, 괄호안의 selector를 제외한 나머지를 선택
5-6) hover, active, focus
hover : 마우스를 올려놓고 있을때
active: 마우스를 클릭하고 있을때부터 떼는 시점
focus : 키보드로 tap키를 눌러 요소를 선택한 경우 or input 태그를 입력을 위해 클릭한 경우
<style>
input[type=button]{
background-color: skyblue;
border: none;
}
input[type=button]:hover{
background-color: teal;
color: white;
}
input[type=button]:active{
background-color:red;
}
input[type=button]:focus{
background-color: blue;
}
input[type=text]:focus{
background-color: blue
}
</style>
<body>
<input type="button" value="클릭">
<input type="button" value="클릭">
<input type="button" value="클릭">
<input type="button" value="클릭">
<input type="text">
</body>6. 가상 요소 선택자 (selector::__)
실제로 존재하지 않는 요소, 범위를 만들어 스타일을 부여함
반드시 content 프로퍼티를 추가해주어야 함
6-1) before(after)
<style>
.movie::before{
content: 'Movie';
color: indianred;
}
</style>
<body>
<div class="movie">ToyStory</div>
<div class="movie">Zootopia</div>
<div class="movie">InsideOut</div>
<div class="movie">Coco</div>
<div class="movie">Finding Nemo</div>
</body>
가상의 요소에 style이 적용됨
class가 movie인 요소들에는 적용되지 않음
존재하지 않는 요소인 ::before가 생성됨
content를 가지고 있지만 내용이 의미가 있지 않음 : 꾸밈을 위한 요소라고 여겨짐
메뉴 사이에 구분 bar를 추가할 때 사용
6-2) first-letter
<style>
.lorem::first-letter {
color: red;
}
.lorem::before{
content: 'BEFORE';
}
</style>
<body>
<p class="lorem">Lorem ipsum dolor sit amet consectetur, sequi.</p>
<p class="lorem">Lorem ipsum dolor sit amet consectetur, sequi.</p>
<p class="lorem">Lorem ipsum dolor sit amet consectetur, sequi.</p>
</body>
first-letter를 before 가상요소 선택자와 함께 사용하면, before의 content에 style이 적용됨
7. 선택자 결합
7-1) 하위선택자 : spacing
<body>
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
</ul>
</body>
ul태그의 li태그를 선택하고 싶을때는 spacing
ul li {style 속성}
7-2) 자식선택자 : >
<body>
<ul>
<li>리스트1</li>
<ol>
<li>리스트1</li>
<li>리스트2</li>
</ol>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
</ul>
</body>
바로 밑의 하위 자식만 선택하고 싶은 경우에 사용
ul > li
7-3) 일반 형제 선택자 : ~
형제 요소가 특정 요소 뒤에 있을때 선택가능
<body>
<div>
<p>P</p>
<span>Span</span>
<code>Code</code>
<p>P2</p>
<div>Div</div>
</div>
</body>
code의 형제는 총 5개 : p, span, code, p, div
형제는 코드 앞뒤로 2개씩 있음 : 선택된 형제를 기준으로 뒤에 있는 형제만 선택 가능(p, div)
7-4) 인접 형제 선택자 : +
<body>
<div>
<p>P</p>
<span>Span</span>
<code>Code</code>
<p>P2</p>
<div>Div</div>
</div>
</body>
선택된 요소의 바로 뒤에 인접한 요소만 선택이 가능
code + div를 하게 되면 style 속성 부여 불가
<style>
code + p{
background-color: blue;
}
</style> 
