2020-05-21 TIL

할 일 목록

1. 코드 스피츠 CSS 정리

완료하지 못한 목록

완료 목록

코드 스피츠 1강

Graphics -> 점을 찍는 행위, 점찍는 방법 Graphics의 기본적인 요소 : x, y, width, height, color

Fixed Number

Graphics의 가장 원시적인 체계로 고정된 숫자로 표현하는 체계이다.

단점

해상도, 창 사이즈, 가로모드, 세로모드, 크롬 사이즈 같은 환경이 변하게 되면 적응할 수가 없다.

Chrome : window의 닫기버튼, 스크롤바 같은 것들.

metaphor

퍼센트는 환경을 인식해서 고정 숫자로 바뀌게 되는데 그렇다면 이건 함수로 볼 수 있다. 공식을 이용해서 환경을 인식해 숫자로 변화시켜주는 것을 말함. 한 마디로 함수다. 이런 것을 Abstract Calculator라고 한다.

추상화된 Graphics 시스템을 이어받는 공통적인것들을 Component라고 한다. 예로 HTML을 들 수 있다. 이미지 파일을 표한하기 위해 image 태그에 파일 경로를 넣어주는것.

HTML 속성들은 공통적인 스타일 속성을 갖는데 라디오 버튼, drv, 이미지와 같은 스타일 속성을 먹는 것들은 공통되어져 있는 시스템 하에 Component들이 구현된것. 그러면 HTML 체계 전체를 FrameWork라고 할 수 있다.

Component들이 일정한 규칙과 사용방법을 지키는 형태대로 구현되어져 있다면 Framework이라고 부른다.

metaphor의 종류 : %, left, block, inline float

Rendering

어떤 대상을 내가 원하는 모습으로 다시 그려내는것. 일반적으로 보다 구체적이고 시각적인 형태로 바꿔주는 것. 그림을 그리기 위한 데이터를 어떻게 그림으로 바꿔내는가에 대한 이야기다. geometry(reflow)로 계산하고 fragment fill(repaint)로 채운다. 영역을 나누고 채운다.

Geometry Calculate

지형을 나눠주는 것. 영역을 나눠주는것.

fragment fill

칠하는 대상을 fragment라고 하며 그곳을 색칠함.

pixel은 중립적이지 않다.일반적으로 휴대폰에서 HTML 구현해서 뷰포트를 스케일로 맞추면 해상도가 640 으로 나옴. 그럼 진짜 우리 휴대폰의 pixel이 640개일까 ? 아니다. 이때의 pixel은 뭔가?

CSS

어떻하면 고정된 숫자를 사용하지 않고 계산된 체계로 그래픽을 표현할까와 geometric 영역을 어떤식으로 표현할까 또 색칠할때 어떻게 명령을 내릴까에 대한 일종의 언어이다. 선언적임.

추상적인 체계를 표현하는 방법은 실제로 공식이 간단하지 않은 경우가 많다. 예로 right를 구현한다면, 부모의 레이아웃의 width를 구해 자식의 width를 빼고 그자리에 두는 것이다. 편하게 사용하지만 실제로 내부에선 복잡하다.

CSS에는 다양한 추상적인 계산체계를 표현해주는 메타포에서 어떻게 내부에서 계산되는지 이해해야만 원하는 레이아웃을 그릴 수 있는 것임.

CSS의 속성 또는 값이 구체적으로 발현될떈 어떤 방식으로 계산되서 표현되는지 이해하는 것이 중요하다.

맞는 구현인지 틀린 구현인지 판정하는 것은 사양서를 본다. 브라우저가 작동하는게 맞는지 틀린지 보는것은 사양서를 본다. 표준이 무엇인지 알아야 표준대로 구현하고 나머지를 폴리필 할 수 있다. 그러기 위해선 뭐가 표준인지 알아야함.

