CodeSpitz - Graphics System & Normal Flow

 

[ Graphics System 제공 방식 ]

 그래픽스는 점을 찍는 과정이라 볼 수 있으며 x, y, width, height, color를 이용해 표현할 수 있다.

 

 - FIXED NUMBER : 고징된 숫자를 이용하여 표현하는 체계. 그래픽스 시스템의 가장 원시적인 형태.

 문제 : 환경에 적응할 수가 없다는 문제가 있다. 특히 screen size, chrome size, hierarchy가 문제가 된다. screen size를 예를 들면 전용 해상도를 가지고 있는 기기에 전용 프로그램을 만들 땐 문제가 아니었으나 범용성 있는 그래픽스 시스템을 만들려고 할 때 문제가 된다.

 

 - ABSTRACT CALCULATOR : 추상화되어 있는 계산기를 사용하는 체계. 함수를 통해 어떻게 계산할지 기술하는 방식이다. 그래픽스 시스템은 최소 이 시스템으로 표현된다.

 %, left, block, inline, float 중 %를 보면 특정 대상에 대한 비율을 이용한다는 것을 알 수 있다. %는 실제 화면이 그려질 때마다 환경을 인식해서 숫자로 바뀌어 그래픽을 그린다. 이런 점에서 %는 공식, 수식, 함수라 할 수 있다.

 

 - COMPONENTS : 추상화되어 있는 그래픽스 시스템 체계를 이어받는, 공통점을 갖고 있는 것들을 만들어 component 형태로 제공한다.

 

 - FRAMEWORK : component들이 일정한 규칙과 사용 방법을 지키는 형태로 구현하여 framework로 제공한다.

 

 ex) component의 대표적인 예로 HTML tag를 들 수 있다. 우리는 이미지를 표현하기 위해 점 하나 하나를 표현하는 것이 태그 하나로 간단하게 표현한다. 그리고 HTML tag들 하나 하나를 component라 보자. HTML tag들은 모두 공통적인 스타일 속성들이 먹힌다. 이런 점에서 공통된 시스템 하에서 이 component들이 개발되어 있다고 볼 수 있으니 HTML 자체를 framework라 볼 수 있다.

 이 개념은 확장되어 부트스트랩에 있는 하나 하나를 component로 본다면 부트스트랩은 framework가 된다. 또 윈도우에 있는 어플리케이션 하나 하나를 component로 본다면 윈도우 자체는 framework로 볼 수 있다.

 

 * 용어 정의 주의점

양키들은 용어를 확정적으로 정의하지 않고 상대적으로 정의하는 것이 많다. 클래스의 부모, 자식. 브라우저 시점에서 윈도우는 OS이지만 브라우저 내 자바스크립트 입장에선 브라우저가 OS 같은 역할을 한다. 하드웨어, 소프트웨어 개념도 어느 레벨에서 보는가에 따라 하드웨어로 보일 수도 있고 소프트웨어로 보일 수도 있따.

 

 * chrome 브라우저에 있는 닫기 버튼, 스크롤 바 같은 요소들을 말한다.

 * component definition

 1. a component is an identifiable part of a larger program or construction. Usually, a component provides a particular function or group of related functions.

 2 . a component is a reusable program building block that can be combined with other components in the same or other computers in a distributed network to form an application.

 

 * framework definitino

  1. a framework is the skeleton of an application that can be customized by an application developer

 

 

[ Rendering System ]

 어떠한 대상을 원하는 모습으로 다시 그려내는 것을 렌더링이라 한다. 일반적으로 보다 구체적이고 시각적인 형태로 바꾼다. 

 그래픽스 시스템은 어떻게 점을 찍는지에 대해 중점을 둔다면 렌더링 시스템은 어떠한 체계를 통해서 그림이 표현되는가에 중점을 둔다.

 

 렌더링은 보통 두 단계로 나뉜다.

 - Geometry Calculate : 어떻게 영역이 나누어져 있는지 계산하는 단계. geometry를 계산하는 과정을 reflow라고 한다.

 - Fragment Fill : 색칠하는 단계. reflow된 영역 안에 채우는 행위를 repaint라고 한다.

 

 * fragment : 색칠하고자 하는 대상

 * 왜 pixel이라는 단어를 사용하지 않는 이유는 pixel이 중립적이지 않은 용어이기 때문이다. 레티나, QHD 등에서 pixel이 의미하는 물리적인 화소 단위가 달라진다. 그래서 사용하지 않는다.

 

 

