코드스피츠 채널에서 보고 정리한 글입니다.
환경적인 요인
메타포
를 사용 ( 계산식, 함수)
Geometry Calculate
reflow
Fragment Fill
repaint
Css 는 버전이 아니라
level
로 표현
w3 community and business group
현재 W3 에서 만 권고 사양을 봐야 되는 게 아니라 여러 그룹도 확인해야 한다. 이제는 w3 draft 가 아니더라도 각 그룹에 drart 로 지정하고 spec 을 사용하게 된다. crome
서양의 학문의 용어는 전부 고유 명사이다.(일반 명사를 고유명사로 만들어 버린다.) 고유명사는 한국어로 번역이 안된다.
Css2.1 Visual formatting model - positioning schemes & normal flow
어떻게 화면에 보이는 것을 모델링 할 것인가?
static
| relative
| 2가지 계산 공식으로 설명된다. Normal Flow에 만 자동으로 계산이 적용된다.
Block Formatting contexts
- BFC
부모
의 가로의 한 줄
을 다 차지 하는 행위 (부모 만큼)Inline Formatting Contexts
- IFC
나의
컨텐츠 크기만큼 가로
를 차지 한다.얼만큼 내려 가나?
word break 를 주면 느려진다.
Relative Positioning - position에 속해 있다.
static 과 Relative 를 만나면 Relative 가 z-index가 뜬다. (위로 차지 한다.)
Left | Right | None | Inherit
new BFC
(새로운 영역이 생긴다.)Float over normal Flow
(normal Flow 위에 그려진다.
)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<div style="width:500px">
<div style="height: 50px; background-color: red;"></div>
<div style="width: 200px; height: 150px; float: left; background: rgba(0undefined 255undefined0undefined0.5)"></div>
<div style="height: 50px; background-color: skyblue;"></div>
</div>
</body>
</html>
Inline Guard
(text와 inline 요소에 대해서 Guard 된다.)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<div style="width:500px">
<div style="height: 50px; background-color: red;"></div>
<div style="width: 200px; height: 150px; float: left; background: rgba(0undefined 255undefined0undefined0.5)"></div>
Hello
<div style="height: 50px; background-color: skyblue;">WORLD</div>
!!
</div>
</body>
</html>
Line Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<style>
.left {
float: left;
background: green;
}
.right {
float: right;
background: red;
}
</style>
<body>
<div style="width:500px">
<div class="left" style="width:200px; height: 150px;">1</div>
<div class="right" style="width:50px; height: 150px;">2</div>
<div class="right" style="width:50px; height: 100px;">3</div>
<div class="left" style="width:150px; height: 50px;">4</div>
<div class="right" style="width:150px; height: 70px;">5</div>
<div class="left" style="width:150px; height: 50px;">6</div>
<div class="left" style="width:150px; height: 50px;">7</div>
<div style="height: 30px; background: red">ABC1 ABC2 ABC3 ABC4 ABC5 ABC6 ABC7 ABC8</div>
</div>
</body>
</html>
Css2.1 Visual formatting model
Visible | Hidden | Scroll | Inherit | Auto(default)
Hidden, Scroll 만 Flow 와 관련이 있다.
Fist Line Box Bound ( 라인박스의 크기를 고려해서 BFC 가 생성된다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<style>
.left {
float: left;
background: green;
}
.right {
float: right;
background: red;
}
.hidden {
overflow: hidden;
}
</style>
<body>
<div style="width:500px">
<div class="left" style="width:200px; height: 150px;">1</div>
<div class="right" style="width:50px; height: 150px;">2</div>
<div class="right" style="width:50px; height: 100px;">3</div>
<div class="left" style="width:150px; height: 50px;">4</div>
<div class="right" style="width:150px; height: 70px;">5</div>
<div class="left" style="width:150px; height: 50px;">6</div>
<div class="left" style="width:150px; height: 50px;">7</div>
<div style="height: 30px; background: red">ABC1 ABC2 ABC3 ABC4 ABC5 ABC6 ABC7 ABC8</div>
</div>
<div style="width:500px; clear: both;">
<div class="left" style="width:200px; height: 150px;">1</div>
<div class="right" style="width:50px; height: 150px;">2</div>
<div class="right" style="width:50px; height: 100px;">3</div>
<div class="left" style="width:150px; height: 50px;">4</div>
<div class="right" style="width:150px; height: 70px;">5</div>
<div class="left" style="width:150px; height: 50px;">6</div>
<div class="left" style="width:150px; height: 50px;">7</div>
<div class="hidden" style="height:30px; background: red;">A</div>
<div class="hidden" style="height: 15px; background: orange">B</div>
<div style="height: 30px; background: black"></div>
<div class="hidden" style="height: 30px; background: orange">C</div>
<div class="hidden" style="height: 20px; background: orange">D</div>
<div style="height: 30px; background: black"></div>
<div class="hidden" style="background: orange">E</div>
<div style="height: 30px; background: black"></div>
<div class="hidden" style="height: 30px; background: orange">F</div>
<div style="height: 30px; background: black"></div>
</div>
</body>
</html>
overflow module level3 draft
Visible | Hidden | Scroll | clip | Auto(default)
Css2.1 Ui module level3
clip | ellipsis
충분한 연습이 필요 하다.