TIL # 36 : [CSS] Layout

Display

---

Display 속성은 element의 render block type을 결정한다. 가장 대중적인 값은 block, inline 및 inline-block이다.

이미지 출처

1. block

block level인 element는 컨텐츠 뿐만 아니라 자기 container의 전체 너비를 차지한다. 그리고 높이와 너비를 수동으로 조정할 수 있다. 항상 줄발꿈이 일어난다!

2. inline

inlineelement는 block과 다르게 컨텐츠 자체만 꾸며주기 때문에 최소한의 공간을 차지하며 수평으로 흐른다. 또한 높이와 너비를 수동으로 조정할 수 없고, margin padding-top, padding-bottom, line-height도 사용할 수 없다.

3. inline-block

inline-blockelement는 서로 옆으로 나열 가능하며, 높이와 너비를 수동으로 조정할 수 있다. margin padding-top, padding-bottom, line-height도 적용 가능하다.

Position

---

Position 속성은 element가 배치되는 방법을 설정하며 top, left, bottom, right이 position의 최종 위치를 결정한다. Position의 value는 총 5개다.

이미지 출처

1. static

static은 기본 설정값이다.

2. relative

relative는 자신이 담겨있는 부모 안에서 T/L/B/R 띄울 수 있다.

3. absolute

absolute는 담겨있는 부모 공간을 침범하며 자식 관계를 무시하고 옮겨다닌다. 또한 position: static 속성이 없는 부모를 기준으로 움직인다. 부모 중에 relative, absolute, fixed값이 없다면 바로 body 태그가 그 기준이 된다. 그리고 absolute가 되면 div여도 width:100%가 아니다.

4. fixed

fixed는 어떤 주어진 영역에 fixed 되며 부모가 아닌 window page에서 움직인다.

5. sticky

sticky는 scrolling 해도 안 없어지고 원래 자리에 붙어있다.

** 호환성 여부를 꼭 확인하고 써야한다.

float

---

특징

1. 전체 넓이가 지정되어 있지 않으면 계속 옆으로 붙고 더 이상 자리가 없으면 아래로 자리잡게 된다.

2. float 속성을 이용해 구조를 잡고 싶으면 block 속성을 가지고 있어야 한다. block 속성을 갖고 있는 요소는 높이와 너비를 지정할 수 있기 때문이다.

3. 크게 3가지로 나뉜다

• left : 왼쪽부터 순서대로 부유
• right : 오른쪽부터 순서대로 부유
• none : float 속성 해제

4. 빈공간이 없을 때까지 계속 다른 객체가 따라 올라온다.
5. div에 float 속성을 주면 div 다음에 있는 요소가 그 자리가 비었다고 생각하고 그 자리로 올라온다.

속성 clear하기

1.clear: left, clear: right, clear: both

clear: left -> float: left 해제
clear: right-> float: right 해제
clear: both -> 양쪽 해제

float 된 요소 밑에 빈 임의의 요소를 만들어 clear를 준다. 이 속성은 float를 취소시킨다. 그러나 마크업의 흐름도 깨고 HTML 코드양도 많아진다.

2.clearfix

요소에 float를 적용하고 요소의 container(부모)에 미리 설정한 clearfix를 적용한다.

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

3. overflow: hidden

부모에 overflow: hidden을 줄 수 있다. 그러나 부모의 높이, 너비값보다 자식이 높이, 너비값이 더 크면 곤란하다.

4. 부모도 float하기

block 요소의 속성이 없어지며 width: 100%를 추가하거나 해야 한다.

이미지 출처

Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://www.codecademy.com/learn/learn-css/modules/learn-css-display-positioning/cheatsheet#:~:text=Positioning%20in%20CSS%20provides%20designers,specific%20spot%20on%20a%20page.
https://heropy.blog/2018/11/24/css-flexible-box/
https://www.youtube.com/watch?v=jWh3IbgMUPI
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
https://takeknowledge.tistory.com/128