[ CSS Specifications ]

 CSS는 어떻게 하면 고정된 숫자를 사용하지 않고 계산된 체계로 그래픽을 표현하는가와 geometry의 영역을 어떤 식으로 표현하고 색칠을 할 때 어떤 식으로 명령을 내릴까에 대한 일종의 언어라고 볼 수 있다.

 

 ex) right를 예로 들어보자. right를 정확히 계산하려면 부모의 width - 자신의 width를 자신의 left로 하겠다는 의미인데. 부모도 그 중 마지막 부모를 대상을 계산해야 된다. 또 내 width는 overflow hidden이 아니라면 또 내용에 따라 width가 계속 바뀐다. right라는 키워드로 간단하게 쓰지만 실제로 계산해 보려고 하면 매우 복잡하다.

 

목표 : CSS에서는 굉장히 풍부한 추상적인 계산 체계를 표현하는 metaphor가 많이 나온다. 각각의 metaphor에 대해 어떤 식으로 내부에서 계산되는지 이해해야 우리가 원하는 레이아웃을 그릴 수 있다. 따라서 CSS를 공부한다는 것은 CSS에서 나오는 속성 또는 값이 구체적으로 발현될 때는 어떠한 방식으로 계산되어 표현되는 것인지 이해하는 것이라 할 수 있다.

 

 브라우저 시스템에 렌더링 시스템의 추상적인 내용을 많이 넣기 위해 다른 시스템에 있던 많은 렌더링 시스템을 차용해왔다. 기존에 있는 많은 학문들을 받아들여 체계가 상당히 복잡하다. 이러한 복잡한 체계를 어떻게 관리하는지가 중요하다. 맞는 구현인지 아닌지 판단하기 위해 사양서를 확인해야 한다. 사양서를 통해 표준을 알면 브라우저가 어떤 기능을 잘못 구현했더라도 표준에 따라 프로그램을 구현한 후 polyfill 할 수 있다.

 

 - CSS Level 1 : HTML 내에 그림과 관련된 것들을 다 집어넣어 지저분해 진 것을 해결하기 위해 만들어졌다. 기존의 그래픽 시스템에 있는 것들을 차용해와서 만들었다고 한다. version이 아니라 level이라는 용어를 사용한다.

 

 - CSS Level 2 + Module : 기업들이 본격적으로 뛰어들어 제안하던 시기. 그러나 그림에 대한 걸 하나의 스펙으로 관리하는 건 어렵다고 관심 분야 별로 module이라는 시스템을 넣어서, 사양을 module 별로 관리하자는 아이디어가 제안됨.

 

 - CSS Level 2.1 : CSS 내에 있던 모든 module들이 2로 고정되었다. 여기까지는 CSS Level이란 것이 존재한다. 그러나 이때부터 어떤 module은 새로운 사양이 빨리 나오고 어떤 module은 늦게 나오기 시작해서 CSS Level을 이용해 사양을 관리할 수 없게 된다. CSS 3은 CSS 2.1 Level에서 Module Level이 3인 애들을 모아서 CSS 3라고 부를 뿐이지 공식문서에는 CSS 3가 존재하지 않는다. 고전 그래픽스 시스템은 더 이상 개선되어 나올 것이 없기 때문에 이러한 현상이 발생할 수밖에 없다.

 

 - Module Level : 여기서부터 이제 module 별로 스펙을 관리한다. Module 하나의 사양이 올라가면 다른 사양들도 영향을 받아 재검토되고 검토된 사양들의 level이 올라가곤 한다. 따라서 최신 사양을 다 파악하는 건 불가능하다.

 

 

[ Other Specifications ]

 잡스의 iphone 출시 이후 MS의 영향이 약해지고 구글과 애플의 영향력이 강해짐. MS의 어용단체 비슷한 W3C의 영향력도 같이 내려가고 신흥 강자인 구글과 애플이 떠오름.

 기존엔 W3C의 통제 하에 브라우저를 구현했는데, 이제 통제력이 약해지고 W3C Community and Business Groups라는 단체를 운영함. 여기에 속하는 단체들은 W3C 산하의 단체들로 인정되고 이 단체들이 스펙을 만들고 W3C에 draft로 스펙을 제출함. 구글 같은 경우는 먼저 구현을 해놓고 draft로 밀어넣는 경우도 허다함.

 

 - WICG(Web platform Incubator Community Group) : 각종 대기업들이 모인 단체.

 - RICG(Responsive Issues Community Group) : 지금은 거의 WICG에 먹힘.

 

 

[ Normal Flow ]

1. Normal flow는 Position이 static, relative일 때만 적용된다.

2. Normal flow는 두 가지 계산 공식이 있다. block formatting contexts와 inline formatting contexts이다. 줄여서 BFC, IFC라고 부른다. relative positioning이라는 방법도 있다. normal flow의 일부이긴 하지만 position model에서 정의하고 있다.

 

 Position : 어떤 geometry의 x, y, left, width, height를 결정할 때, 추상적인 위치를 결정하는 어떤 시스템을 이야기하는 것

 

