[CSS Rendering] 배경설명, 고전레이아웃

코드스피츠 유투브강의-1

css를 배우는것은,
css의 속성, 값이 발현될때 어떠한 식으로 계산되고 표현되는지 이해하는 데에 있다.

---

Graphics system

• 그래픽 시스템은 근본적으로 x, y, width, height, column로 이루어져있다.
• Fixed Number로 범용성있는 Graphics System구축을 위해서는 여러 문제가 발생한다.
  1. Sreen size
  2. Chrome size
  3. Hierarchy
• 이에 따라서 여러가지 (계산법)이 등장하였다. - 실제로 화면에 그려질 때 환경을 인식해서 숫자로 변환해줌.
  함수이자 공식!
  실제 그림이 그려지는 순간마다 함수를 돌려 숫자를 얻어(계산해) 그림을 얻게됨.
  
  • %
  • Left
  • InLine
  • Float
  • ......
  이러한 체계를 추상화된 계산된 체계라고 하여 Abstract Calculator 이라고함!
• Abstract graphics 체계를 이어받는, 공통점을 엮은 것들이 컴포넌트(Components)
• 컴포넌트들이 일정한 규칙과 사용방법을 지키는 형태로 구현되어있다면 프레임 워크(Framework)

ex 1) HTML를 하나의 framework로 본다면 태그 하나하나가 컴포넌트이다.
ex 2) 부트스트랩을 하나의 framework로 본다면, 요소 하나하나가 컴포넌트이다.
ex 3) 윈도우Graphic 을 하나의 framework로 본다면 어플리케이션이 하나하나가 컴포넌트이다.

상대적인 개념이다!

---

Rendering System

원본에서 보다 구체적이고 (시각적인)형태로 다시 그려내는 것을 Rendering이라고한다.

랜더링 시스템은 보편적으로 2단계를 거친다.

1. Geometry Calculate
   지형을 나누어줌( = reflow)
2. Fragment Fill
   (픽셀을 채우는 것이 중요한 것이아니라 정해진 영역내를 채우는것이 더욱 중요함, 이를 Fragment로 명명)
   = repaint

---

CSS Specifications

• CSS level1
  HTML 태그 안의 style 을 같이 사용하자 코드의 관리가 어렵고 복잡해져 개존의 rendering system을 차용하여 css로 분리함.
• CSS level2 + Module
  여러 RenderingSystem에서 차용되다보니, 하나의 사양으로 관리하기 어려워, Module별로 넣어 관리하기로함
  
• CSS level 2.1 (include level 3 module)
  CSS2.1사양, module별로 spec발전단계가 갈리어 각자 업데이트 되고있음. 
  (Syntax 3, cascade 3, color 3, selectors 3 .....)

CSS3 는 단순히 CSS level2.1의 module3를 묶어 말할 뿐이지, CSS level3는 존재하지 않는다.

• Module level
  더이상 css 통합 level이 존재하지않음
  ex ) transforms 1, masking 1, flexbox1 , compositions1, grid1, ....~~
  의 각 모듈들이 탄생하고, 각 모듈둘은 각자 발전하고있음.

---

W3C가 영향력이 가장 컸던 시대는 끝났다.

• W3C community and business groups https://www.w3.org/community/
• WICG web platform incubator community group
  - 구글이 주 멤버인 그룹 : 이곳에서 제출된 Draft가 크롬에 먼저 반영되기도함.
• RICG responsive inssues community group

실제로 CROME 최신 버전에도 W3C권고안이 모두 구현되어 있지 않으며, Draft(초안)에서 구현한것이 많기도하다.
위 W3C groups에서 group을 만들어 사양을 만들고 W3C의 Draft로 제출하는 형태가 많다.

 

 

---

 

 

 

 

 

 

 

 

 

---

CSS - Normal Flow

※ Normal Flow는 CSS에 등록되어있는 고유명사이며, 직역하여 일반 흐름이 아닌것을 유의하자.
CSS2.1 visual formatting moel - Positionning schemes & normal flow

Visual formatting model

---

Position - geometry의 left-top을 결정할 때 사용하는 추상적인 의미 체계(계산식)

•  static (Normal Flow)
•  relative (Normal Flow)
• absolute
• fixed
• inherit

static 과 relative만 normal flow이다.

---

Normal Flow의 계산방식

