CSS : Cascading Style Sheets
CSS 적용방법 3가지:
1. 인라인 : 해당 태그에 직접 style속성을 활용
2. 내부참조 : HTML 파일 내에 <style>태그에 지정 -> html이 여러개 라면 중복이 발생.??
3. 외부참조 : <head>내 <link>를 통해 .css 불러오기(프로젝트시 외부참조로 하도록 한다)
선택자 : HTML문서에서 특정한 요소를 선택하여 스타일링 하기 위해서는 반드시 선택자라는 개념이 필요하다.
id 의 선택자는 #
class 의 선택자는 .
CSS 상속 : CSS는 상속을 통해 부모 요소의 속성을 모두(X) 자식에게 상속한다. (모두 상속는 틀린말!(MDN에서 확인))
속성(프로퍼티) 중에는 상속이 되는 것과 되지 않는 것들이 있다.
상속되는 것 : Text 관련 요소(font, color, text-align), opacity, visibility 등
상속되지 않는것 : Box model 관련 요소(width, height, margin, padding, border, box-sizing, display)
position 관련 요소(position, top/right/bottom/left, z-index) 등
** CSS 적용 우선순위(cascading order) **
CSS 우선수위를 아래와 같이 그룹을 지어볼 수 있다.
1순위 : 중요도(Importance) (무적) !important
ex) h2 {color: pink !important}
주의) 앞에 세미콜론 없이 뒤에 !important 작성
2순위 : 우선 순위(Specificity) 인라인 내부＞id선택자（＃）＞class 선택자（。）/요소 선택자＜p＞ p{}
3순위 : 소스 순서 (선언 순으로 계속 덮어간다... 결국 마지막이 적용 반영된다)
|
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!-- 색으로 알아보는 우선순위 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#first {color: violet;}
#first .red {color: red;}
#second {color:green;}
.black {color: black;}
.blue {color: blue;}
h1 {color: yellow;}
h2 {color: pink !important} ★주의) 앞에 세미콜론 없이 뒤에 !important 작성
</style>
<!-- id > class 보다 위인데!! 스타일 선언시 #-. > . 에서도 우선순위가 적용되는 것?! -->
<div id="first"><h1 class="blue red black">A</h1></div>
<!-- 정답: 레드 A-->
<h1 id="first" class="blue black">B</h1>
<!-- 정답: 바이올렛 B-->
<!-- /* 동일 우선순위 내에서는 마지막에 선언된게 적용됨 */ -->
<div id="second"><h1 class="blue black">C</h1></div>
<!-- 정답: 블루 C-->
<div id="second"><h1 class="black blue">D</h1></div>
<!-- 정답: 블루 D-->
<h1>E</h1>
<!-- 정답 : 노랑 E -->
<!-- #. > # 보다 위이다 -->
<div id="first"><h1 class="blue red black" id="second">F</h1></div>
<!-- 정답 : 레드 F-->
<div id="first"><h2 id="second" class="blue red black">G</h2></div>
<!-- 정답 : 무적핑크 G-->
</body>
</html>
|
* 크기 단위
1. px
2. %
3. em : 배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈를 가짐.
자신이 가질 수 있는 사이즈의 배수
-> 24px * 1.5em = 36px
-> 24px * 0.5em = 12px
4 rem : 최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가짐.
-> root em -> 기본 16px
어디에 정의되어도 같은 크기를 가진다.
5. Viewport 기준 : vw, vh, vmin, vmax
box model 구성
Content : 실제 내용이 위치
padding : 테두리 안쪽의 내부 여백, 요소에 적용된 배경의 컬러, 이미지는 패딩까지 적용
Border : 테두리 영역 (보이는 너비에 값이 계산됨됨)
Margin : 테두리 바깥의 외부 여백, 배경색을 지정할 수 없다. (안보임 보이지 않는 손...)
값 넣는 순서
1개 모든영역
2개 상하 / 좌우
3개 상 / 좌우/ 하
4개 상/우/하/좌 (시계방향 적용)
실제 보이는 너비나 높이의 총 값 = 텍스트크기 + 패딩 + 보더 (마진은 보이지 않음)
{ box-sizing : border-box }를 이용하면 원하는 만큼으로 정의가능
마진 상쇄: 인접 형제 요소 간의 margin이 겹쳐서 보임, 제일 큰 값으로 적용
'HTML5+CSS' 카테고리의 다른 글
| Flex (0) | 2020.03.25 |
|---|---|
| 부트스트랩 기본1 (0) | 2020.03.24 |
| CSS 기본2 (0) | 2020.03.23 |
| HTML5 기본정리 (0) | 2020.03.20 |
