코드 스피츠 - CSS Rendering 1회차 1/2
Last updated
Was this helpful?
Last updated
Was this helpful?
보고 정리한 내용
craphics라는건 점을 찍는 행위로 볼 수 있다. 점 찍는 방법
FIXED NUMBER
ABSTRACT CALCULATOR
COMPONENTS
FRAMEWORK
고정된 숫자로 표현되어 있다.
x(left), y(top), width, height, color로 표현할 수 있다.
원시적인 방법
하지만 FIXED NUMBER 는 문제가 있다. 다양한 환경에 적용할 수 없다. 범용성을 가지는 craphics system을 만들려면 문제가 된다.
환경적인 요인
screen size
chrome size - 닫기버튼 스크롤바 같은것
hierapchy
이럴경우 숫자를 대신하는 메타포를 사용한다.
%, left, block, inline, float
특정한 기준(부모,화면)으로 나타낸다. 환경을 인식해서 숫자로 나타낸다.
%는 공식이자 함수이다. 2단계를 거치게 된다.
html의 image tag를 예시로 들 수 있다. 컬러가 어디에 위치할지와 가로세로 사이즈까지 지정해 준다.
태그 하나하나가 스타일이 먹혀져 있다. html체계자체를 framework로 볼 수 있다.
컴퓨터 사이언스는 항상 상대적이다. 고정적으로 생각하지 말라
어떠한 대상이 있으면 내가 원하는 모습으로 다시 그려내는 것을 말한다. 그림을 그리기위한 데이터를 어떻게 데이터로 바꿨는지에 대한 것
Geometry Calculate
박스를 찾는다. 영역이 어떻게 나눠져 있는지를 먼저 계산한다. geometry를 계산하는 것을 reflow라고 한다.
Fragment Fill
색칠을 한다. 채우는 행위를 repainting이라고 한다.
css 스펙 보는법
어떻게 하면 고정값으로 나타내지 않고 계산된 체계로 그래픽을 표현할것인지 영역을 어떻게 나눌것인지 어떻게 칠할것인지 boder-radius는 영역을 깎는것일까? 아닐까? 깎는게 맞다. 확인하는법은 border-radius를 준 다음 background-color를 준다.
CSS LEVEL 1 A4용지 한장 정도의 내용
CSS LEVEL 2 + MODULE
CSS LEVEL 2.1
Include level 3 module - css3는 level2.1에 포함된 level3를 css3라 한다. syntax3, cascade3, color3, selectors3, background3, values3, text3, text decor 3, fonts 3, ui 3 레벨 업 중..
MODULE LEVEL
transforms1, compositing1, effects1, masking1, flexbox1, grid1 레벨 업 중..
그 전에는 w3c 권고안에 들어야지만 사용가능 했다. 통제하려고 하였다. 현재는 파워가 많이 없어졌다.
WICG Web Platform Incubator Community Group (크롬에 먼저 반영된다.)
RICG Responsive Issues Community Group
CSS2.1 Visual Formatting Model
Positioning Schemes & Normal Flow
Position이란 어떤 Geometry의 left와 top을 결정하는 추상적인 체계이다.
static | relative | absolute | fixed | inherit
이 모든걸 이제 계산 공식으로 봐야한다.
Normal Flow는 static, relative 가 해당된다.
Normal Flow의 3가지 계산 방식이 있다.
Block Fomatting Contexts (BFC)
Inline Formatting Contexts (IFC)
Relative Formatting Contexts (RFC)
그럼 Block이란?
부모의 가로 길이를 가득 채운 한 줄
X는 무조건 부모의 값이기 때문에 Y값만 생각하면 된다.
BFC
두번째 블록의 Y값은 첫번째 블록 요소 높이값이고 세번째 블록의 Y값은 첫번째 블록과 두번째 블록을 합친 값이이다.
안에 있는 블록요소의 height값이 내 height값
IFC
X값은 내 앞의 요소가 얼마나 차지했냐가 내 X의 값이다.
앞의 요소들의 X의 값들의 합이 부모 width값을 넘으면 밑으로 내려간다.
내 앞에 있는 요소중 가장 height가 큰 값이 line height가 되어 line height값만큼 y가 내려간다. x는 0
base line
인라인을 구성하는 한줄의 요소들 중 가장 큰 애가 있으면 걔를 기준으로 위로 맞춘다. 중간, 밑으로 맞춤
다음 블록요소가 온다면 IFC가 종료되고 BFC가 온다.
이런 블록요소가 있다면 bfc로 인하여 부모의 가로값을 전체를 차지하고 있지만, fragment 영역이 500px인거다. 😳
왜 a는 width 200px에 맞추어 안 끊어지는 걸까? 공백문자가 없는 a는 IFC로 인식하기 때문이다.
혹은 word-break 속성을 줘야한다. 하나하나 문자를 inline으로 생각하라. 대신 엄청 느려진다. geometry 영역이 엄청 늘어나게 되는거다.😳wow..
rendering system과 dom의 구조는 무관하다.
rendering는 BFC + IFC로 그린다.
BFC시작 -> IFC 시작 -> BFC시작 , BFC 끝 -> IFC 끝 -> BFC 끝
RFC
static으로 그렸는데 상대적으로 위치를 이동 시킬 수 있다. 그래서 static으로 그리고 relative로 지정되어 있는 만큼 상대적으로 이동 시킨다.
static으로 그리고 relative로 지정되어 있는 만큼 상대적으로 이동 시킨다. 이 말대로 생각한다면 span과 div (red) 만 50px 이동한다.
normal flow로 먼저 그린 다음에 static으로 그리고 relative로 지시된것 만큼 상대적으로 이동한다.
position static과 position relative가 섞여있다면 무조건 relative가 위로 올라간다!
relative는 box의 크기나 width의 크기가 변하지 않는다.
static으로 그리는 시점에서 geometry가 계산되며 그림만 상대적으로 그릴 뿐이다.
W3C Community And Business Groups()