[CSS] 레이아웃! display, position 이거 헷갈리면 혼남..

1. display

---

HTML 포스팅에서 소개하였듯이 HTML 태그는 Block Level과 Inline Level 두 가지로 분류할 수 있다.

 

그러나, css의 display 속성값을 이용하면 기본 속성값을 변경할 수 있다!

 

display 속성값은 일단 flexbox를 제외하고 block, Inline, Inline-block 각각의 차이점을 아래 코드블럭을 통해 살펴보자..

 

See the Pen GRNzxdd by Hamsworth (@hampro) on CodePen.

display 정리!

value	description
block	한줄에 하나!
Inline	공간이 허용한다면 한줄에 여러개 가능. *lnline은 content 자체만 꾸밈. 즉, content크기에 따라 크기가 결정. (= css로 width나 height를 정의해도 적용 X.)
Inline-block	한줄에 여러개 가능, 그 외에는 block 특성을 가짐.

 

2. Position

---

Position 속성은 요소의 위치를 결정한다.

 

See the Pen WNoBRQO by Hamsworth (@hampro) on CodePen.

position 정리!

value	description
static	기본값. 위치이동 불가능 (HTML에 정해진 순서대로 그려짐)
relative	기존 위치를 기준으로 이동
absolute	요소가 속해있는 바로 위의 상자를 기준으로 이동
fixed	상자에서 벗어나 페이지를 기준으로 이동
sticky	- 페이지를 기준으로 거리가 이동. 하지만, 기존 위치에서 증가만 가능함(아래, 오른쪽으로만 이동 가능) - 스크롤을 내려도 그 위치를 유지한다.