• Block Formating Contexts - BFC
• Inline Formatting Contexts - IFC
• Relative Formatting Contexts - normal flow의 일부이긴하지만, position모델에서 정의하고있어 추후에 다룸

 

---

BFC

• 부모의 가로를 가득 채운 한줄 - x는 0이며, width는 부모의 width 와 동일하다.
• 두번째 블럭요소의 y는 첫번째 블럭요소가 끝나는 지점의 좌표점이다.
• 내부 block요소의 height의 합이 내 자신의 height가 된다.

 

---

IFC

• 자신의 content 크기만큼 width를 차지한다.
• 동시에 다음번 요소의 ifc 는 이전 ifc의 끝나는 요소의 x좌표가 시작 x 좌표가 된다.
• inline요소의 width의 합이 부모 요소의 width를 넘어가면 다음 줄로 넘어가게된다.

 

---

 

See the Pen dyyRjOL by YunJeong (@melangyun) on CodePen.

두 요소 모두 block 요소이다. 따라서 다음 block요소는 줄이 바뀌어 들어간다.
width를 50%로 주었는데, 이 뜻은 geometry의 fragment 가 50%라는 것이지, 실제로는 width를 모두 차지하고 있는것이다.

 

 

See the Pen RwwgBgw by YunJeong (@melangyun) on CodePen.

width를 지정한 후 text를 입력했을 때, width보다 text가 더 많을경우 왜 div를 뚫고 나가게 될까?
또, 엔터로 끊어서 입력했을 때 자동으로 줄바꿈이 되며 div를 뚫지 않게될까?

암묵적으로  HTML이 그림을 그릴 때에 공백문자가 없는 문자를 하나의 IFC Session으로 보고있기때문에 공백요소를 주는 순간 하나의 span태그처럼 인식하여 랜더링된다.

공백문자를 span의 구분단위로 보는것이 싫다면(그래서 div width를 뚫고 나가는 것이) word breaking 속성을 주면된다. 
하지만, word breaking이 있다면, 문자 하나하나가 inline요소로 인식하여 계산하라는 뜻이기 때문에(따라서 geometry 영역이 기하급수적으로 늘어나는 것이다.) 브라우져 속성이 매우 느려지기때문에 지양해야한다.

 

---

그렇다면, IFC, BFC 영역을 합치어보자.

See the Pen jOOwpaL by YunJeong (@melangyun) on CodePen.

Hello 옆에 World가 붙을것은 충분히 예상이 된다.
하지만 div의 경우에는 어떻게 된걸까?

이 현상이 이해가 되지 않는 이유는 렌더링시스템에 대한 이해도가 떨어지기 때문이다. 반드시 알고 넘어가야 할 것은, Rendering System과 DOM의 구조는 무관하다는 것이다.

---

rendering system과 DOM의 구조는 무관하다.
태그의 구조와 Rendering의 구조가 일치하는 것이 아니다.

 

우리는 html을 볼 때 DOM으로 보고있지만, DOM의 포함관계와 rendering system은 다르다.
브라우저의 해석은 BFC의시작, IFC, IFC, IFC, BFC, BFC가 끝났기 때문에 IFC 이러한 구조로 해석되고 있는 것이다.

아래 예제를 보고 다시 생각해보자.

See the Pen XWWgBEx by YunJeong (@melangyun) on CodePen.

---

 

 

position : relative - static 으로 그린 후에 위치를 변경시킴

See the Pen eYYRjrj by YunJeong (@melangyun) on CodePen.

span태그는 world와 붉은박스를 이동시킴.
normal flow로 먼저 그려 진 후 relative 로 이동된것이다.

※주의 : position static 과 position relative가 혼합시, 무조건 relative 가 static의 상단으로 올라간다.

relative끼리는 z-index로 조정이 되지만, static과 relative가 만난다면, 무조건 relative가 상단으로 가는것이다.
relative는 그림만 상대적으로 그렸을 뿐, geometric은 오로지 static기준으로 형성되어있다. 따라서 relative로 계산을 하여도 width나 height 가 변경되지 않는다.

---

※position absolute 나 fixed를 사용하게되면 더이상 normal flow가 작동하지않는다.
따라서 글자가 밀린다던지, height가 측정되지 않는다던지 하는 문제가 발생하는 것이다.

normal flow 하에서만 자동으로 width, height가 계산되고 위치를 자동으로 계산되는 것이다.

※ html 모든 element의 기본 position은 static이다.