block은 부모의 가로 길이를 가득 채운 한 줄을 의미한다

 - BFC 1 : block이 한 줄을 다 먹으니 x는 반드시 0이고 width는 언제나 부모의 width이다. 두 번째, 세 번째 block부터는 y값만을 신경쓰면 되는데, y값은 이전 block들의 height 값을 합친 값이 된다.

 - BFC 2 : 안에 있는 block 요소의 height의 합이 자신의 height이다.

 - BFC 3 : block 요소에 width를 주면 한 줄을 다 그리지 않게 할 수 있다. 그러나 이건 fragment의 영역만 width만큼 차지하는 것이지, 실제로는 한 줄을 다 사용하기 때문에 다른 요소는 자동으로 다음으로 넘어간다.

 

inline은 한 줄을 다 먹지 않고 나의 contents 크기만큼 가로를 차지한다.

 - IFC 1 : inline은 한 줄을 다 먹지 않고 나의 contents 크기만큼 가로를 차지한다. 다음 요소의 x는 이전 요소들의 width의 합이다. inline 요소들의 width의 합이 부모 요소의 width를 넘으면 다음 줄로 넘어간다. 이때 y값은 inline을 구성하는 요소 중 height가 가장 큰 요소가 line height가 되어 line height 만큼 y값이 내려온다.

 - IFC 2 : IFC 영역 다음에 block이 오면 즉시 IFC 영역이 종료된다.

 - IFC 3 : 연속된 문자열은 하나의 inline으로 본다. block의 width를 뚫고 inline 요소를 그리는 원인 중 하나. 문자 하나 하나를 inline 요소로 보려면 word break라는 속성을 줘야 한다. 그럼 공백 문자가 없는 문자열도 문자 하나 하나를 inline 요소로 본다. 대신 geometry 등의 계산 요소들이 많아지니 엄청 느려진다.

 

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

결과

 Rendering System과 DOM의 구조는 무관하다는 걸 보여주는 예제. DOM의 포함관계와 Rendering의 평가할 때 포함관계는 다르다. Rendering은 BFC, IFC를 이용해 그린다. Rendering 입장에선 DOM의 구조가 안 보인다. 위 코드는 브라우저 눈에 BFC 시작(div), IFC(Hello), IFC(span의 world), BFC 시작(div), 종료(/div), IFC(!!), BFC(/div) 종료처럼 보인다.

 positoin relative는 static으로 먼저 그린 뒤 상대적으로 위치를 재계산해서 이동시키는 것이다. 만약 위의 코드 span에 relative를 주고 top: 50px을 주면 World와 붉은색 div만 그대로 내려온다. position static과 position relative가 섞여있으면 반드시 position relative가 위로 올라온다. position relative끼리는 z-index를 이용해 경합을 벌인다. position relative 때문에 box의 크기가 변하거나 하지는 않는다. 오직 그림만 상대적으로 그렸을 뿐이지 실제로 geometry 계산은 static으로 했다.

 

 여기서 설명한 모든 규칙들을 Normal Flow라고 부른다. Normal Flow는 BFC, IFC, Relative Position으로 그림이 그려진다.

 

 * 양키 학문의 두 번째 주의점은 일반 명사를 고유 명사로 사용함. 고유 명사를 새로 만드는 것이 아니라 일반 명사의 의미에 새로 부여함. 일반 명사처럼 보이는 고유 명사를 인식하는 훈련을 해야 된다고 함.

 * CSS의 속성이 나오면 계산 공식이나 계산하는 어떤 context라고 생각해야 한다.

 

 

[ Float ]

 Normal Flow만으론 멋있는 그래픽을 그리기 어렵다. 그래서 기존의 Normal Flow와 상호작용하거나 일부러 무시하는 시스템을 넣어놓은 것이 float와 overflow이다.

 

 left, right, none, inherit 값을 가질 수 있다. 특징은 다음과 같다.

1. New BFC : float를 설정한 지점부터 새로운 BFC를 만든다.

2. Float Over Normal Flow : 새로 시작된 BFC에서 float 속성을 가진 것만 둥둥 떠있게 된다.

3. Text, Inline Guard : BFC, IFC 자체에는 영향을 끼치지는 않지만 IFC의 요소들은 막는다. 어디까지만 normal flow를 그리게 할 것인지에 대한 guard를 만들 때도 float를 사용한다. 그리고 block 요소를 잘라먹지는 않는다.

4. Line Box : float는 BFC, IPC가 아니라 Line Box라는 공식으로 그려진다.

 

