TIL :: 22.05.11

1. position 속성 - relative, absolute, fixed
2. inline, inline-block, block 에 대해서
3. float에 대해서

 

---

1. position 속성 - relative, absolute, fixed

 

Position 속성

  : 포지션은 css에서 element를 어떠한 위치에 배치시키는데에 사용된다.

 

Position은 이렇게 5가지로 구성되어있다.

• position: relative;
• position: absolute;
• position: fixed;
• position: sticky;
• position: static;

static	요소를 문서 흐름에 맞추어 배치.
relative	이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정.
absolute	원하는 위치를 지정해 배치.
fixed	지정한 위치에 고정하여 배치.
sticky	위치에 따라서 동작방식이 달라짐. 요소가 임계점(scroll 박스 기준) 이전에   는 relative와 같이 동작. 그 이후에는 fixed와 같이 동작.

static을 제외한 나머지 속성값들은 top, left, bottom, right 와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있습니다.

각 값들은 그 방향에서 얼마만큼 떨어져 위치시킬 것인 지를 나타냅니다.

예로들어 top: 15px 면 기준위치 위에서 15px 떨어져 있는 곳에 위치시키라는 뜻입니다.

---

2. inline, inline-block, block 에 대해서

	display : inline	display : block	display : inline-block
태그에 설정된 높이나 너비	무시	설정된 높이와 너비를 따름	설정된 높이와 너비를 따름
공간 차지	작성된 내용만큼	박스 크기만큼	박스 크기만큼
줄 바꿈	줄 바꿈 X	줄 바꿈 O	줄 바꿈 X

 

• inline : 그냥 내용, 박스가 아님, 내용만큼 공간 차지함
• block : 박스, 한 줄에 하나만 있음
• inline-block : 박스, 한 줄에 여러개 올 수 있음

 

---

3. float에 대해서

 

Float은 현재 flex가 나와 잘 사용되지 않는다.

Float은 요소(element)를 floating(떠다니게 만들어 준다)
Position: absolute; 되어있는 element는 float property를 무시한다.