CSS LEVEL1 -> a4 한장 짜리로 할 수 있는게 거의 없다. CSS LEVEL2 -> MS IE4가 세상을 지배해서, 이때의 스펙은 MS가 제안한게 많음. CSS LEVEL2 + MODULE -> CSS는 그림에 대한 건데 하나의 스펙으로 관리하는것을 무리라는 주장이 나와 관심분야별로 Module이란 시스템을 넣어 사양을 모듈별로 관리하기로 함. 맥, 윈도우 등등의 것들을 하나의 단일 사양에서 관리하기 어려워 사양을 쪼개 모듈로 관리함. 그래서 LEVEL2의 각종 사양들이 모듈화 되어져 있다. CSS LEVEL 2.1 -> 이것을 기점으로 CSS에 있는 모듈들이 모두 CSS2로 고정 되었음. 여기까진 CSS LEVEL이 존재함. 여기에 나와있는 것들은 CSS 2.1 사양이라고 불러도 되는거들. CSS LEVEL2.1 Include LEVEL 3 Module -> 어떤 그래픽스 시스템은 고전이기 때문에 이미 확정된것들이 있음. 어떤건 발전하는 중이기 때문에 레벨업 될게 있음. 그래서 2.1에서 3으로 가는게 불가능 하였음. 2.1 모듈들을 보면 몇가지 것들이 레벨이 3이 됬었다. 우리가 흔히 부르는 CSS3은 CSS2.1에 포함되어있는 모듈들중에 레벨 3인 애들을 모아 부르는 것임. 공식 문서에는 CSS3은 존재하지 않음. 그 이후 Module level이란 말로 바뀐다.

W3C가 영향력을 가질땐 아이폰 만들기 전임. WICG(WEb Platform Incubator community group) RICG(responsive issues community group) 위의 두개가 W3C를 무시하고 브라우저에 탑재하기 시작함.

Position

geometry의 left 또는 top을 결정할때 사용하는 추상적인 의미 체계.

STATIC, RELATIVE, ABSOLUTE, FIXED, INHERIT 위의 것들을 모두 계산 공식으로 볼 수 있음

Static으로 줬을때랑 relative로 줬을때 계산하는 방법이 각각 다름. fixed number로 바꿀때 다 달라짐.

Normal Flow

position이 static이거나 relative일 경우에 적용된다. 나머지 셋은(absolute, fixed, fingerit) normal flow에 들어가지 않음.

2가지 계산 방법

밑의 둘은 어떻게 그릴건지 설명하는 공식과 원리이다.

1. block formatting context(bfc)

   • block : 부모의 가로길이를 가득 채운 한 줄을 의미함. 그냥 가로 한줄을 다먹음.
   • 한줄을 다먹을떄 어떻게 계산하는가에 대한 이야기
   • x는 부모의 시작이므로 0
   • y만 신경쓰면 됨. 위의 블록의 height가 두번쨰 bfc의 y값임
   • bfc의 높이는 안에있는 block들의 height의 합이 bfc의 height가 됨.

2. Inline formatting context(ifc)

   • inline : 나의 컨텐츠 크기만큼 가로를 차지하며
   • 첫번쨰 ifc의 가로길이만큼 떨어진 자리의 x가 다음 inline의 시작값.
   • inline 요소들의 width의 합이 부모의 width 보다 크면 다음줄로 내려가는 기능이 있음.
   • inline을 구성하는 요소중에 가장 height만큼 내려옴.

Relative position formatting context : 얘는 normal flow의 일부이긴 하지만 position 모델에서 정의하고 있음.

IFC BFC는 어떻게 한줄을 먹는애를 그리는지 한줄이 아니라 점점인 애들이 그려지는 공식이다.

IFC 영역이 생겨나도 block이 오면 즉시 IFC 영역이 종료되고 다음 block 요소가 만들어짐.

<div style="width:200px;background:red;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

block의 width를 200px를 줬는데 왜 뚫고 나오는 이유는 html 은 그릴때 공백문자가 없는 문자를 하나의 IFC 섹션으로 보기 때문이다. 하나의 인라인으로 표현하는 것임. 나눠지길 바란다면 공백문자를 삽입 해야한다.

다른 방법으로 wordbreaker속성(width에 맞춰 나눠줌)을 주는 방법이 있지만, 그것은 하나하나의 문자를 ifc로 보고 인라인으로 처리한다. 그래서 자동으로 나뉘어 지는것임. 하지만, geometry를 많이 만들기 때문에 브라우저가 많이 느려짐.

그럼 얘는 어떻게 될지 생각해보기 inline 안에 블록요소가 있으면 ?

<div style="width:500px">
HELLO
<span>
    WORLD
    <div style="background:red;">&nbsp;</div>
</span>
!!
</div>

렌더링 시스템과 돔의 포함관계(구조)는 무관하다. 렌더링은 BFC, IFC로 그리기 때문에, dom의 포함관계가 저렇게 될지라도 브라우저는 렌더링 하기 위해 BFC와 IFC 기준으로 그린다. 돔의 포함구조는 생각하지 않는다. 그래서 태그의 구조가 렌더링의 구조와 일치하지 않음.