<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>

 float가 된 요소가 inline 요소들을 가드하고 있는 모습을 볼 수 있다. 주의할 점은 inline 요소들만 가드하지 block 요소들은 가드하지 않는다는 점이다. float된 요소에 가려져 있어 착각할 수 있는데, block 요소들은 가드없이 정상적으로 그려진다. div 요소를 조사해보면 원래 크기가 제대로 출력되는 것을 볼 수 있다.

 

<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>

영상 캡처

실제 실습

1. 첫 float 박스는 새로운 BFC를 만든다. BFC 전체를 line box 영역으로 사용한다.

2. 첫 번째 이후 float 박스는 이전 박스가 사용하고 남은 공간을 line box로 쓴다. 공간이 충분하면 사용하고 모자라면 현재 line box의 바닥에 닿는 빈 공간이 새로운 line box 영역이 된다. 바닥에 해당하는 선을 양 옆으로 연장한 선을 bound line이라고 부른다.

3. 가장 왼쪽에 있는 오른쪽 박스보다 오른쪽은 이미 사용된 공간으로 간주된다. 마찬가지로 가장 오른쪽에 있는 왼쪽 박스보다 왼쪽은 이미 사용된 공간으로 간주된다. (line box와 같이 생각하면 편하다)

4. left와 right 사이는 살아있다. 이 공간에는 text가 들어갈 수 있다.

 

 

[ Overflow ]

 값으로 visible, hidden, scroll, inherit, auto가 있다. 기본값은 auto이고 일반적인 브라우저는 visible과 auto가 같다. visible은 내부에 있는 요소의 크기가 커지면 부모의 크기도 커진다. hidden은 geometry를 넘어가는 영역을 자르고 scroll은 scroll을 만든다. 

 

 overflow-x, -y 축 각각에 overflow를 줄 수 있다. 값으로 visible, hidden, scroll, clip, auto가 있다. 원래는 recommendation이었는데, transform, border radius라는 새로운 스펙이 태어나면서 영향을 받아 draft로 돌아왔다. 새로운 CSS 스펙이 나오면서 기존 CSS 스펙에 영향을 끼친 대표적인 예 중 하나이다. 안에 있는 contents를 transform으로 translation 시켰을 때 이건 contents 영역이 확장된 것으로 보아야 하냐는 이슈가 생겼다. 이 때문에 2.1이었던 모듈이 level3 draft로 돌아갔다.

 

 overflow에 관여하는 또 다른 속성 중 하나는 text-overflow이다. 값으로 clip, ellipsis가 있다. 영역을 넘어가는 text를 점으로 처리할 수 있다.

 

 이 중 overflow 값이 hidden이거나 scroll일 때만 flow랑 관련이 있다. 이 값을 갖는 요소로부터 새로운 BFC를 만든다는 규약이 있다. 이때 그냥 만드는 것이 아니라 line box bound를 인식해서 만든다.

 

<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 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:red">C</div>
  <div class="hidden" style="height:20px;background:orange"></div>
  <div style="height:30px;background:black"></div>
  <div class="hidden" style="background:red;"></div>
  <div style="height:30px;background:black"></div>
  <div class="hidden" style="height:30px;background:orange;"></div>
  <div style="height:30px;background:black"></div>
</div>

결과

 위 그림과 같이 overflow hidden이 먹힌 block은 line box를 인식해서 geometry를 잡는 것을 볼 수 있다. float 박스처럼 line box 보다 요소가 클 경우 새로운 line box를 찾는다. 그리고 line box가 작아서 요소가 들어가지 못해 밀려나면 그 아래에 생성된 일반 block도 같이 밀려난다. line box에서 밀려나 새로운 곳에 BFC를 만들면서 그 아래에 생성된 block도 같이 밀리는 것 같다.

 

 contents가 커져서 BFC 박스를 밀어낼 때 overflow visible 같은 경우 박스 크기가 늘어난다. 그러나 line box 때문에 inline 요소가 밀려서 가드 작동으로 늘어날 때는 box 크기가 안 늘어난다. 글자만 밀려나서 그려진다. rendering system이 geometry는 어딘가에 그리라고 정했는데, fragment system에서는 fragment의 line box system 때문에 밀려서 그려진 것이다. 그림 상 픽셀만 먹고 있는 것이지 그 자리가 실제 geometry는 아니다. 그리고 버려진 자식처럼 여겨진다. 따라서 다른 요소들이 밀려나서 생긴 글자들 자리를 차지해 겹칠 수 있다. 이때 또 특이한 점이 밀려난 글자들이 덮혀져 사라지지는 않는다. block으로 그 자리를 차지하면 그 block 위에 그대로 다시 글자가 그려진다.

 

 지금까지 IFC, BFC, float, line box, overflow와의 관계를 다루었다. 여기까지를 고전 레이아웃 시스템이라 부른다. 거의 모든 브라우저가 제공하는 레이아웃 시스템이다.