FE/CSS

[CSS] element가 배치되는 방법(레이아웃)

Juliie 2020. 8. 14. 13:42

1. display(block, inline, inline-block)

  • block 또는 inline-block의 경우 이 엘리먼트들은 블록 형식으로 위쪽에서 아래쪽으로 쌓인다
  • inline인 경우는 왼쪽에서 오른쪽, 다 찼다면 아래쪽으로 빈 자리를 차지하며 흐르며 높이와 넓이를 지정해도 반영되지 않는다

2.position(static, absolute, relative, fixed)

  • static: 기본 속성값
  • absolute: top, left, right, bottom으로 설정하며, 기준점은 static이 아닌 상위 엘리먼트가 기준점이다
  • relative: top, left, right, bottom으로 설정하며 원래 자신이 위치해야 할 곳을 기준으로 이동한다
  • fixed: top, left, right, bottom으로 설정하며 viewport(전체 화면) 좌측 맨 위를 기준으로 동작한다

3. float(left, right)

원래 flow에서 벗어나서 떠다닐 수 있다

block 엘리먼트가 float된 엘리먼트를 인식하지 못하고 중첩돼서 배치된다

 

* block 엘리먼트의 크기는 기본적으로 부모의 크기만큼을 가짐(100%)

'FE > CSS' 카테고리의 다른 글

[CSS] element가 배치되는 방법(레이아웃)  (0) 2020.08.14
[CSS]CSS의 상속과 우선순위 결정  (0) 2020.08.14
1 2