얘는 어떻게 될까

<div style="width:500px">
    **
    <span>
    HELLO
        <span>WORLD
        <div style="background:red;">&nbsp</div>
    </span>
    !!
    <div style="background:blue">&nbsp;</div>
    </span>
    **
</div>

position에 relative로 줄 수 있음. 이건 static으로 그려서 상대적으로 상대적으로 이동하면 되는것임.

position static과 relative가 섞여있으면 relative가 static 위로 올라옴. 박스의 크기가 변하거나 width 또는 height가 변하지 않음. 얘는 그리기만 상대적으로 그린거지 geometry 계산은 모두 static으로 한 것임.

<div style="width:500px">
    **
    <span>
        HELLO
        <span style="position:relative">WORLD
        <div style="background:red;">&nbsp</div>
    </span>
    !!
    <div style="background:blue">&nbsp;</div>
    </span>
    **
</div>

여기 까지가 normal flow 이고, 레이아웃 그릴때 가장 많이 쓰는 것들임. 그래서 position abstract나 fixed를 주면 normal flow로 작동하지 않음. 그래서 반드시 width를 주지 않으면 가로 공간이 확보되지 않는다던지 함부로 글자가 밑으로 내려오지 height가 확보되지 않는 경우가 생김.

모든 element의 position의 기본값은 static이다. 그래서 normal flow인것임.

FLOAT

1. 어디까지 normal flow를 그리게 할건지의 guard를 만들때 사용함.
2. BFC, IFC 란 공식으로 그려지지 않고, linebox 공식으로 그려짐.
3. normal flow는 IFC, BFC, Relative position로 그려짐.

BFC + Float 결합

<div style="width:500px">
    <div style="height:50px;background:red;"></div>
    <div style="width:200px;height:150px;float:left;background:rgba(0,255,0,0.5);"></div>
    <div style="height:50px;background:skyblue;"></div>
</div>

float이 나온 즉시에 기존까지의 bfc 박스를 파기하고 새로운 bfc 박스를 시작함. 그다음 bluesky가 일반적인 normalflow로 그려지는 것이다. 근데 float는 떠있는것임. 이것을 normalflow + float 모델로 이해할 수 있음. 그래서 float는 추가적인 bfc 박스를 만드는 역할을 한다.

BFC박스의 크기는 float 영역 전체와 inline영역 전체가 다 차지하는 공간 끝까지가 새로만든 bfc영역의 끝인것임.

inline요소에 대한 guard 기능

inline 요소에 float는 guard 역할을 함. 하지만 block은 floating 될뿐 다그린다.

어떻게 그려지는지 생각하라.

<div style="width:500px">
   <div style="height:50px;background:red"></div>
   <div style="width:200px;height:150px;float:left;background:rgba(0,255,0,0.5);"></div>
   HELLO
   <div style="height:50px;background:skyblue;">WORLD</div>
   !!
</div>

linebox

<div style="width:500px;">
    <div style="width:200px;height:150px;float:left;">1</div>
    <div style="width:50px;height:150px;float:right">2</div>
    <div style="width:50px;height:100px;float:right">3</div>
    <div style="width:150px;height:50px;float:left">4</div>
    <div style="width:150px;height:70px;float:right">5</div>
    <div style="width:150px;height:50px;float:left">6</div>
    <div style="width:150px;height:50px;float:left">7</div>
    <div style="height:30px;background:red;">ABC</div>
</div>

처음에 line box가 신경쓰는 것은 float 요소밖에 없다. 라인 박스는 현재 존재하는 float의 영역(가로, 세로)에 의해 줋어든다.

하지만 남아 있는 linebox가 넣으려는 float 블록보다 작다면, 현재 linebox의 경계면 하단선 기준으로 봤을때 기존의 라인박스는 파기하고 현재 라인박스의 바닥면(바운드라인 또는 baseline)을 기준으로 빈공간이 라인박스 영역이됨.

라인박스 계산에서 오른쪽 최저 가장 왼쪽에 있는 오른쪽박스보다 더 오른쪽은 없다 ? 라인박스는 빈공간을 찾는게 아니라, 오른쪽 경계면을 보고 왼쪽 경계면을 본다.

마지막은 float가 아니니까 최초 float가 만들어졌을 때 bfc 영역 기준으로 normal flow가 정렬된다. 이 위치가 inline들이 그려질 위치이다.

