1. 선택자 정리
-> CSS에서는 스타일링 해줄 요소를 선택자로 결정
-태그 이름
|
1
2
3
4
|
/* 모든 <h1> 태그 */
h1 {
color: orange;
}
|
cs |
-클래스 / 아이디 선택자
|
1
2
3
4
5
6
7
8
9
|
/* 'important'라는 클래스를 갖고 있는 모든 태그 */
.important {
color: orange;
}
/* 'favorite'라는 아이디를 갖고 있는 태그 */
#favorite {
color: blue;
}
|
cs |
-자식 선택자
|
1
2
3
4
5
|
/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div1 i {
color: orange;
}
|
cs |
-직속 자식(direct children)
|
1
2
3
4
|
/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
color: orange;
}
|
cs |
-복수 선택
|
1
2
3
4
|
/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */
.two, .four {
color: orange;
}
|
cs |
-여러 조건
|
1
2
3
4
5
6
7
8
9
10
|
/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
color: blue;
}
/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
color: orange;
}
|
cs |
-Pseudo-class (가상 클래스) -> :(클론) 사용하여 가상 클래스 선택
-> n번째 자식
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
color: blue;
}
/* .div1의 자식인 <p> 태그 중 첫 번째 */
.div1 p:first-child {
color: red;
}
/* .div1의 자식인 <p> 태그 중 마지막 */
.div1 p:last-child {
color: green;
}
/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */
.div1 p:not(:last-child) {
font-size: 150%;
}
/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */
.div1 p:not(:first-child) {
text-decoration: line-through;
}
|
cs |
-> 마우스 오버(hover)
|
1
2
3
4
5
6
7
8
|
h1 {
color: orange;
}
/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
color: green;
}
|
cs |
-상속되는 속성들 color/ font-family/ font-size/ font-weight/ line-height/ list-style/ text-align/ visibility
-항상 상속되는 것은 아님 (ex) <a>태그에는 color속성 상속 X => 억지로 받아오려면 inherit 값 사용
|
1
2
3
4
|
.div2 a {
color: inherit;
}
|
cs |
3. CSS 우선 순위
-순서 : 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어 쓰게 됨
-명시도(specificity)에 따라 우선순위 결정
a.인라인 스타일 (가장 우선순위 높음)
b. 선택자에 id 多 우선 순위 높음
c. 선택자에 class , attribute , pseudo-class 多 우선 순위 높음
d. 그냥 요소(가상요소) 많은 순
4. CSS 다양한 단위
-px : 절대적인 값 / 다른 요소의 값에 영향 x
-rem : 상대적인 값 / html 태그의 font-size 영향 받음 / 2rem : html 태그의 font-size X2
-em : 상대적인 값/ 자기 자신의 font-size 기준/ 자기의 size를 따로 정해주지 않았다면 상위 요소에서 상속받은 값 기준
-%(퍼센트) : 상대적인 값 / 어떤 항목에 쓰이냐에 따라 다른 기준 적용 / ex) font-size에서 %사용 시 곱해주는 방식 계산
|
1
2
3
4
5
6
7
8
9
10
11
|
.container {
font-size: 20px;
background-color: lime;
}
.text {
font-size: 180%; /* 상위 요소인 container의 font-size * 1.8 = 36px */
background-color: skyblue;
margin: 0;
}
|
cs |
/ margin, padding 단위로 사용 -> 상위 요소 width 기준 계산 , margin-top , padding-bottom 등 상하 속성 조절 시 상위요소 height가 아닌 width 기준으로 계산
|
1
2
3
4
5
6
7
8
9
|
.container {
width: 200px;
background-color: lime;
}
.text {
padding-left: 30%; /* 상위 요소의 width * 0.3 = 60px */
}
|
cs |
-참고 : https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
'Web > HTML & CSS' 카테고리의 다른 글
| 8. Positioning (0) | 2019.03.21 |
|---|---|
| 7. display (0) | 2019.03.19 |
| 5. BOX Model -(2) (0) | 2019.03.12 |
| 5. BOX Model -(1) (0) | 2019.03.03 |
| 4. text 스타일링 (0) | 2019.02.27 |
