브라우저 작동 원리(9)-CSS2 시각 모델

캔버스

CSS2의 명세는 캔버스를 서식 구조가 표현되는 공간이라고 설명합니다 (브라우저가 내용을 그리는 공간)

캔버스 공간 각각의 면적은 무한하지만 브라우저는 초기 viewport의 크기를 기반으로 초기 너비를 설정합니다

CSS2 명세에 따르면 캔버스는 기본적으로 투명하기 때문에 다른 캔버스와 곂치는 경우 비쳐보이고, 투명하지 않을 경우 브라우저에서 정의한 색이 지정됩니다

CSS 박스 모델

CSS의 박스 모델은 document 트리에 있는 요소를 위해 생성되고 시각적 서식 모델(visual formatting model)에 따라서 배치된 사각형 박스를 설명합니다

각 박스는 컨텐츠 영역과 선택적으로 지정하는 패딩(padding), 테두리(border), 여백(margin) 영역이 있습니다

각 노드는 이런 박스를 0~n개 생성합니다

모든 요소는 만들어질 때 박스의 종류를 결정하는 display속성을 가지는데 그 종류는 다음과 같습니다

1. block - 블록 상자를 만든다
2. inline - 하나 또는 그 이상의 인라인 상자를 만든다
3. none - 박스를 만들지 않는다

기본 값은 inline이지만 브라우저의 스타일 시트는 요소별로 다른 기본 값을 정의합니다.

예시)div의 기본 display 값은 block

위치(Positioning) 결정 방법

위치를 결정하는데에는 3가지 방법이 있습니다

1. Normal - 객체는 문서(document) 안의 자리에 따라 위치가 결정됩니다. 이것은 렌더 트리에서 객체의 자리가 DOM 트리의 자리와 같고, 박스 유형과 면적에 따라 배치됨을 의미합니다
2. Float - 객체는 우선 일반적인 흐름에 따라 배치된 왼쪽이나 오른쪽으로 정렬됩니다
3. Absolute - 객체는 DOM 트리 자리와는 다른 렌더 트리에 놓입니다

위치는 position과 float에 의해서 결정됩니다

• static과 relative로 설정하면 일반적인 흐름에 따라 위치가 결정
• absolute와 fixed로 설정하면 절대적인 위치

position 속성을 정의하지 않으면 static이 기본값이 되며 일반적인 흐름에 따라 위치가 결정됩니다. 만약 static이 아닌 다른 값을 선택하면 top, bottom, left, right으로 위치를 지정할 수 있습니다

박스의 배치는 다음과 같은 요소들에 영향을 받습니다

박스 유형(display, inline ...)
박스 크기(width, height ...)
위치 결정 방법(position, float)
추가적인 정보 - 이미지 크기와 화면 크기 등

박스 유형

Block box : 브라우저 창에서 사각형 블록을 형성합니다

Inline box : 블록을 형성하지 않고 다른 블록 내부에 포함됩니다

블록은 다른 블록 아래에 수직으로 배치되고(다른 블록과 같은줄 불가능) 인라인은 수평으로 배치됩니다

인라인 박스는 line이나 inline 박스 안에 배치됩니다

line은 적어도 내부의 가장 큰 박스만큼 크지만 baseline정렬(요소의 하단이 line의 바닥이 아닌 다른 요소를 기준을으로 정렬된 경우)이라면 더 커질 수 있습니다

포함하는 width가 충분하지 않으면 인라인은 여러 줄의 line으로 재배치 되는데 이건 주로 paragraph안에서 발생합니다

포지셔닝(Positioning)

Relative

relative 포지셔닝은 일반적인 흐름에 따라 위치를 결정한 다음 필요한 만큼 이동합니다

Float

float 박스는 라인의 왼쪽이나 오른쪽으로 이동합니다. 흥미로운 점은 다른 박스가 이 주변을 flow한다는 것입니다

html을 이렇게 작성한다면

<p>  
<img src="http://helloworld.naver.com/image.gif" alt="image.gif" width="100" height="100" style="float:right">  
Lorem ipsum dolor sit amet, consectetuer...  
</p>  

이렇게 보일 것입니다

absolute와 fixed

absolute와 fixed는 일반적인 flow와는 별개로 위치가 결정되고 flow에 관여하지도 않으며, 면적은 부모에 따라 상대적으로 정해집니다

fixed인 경우 viewport로부터 위치를 결정합니다

fixed된 박스는 스크롤을해도 따라 움직이지 않습니다

층(layer) 표현

층은 CSS의 z-index 속성에 의해서 명시됩니다. 층은 3차원 표현이고 z 축을 따라서 위치가 정해집니다

박스는 스택(stacking contexts)으로 구분됩니다. 각 스택에서 뒤쪽 요소가 먼저 그려지고 앞쪽 요소는 사용자에게 가까운 쪽으로 나중에 그려집니다. 가장 앞에 위치한 요소는 곂치는 이전 요소를 가립니다

스택은 z-index 속성에 따라 순서를 결정합니다. 박스가 z-index가지면 그 박스는 지역 스택(local stack)을 형성합니다. viewport는 바깥쪽의 스택(outer stack)입니다

이 예제를 살펴보면

<style type="text/css">  
div {  
    position: absolute;
    left: 2in;
    top: 2in;
}
</style>  
<p>  
    <div style="z-index:3;background-color:red;width:1in;height:1in"></div>
    <div style="z-index:1;background-color:green;width:2in;height:2in"></div>
</p>  

이렇게 보일 것입니다

붉은색 박스가 초록색 박스보다 마크업에서 먼저 나오기 때문에 일반적이라면 먼저 그려져야하지만, z-index로 인해 root box가 가지는 스택상에서 더 앞에 위치하게됩니다

참고 및 출처

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

https://d2.naver.com/helloworld/59361