-
0002 - Layout System2021/개발 2021. 1. 18. 22:26
1. Box Object Model
The height/width of an element + the space around it
-> Use this to affect the positioning of a single element
'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)
이걸 편하게 할 수 있도록 하드코딩 된 값이 있음