[공부 기록]

 

뷰포트 (viewport) : 웹페이지가 사용자에게 보여지는 영역

 

컨테이닝 블록: 요소의 크기와 위치를 결정하는 것

 

모든 요소는 박스 형태로 이루어지는데 대부분의 경우 요소의 컨테이닝 블록은 부모 요소의 컨텐츠 영역이다.

하지만 꼭 그렇지는 않다.

position 속성이 absolute인 경우, 컨테이닝 블록은 속성 값이 static이 아닌 가장 가까운 조상의 내부 여백 영역이다.

position 속성이 fixed인 경우, 컨테이닝 블록은 뷰포인트나 페이지 영역이다.

 

특정 속성의 값이 백분율이라면, 그 계산값은 요소의 컨테이닝 블록에 의해 결정된다.

height, top, bottom 속성은 컨테이닝 블록의 height를 사용해 계산한다.

컨테이닝 블록의 postion이 relative거나 static이라면 계산값은 0이 된다.

 

width, left, right, padding, margin 속성은 컨테이닝 블록의 width를 사용해 백분율을 계산한다.

 

 

offset?

 : 기준이 되는 요소로부터 offset 값만큼 멀어지는 상대 주소

 relative는 부모에 대해 상대적으로 offset 지정이 가능하다.

지정하지 않으면 top, left, right, bottom 값이 0이다.