<div style="width:500px;">
    <div style="width:200px;height:150px;float:left;">1</div>
    <div style="width:50px;height:150px;float:right">2</div>
    <div style="width:50px;height:100px;float:right">3</div>
    <div style="width:150px;height:50px;float:left">4</div>
    <div style="width:150px;height:70px;float:right">5</div>
    <div style="width:150px;height:50px;float:left">6</div>
    <div style="width:150px;height:50px;float:left">7</div>
    <div style="height:30px;background:red;">ABC1 ABC2 ABC3 ABC4 ABC5 ABC6 ABC7 ABC8 </div>
</div>

Overflow

float의 특약 사항에 대한 것이다. 속성으로 visible, hidden, scroll, inherit, auto 가 존재함. 기본 값은 대부분 auto임. 내부에 있는 크기가 커지면 부모도 같이 커진다. 즉 geometry의 영역이 변한다. 일반적인 브라우저(우리가 쓰는)는 visible은 보일때 까지 커지고 auto가 visible이다.

scroll은 내 geometry가 넘어가는 컨텐츠가 발생하면 스크롤 바를 만든다. hidden은 내 geometry를 넘어가는 컨텐츠가 발생하면 안보여준다.

밑에 여러 overflow가 많지만, overflow의 속성으로 hidden 또는 scroll로 가질 때만 flow(normal??)와 관련이 있다. overflow가 hidden 또는 scroll을 가질땐, 이 값을 갖는 요소로 부터 새로운 bfc를 만든다는 규약이 있음. 이게 float와 관계를 갖음. 직접적인 관계가 아니라 위의 두가지 속성을 사용할 경우에만 새로운 BFC를 생성한다는것이 규약에 있다. 이것들은 First line box bound를 이용해 bfc 영역을 만드는 특별한 기능을 가짐.

<div style="width:500px;">
    <div style="width:200px;height:150px;float:left;background:green;">1</div>
    <div style="width:50px;height:150px;float:right;background:blue">2</div>
    <div style="width:50px;height:100px;float:right;background:blue">3</div>
    <div style="width:150px;height:50px;float:left;background:green">4</div>
    <div style="width:150px;height:70px;float:right;background:blue">5</div>
    <div style="width:150px;height:50px;float:left;background:green">6</div>
    <div style="width:150px;height:50px;float:left;background:green">7</div>
    <div style="height:30px;overflow:hidden;background:red;">A</div>
</div>

맨 처음에 만든 BFC 안에 소속되어져 있었지만, overflow를 넣는 순간 새로운 bfc로 태어난다. BFC는 부모 영역 만큼 width를 갖는건데 그 부모 영역을 계산할 때 linebox의 bound로 인식한다는 스펙이 들어있음. 그래서 블록이 밑과 같이 나옴.

새로운 BFC를 그릴건데 새로운 BFC를 계산할 때 linebox의 bound로 계산한다.

overflow뒤에 overflow가 아닌것이 나오면 처음 만들어진 bfc에 아닌것도 포함된다. 그래서 relative를 줄때 같은 bfc를 기준으로 함께 움직인다.

글자가 그려질공간이 없으면 그려지지 않음. 하지만 영역은 먹는다.

red박스를 주고 black box를 줬는데 안그림. 그릴곳이 없기 때문에

마지막으로 hidden 으로 그려도, linebox 경계가 없기 때문에 일반적인 BFC로 그려짐

원래 컨텐츠가 커서 BFC 박스를 밀어낼때 visible 속성이면 늘어난다. 근데 linebox때문에 inline요소가 밀려서 guard 작동으로 늘어날땐 늘어나지 않음. geomerty는 위에서 설정했는데 fragment 시스템에선 fragment의 linebox 시스템때문에 ABC8까지 그려진 것임. pixel만 저기에 찍힌것 뿐 geometry의 영역으로 먹는건 아님 그림을 그리려다보니 이곳에 그려진것임. 그러다보니 원래 다시 태그로 만들어서 덮혀져 안보여야할 놈이 지금 보여지고 있음. 이런 문제가 있음. 얘는 실체가 없다.공간을 먹는게아님. linebox로 밀린 inline 요소들은 버려진 자식들임 geometry에는 등록도 안된것임.

Overflow -x -y

overflow x축 y축을 따로 관리하는 스펙이다. 속성으로 visible, hidden, scroll, clip, auto가 있음. 근데 얘는 recommandation 까지 갔다가 다시 draft로 변함. 이건 새로운 스펙이 나오면서 기존의 스펙에 영향을 끼치는 사례이기 때문이다.

test-overflow

clip, ellipsis