CSS - 사용법, Syntax, Selectors
CSS 사용 방법
- link 태그 사용 (주로 사용)
<html>
...
<link rel="stylesheet" href="./style.css" />
- <style> 태그 사용
<html>
...
<style>
선택자 {
속성: 값;
}
</style>
- inline에 <style> 태그 사용
<span style="속성: 값">
CSS Syntax
선택자 {
속성: 값;
}
selector {
property: value;
}
; 콤마(,)의 역할. 병렬적으로 적용
selector (선택자)
1. type selector
특정 태그 타입을 직접 선택
h1 {
property: value;
}
p {
property: value;
}
2. class selector
- HTML에서 특정 태그의 class 값을 설정하면 값이 클래스가 됨.
- .classname 마침표가 클래스를 선택
HTML 파일
<div class="box">
...
</div>
CSS 파일
.box {
property: value;
}
- 다수의 태그를 하나의 class 값으로 묶어서 동시에 CSS 적용 가능
HTML 파일
<h1 class ="box">
<div class="box">
...
</div>
CSS 파일
.box {
property: value;
}
- 하나의 태그에 다수의 class 값 설정 가능
HTML 파일
<div class="box-0 box-1 box-2">
...
</div>
CSS 파일 선택 방법
.box-0.box-1.box-2 {
property: value;
}
3. id selector
- id는 단 한개만 존재
- #으로 선택
HTML 파일
<h1 id="unique">
...
CSS 파일
#unique {
property: value;
}
자식 자손 형제
<section>
<h1> </h1>
<ul>
<li></li>
</ul>
<section>의 자식은 <h1>과 <ul>.
<h1>과 <ul>은 형제.
<section>의 자손은 <li
4. Child Combinators(자식 선택자)
- parent > child
HTML 파일
<section>
<h1> 가 <h1>
<ul>
<l1>
<h1> 나 <h1>
<p>
CSS 파일
section > h1{
property: value;
}
'가'에 CSS 적용
5. Descendant Combinators(자손 선택자)
- parent Descendant
HTML 파일
<section>
<h1> 가 <h1>
<ul>
<l1>
<h1> 나 <h1>
<p>
CSS 파일
section h1{
property: value;
}
'가'와 '나'에 CSS 적용
6. Sibling Combinators(형제 선택자)
- parent ~ sibling
<li>1</li>
<li class="active">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
.avtive ~ li {
property: value;
}
3,4,5에 CSS 적용
- parent + sibling
<li>1</li>
<li class="active">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
.avtive + li {
property: value;
}
3에 CSS 적용
Structural Pseudo-classes
- 가상 클래스(Pseudo-classes
- element:first-child
<li>1</li>
<li class="active">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
li:first-child {
property: value;
}
1에 CSS 적용
- element:last-child
li:last-child {
property: value;
}
5에 CSS 적용
- element:nth-child(n)
li:nth-child(n) {
property: value;
}
n번째 <li>에 CSS 적용
li:nth-child(2n) {
property: value;
}
짝수 번째 <li>에 CSS 적용
li:nth-child(2n-1) {
property: value;
}
홀수 번째 <li>에 CSS 적용
User Action Pseudo-classes
- element:hover
- 마우스를 특정 요소에 올렸을 때 CSS 적용
HTML 파일
<a href="#"> 마우스 올려봐 </a>
CSS 파일
a:hover {
property: value;
}
- element:active
- 특정 요소를 누르는 찰나의 순간에 CSS 적용
HTML 파일
<a href="#"> 클릭해봐 </a>
CSS 파일
a:active {
property: value;
}
- element:focus
- 클릭하고 있는 동안 CSS 적용
HTML 파일
<input type="input"> 클릭해봐 </a>
CSS 파일
a:focus {
property: value;
}
Selector 우선순위
- CSS는 기본적으로 나중에 작성한 스타일이 적용.(덮어쓰기)
p {
color : blue;
}
p {
color : red;
}
<p>는 빨간색 적용
- Selector 우선순위 금메달 : id 은메달 : class 동메달 : type
type(태그 직접 입력) < .class, 가상 클래스 < #id
#id < #id.class
Rule Breaker (우선 순위 제거)
- 될 수 있으면 지양
- inline 태그
<span style="속성: 값">
- !important;
p {
property: value; !important;
}
