브라우저에서 사용하는 좌표계

► 기본적으로 요소는 위에서 아래로, 왼쪽에서 오른쪽으로 확장합니다

 왼쪽 상단의 좌표가 (0,0)이 됩니다 픽셀(px)단위나 퍼센트(%)단위 등을 쓸 수 있습니다

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/62162be4-dce9-43dd-aaaa-0be0c40a2fb6/_2020-09-21__10.38.26.png

► 좌표계를 바탕으로 절대/상대적인 위치에 positioning할 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0fd7dd4e-d0ce-4773-b462-94a4773de602/_2020-09-21__10.39.16.png


다양한 display 요소

► 한 줄을 다 차지하는 요소가 있고, (block) 그렇지 않은 요소도 있습니다 (inline,대표적인 것은 span)

 (inline-block)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/30352377-f7fe-4eea-a25b-b2f89bbfbe9c/_2020-09-21__10.41.34.png

► 각 요소는 고유한 크기를 가질 수 있습니다. 단, inline 요소는 컨텐츠가 차지하는 크기로 고정됩니다

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4a0cd0af-2581-4e34-a0ff-7e29b416d451/_2020-09-21__10.42.28.png


Box Model

► box 크기에 관련한 몇가지 속성들이 있습니다

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6aaa134a-b8a1-4d99-9808-3f85fc43084e/_2020-09-21__10.43.26.png

► 사이즈 계산(sizing) 방법을 달리 설정할 수 있습니다

 보통 box-sizing: border-box; 로 설정해놓는 편이 계산이 쉽습니다