[코드스피츠/CSS] CSS 렌더링(Normal Flow)

전부 다 정리하기보다는 새롭게 알게 된 것들이나 기억하고 싶은 것들을 정리했다.

풀 강의는 유투브에서 확인하는 것이 좋다. 

 

 

먼저 렌더링시스템과 CSS 정의를 살짝 정리했다.

Rendering System이란?

---

어떠한 대상을 원하는 모습으로 다시 구현하는 것을 말한다.

 

rendering은 보통 2단계로 구성된다.

1. reflow: geometry(구역)을 나눈다.

2. repaint: fragment(파편)을 채운다.

 

이 때, pixel이 아닌 fragment를 사용하는 이유는 화면이 실제로 표현할 수 있는 physicl pixel(물리적 픽셀)과 HTML/CSS에서 논리적으로 표현할 수 있는 logical pixel(논리적 픽셀)은 1:1로 대응하지 않기 떄문에 매번 상대적으로 다른 DPR(Device-pixel-ratio)을 보이기 때문이다. 

다시 말해, pixel 단위는 상대적이기 때문에 중립적인 단어인 fragment를 사용한다. 

 

 

 

CSS란?

---

어떻게 하면 고정되어 있는 숫자를 사용하지 않고 계산된 체계로 그래픽을 표현할 수 있을까? geometry 영역을 어떤식으로 표현할까? fragment를 어떤식으로 채울까?에 대한 명령을 내리기 위한 언어이다. 

 

 

 

Normal Flow

---

Normal Flow는 3가지로 나눠볼 수 있다.

1. Block Formatting Contexts(BFC)

- 부모만큼 한 줄을 다 먹는다.

2. Inline Formatting Contexts(IFC)

3. Relating Formatting Contexts(RFC)

 

 

word-break를 사용하지 않았을 때

위의 예제를 보면 width를 지정했음에도 불구하고, 작성된 text가 길어짐에 따라 지정한 width를 넘어가는 것을 확인할 수 있다. 작성된 text가 지정한 width를 넘어갔을 때 줄바꿈을 구현하고 싶다면 word-break라는 속성을 줘야한다. 

 

word-break를 사용했을 때

block 엘리먼트는 원래 공백문자를 기준으로 분리한다. 하지만 word-break를 사용하면 문자 하나하나를 inline으로 보게 된다. 단점은 브라우저가 엄청 느려진다. 덩어리 하나가 아닌 각각을 하나로 보기 때문이다.   

 

 

한 가지 퀴즈를 가져왔다. 아래와 같은 코드가 있을 때 과연 어떻게 보여질까?

퀴즈

만약 예상했던 결과와 다르다면 이 점을 간과했기 때문이다. 

렌더링 시스템과 DOM의 구조는 무관하다! 렌더링 시스템은 DOM의 포함구조가 보이지 않기 때문에 inline, inline, block, inline 이렇게 화면에 그린 것이다.

퀴즈 정답

728x90

 

 

relative

relative는 static을 모두 그린 후, 상대적인 위치를 계산한다. 그래서 relative는 static위로 올라오게 된다. 참고로 HTML의 모든 엘리먼트는 position이 static이다. 

아래의 코드와 결과를 보면 쉽게 이해된다.(css 코드 주석 해제 전 후로 비교해보기)

See the Pen Untitled by 고주디 (@1two13) on CodePen.

 

 

참고자료

---

• 코드스피츠

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