20210814 TIL

Facts

• 토스 NEXT 코딩테스트
• 코드스피츠 CSS 랜더링 강의 1-1, 1-2 수강  

Feeling

• 어렵다... 어렵구나,,,, 코딩테스트가 결코 만만하지 않았다. 그냥 알고리즘만 보는게 아니고 기본 자바스크립트 개념들을 합쳐서 보는데 쉽지 않더라. 시간도 촉박하기도 하고 이런 유형의 문제를 접해보지 않아서 어려웠던거 같다. 서술형은 근데 반대로 술술 잘 풀었다. 
• css 관련 강의에 또 꽂혀서 (브라우저 랜더링 공부하다가 이 길로 또 새고있다ㅎㅎ... 두서없지만 필요한 공부는 맞으니깐 ㅎㅎ) 코드스피츠 강의를 듣고 있다. 와 근데 진짜 나는 얕게 알고 있었구나 하는 깨달음을 얻게 됐다. CSS세계는 무궁 무진하고 웹 최적화를 위한 방법으로도 CSS를 잘 알아야겠다는 생각이 든다.  

Finding

• 그래픽스: 점 찍는 방법
• 랜더링: 어떠한 대상을 내가 원하는 모습으로 변환하는 것, 보다 구체적이고 시각적으로 변화시켜주는것 (사람 혹인 기계가 인식하기 쉡게 바꾸거나 목적에 부합하게 바꾸는 것) -> 데이터를 어떻게 그림으로 바꿔낼 수 있을까? 
• 리플로우: 위치를 계산하여 영역(레이아웃)을 나누는것 ( geometry calculate ) 
• 리페인트: 영역에 구체적으로 그려주는것 ( Fragment fill )
• 랜더링 시스템이란? 리플로우된 영역에 리페인트 한다.
• 포지셔닝 스키마 
• 포지션: 어떤 지오메트리 영역에 x, y, width, height 등 추상적인 위치를 결정하는 시스템 (계산 공식)
  • static, relative: normal flow 적용, absolute, fixed : normal flow 가 일어나지 않음
• normal flow: block formatting context, inline formatting context, relative(이건 포지션으로 취급) 
  • 그래서 총 2가지의 계산 공식이 있다. 
  • bfc: 부모의 가로길이를 가득채운 한 줄, 안에있는 블록요소의 height의 합이 나의 height이다 (다음 블록의 y좌표는 자연스럽게 기존 블록의 height이 된다.)
  • ifc: 나의 컨텐츠 크기 만큼 차지, inline요소의 width의 합이 부모의 width보다 넘어가면 다음줄로 넘어가는데 한 줄의 height는 가장 큰 컨텐츠의 height이 line-height가 된다. 
  • 암묵적으로 html이 그림을 그릴때 공백문자가 없는 문자를 하나의 ifc 섹션으로 본다. 
  • 공백문자없이 붙어있는 문자열을 하나 하나 인라인으로 처리하는 것이 word-break이다 (개별로 영역이 잡혀 브라우저가 느려짐) 
• 랜더링 시스템과 돔 구조는 무관하다. (돔의 포함 관계와 랜더링을 평가할 때 포함관계는 다르다. -> 태그의 구조가 랜더링의 구조와 일치하는 것은 아니다.  
• float: 라인박스 공식으로 그려짐 (추가적인 bfc 영역을 만듦 )
  • 영역: float영역 + inline영역 전체를 다 차지한다. 
  •  인라인 요소의 가드로 작동해 다른 인라인 요소가 가드 바깥쪽에 위치하게 한다 (박스는 그대로 다 차지한다. 인라인요소만 바깥으로)
  • 가용영역(float가 차지한 영역을 제외한 영역)에서 float영역을 차지한다. 단 기존의 float 방향보다 더 이전으로 들어갈 수 없다.) 
  • overflow의 hidden과 scroll에는 새로은 bfc를 즉시생성하는 규약이 생겼다.
  • Linebox 때문에 inline 요소가 밀려서 가드 작동으로 늘어날 때는 안들어나고 묻혀버린다.