0002 - Layout System

1. Box Object Model

The height/width of an element + the space around it

-> Use this to affect the positioning of a single element

 

Box Object Model

'Content' and 'padding' sections show background color, Border and Margin do not

 

주로 사용되는 Shortcuts

margin : 전체

marginVertical : 상하

marginHorizontal : 좌우

padding : 전체

paddingVertical : 상하

paddingHorizontal : 좌우

borderWidth : 전체 border width

 

개별적으로 줄때는 css와 동일하게 top right bottom left 사용

 

2. Flex Box

how some number of sibling elements get laid out inside a parent

-> Use this to position multiple elements with a common parent

 

Parent

flex 자체는 CSS와 동일한것 처럼 보임

속성명은 LowerCamelCase지만 속성값은 snake-case를 사용함

Parent는 보통 위치에 대한 내용이 많음.

 

Child

Child는 부모로부터 받은 영역에서 적당히.. 자체조절

 

3. Position

how a single element gets laid out inside of a parent

-> Use this to override Box Object Model + Flex Box

 

Position 역시 CSS의 position과 동일.

 

대신 Absolute의 경우 영역을 가득 채울 수 있는데,

position의 모든 속성값을 0으로 처리해줌(left, top, right, bottom)

이걸 편하게 할 수 있도록 하드코딩 된 값이 있음