CSS 레이아웃을 정리해보자

display

display 속성은 해당 요소를 block inline 중 어느 쪽으로 설정 할지와 flex grid flow처럼 자식 요소를 배치할 때 사용 할 레이아웃을 설정한다

block

block요소는 화면의 가로 크기만큼 너비를 가지고 content만큼 높이를 가지며 다른 inline 또는 block요소를 내부에 가질 수 있다
대표적인 block 요소로는 h1, div, p, header, footer 등이 있다

block요소 가로 중앙 정렬
width 설정 후 좌우 여백 값을 auto로 설정하면 된다
처음 css를 공부 할 땐 많이 사용했는데 flex를 알고난 후 부턴 잘 사용하지 않는 것 같다.

inline

inline요소는 content만큼의 크기를 가진다 때문에 block과는 다르게 한 줄에 여러 요소를 포함 시킬 수 있다
대표적인 inline 요소로는 span, b, a 등이 있다

주의할 점 ❗️
1. inline요소는 크기를 설정 할 수 없고, 항상 content만큼의 크기로 고정된다
2. inline요소는 위아래에 margin을 줄 순 있지만 적용은 안된다

inline-block

inline-block 요소는 inline,block의 특징을 모두 가진다
그래서 inline처럼 한 줄에 쓸 수 있고 block처럼 크기를 설정 할 수 있다

none

display: none;을 사용하면 해당 요소를 화면에서 보이지 않게 할 수 있다
때문에 특정 상황에서 화면에 보이도록 조작하여 interative한 웹을 만드는데 많이 사용 된다

visibility:hidden와 무엇이 다를까? 🤔
visibility: hidden 또한 화면에서 해당 요소를 안보이게 만들어 주는 역할을 한다

하지만 visibility: hidden는 눈에만 보이지 않을 뿐이고 실제로는 공간을 차지하지만 display: none는 실제로 없어져 공간 또한 차지하지 않는다는 점이다

---

position

position을 통해 좀 더 복잡한 layout을 만들 수 있다

static

default값으로 다른 요소에 영향을 주지 않는다

relative

자기 자신을 기준으로 top, bottom, left, right 등의 속성을 통해 위치를 변경 할 수 있다
자기 자신을 기준으로 하기 때문에 만약 bottom: -50px을 적용시키면 원래 위치에서 -50px만큼 아래로 이동하게 된다
static과 마찬가지로 다른 요소에는 영향을 주지 않는다

body {
  display: flex;
  justify-content: center;
}
div {
  width: 100px;
  height: 100px;
}
div:nth-child(1) {
  background-color: red;
}
div:nth-child(2) {
  position: relative;
  bottom: -50px;
  background-color: green;
}
div:nth-child(3) {
  background-color: blue;
}

absolute

position이 static이 아닌 가장 가까운 부모의 위치에 따라 절대적으로 위치를 변경하며 다른 요소에 영향을 준다

body {
  display: flex;
  justify-content: center;
}
div {
  width: 100px;
  height: 100px;
}
div:nth-child(1) {
  background-color: red;
}
div:nth-child(2) {
  position: absolute; /** relative -> absolute **/
  top: 50px; /** bottom: -50px -> top: 50px**/
  background-color: green;
}
div:nth-child(3) {
  background-color: blue;
}

relative와 비교해서 가장 큰 차이점은 다른 요소에 영향을 준다는 점이다
position이 absolute가 되면서 문서 흐름에서 벗어나 단독적으로 배치된다

컨테이닝 블록 🚀
컨테이닝 블록이란 요소의 크기와 위치에 영향을 주는 것으로 absolute가 포지션을 가진 부모를 찾는 것도 컨테이닝 블록을 식별하는 과정이다

토막지식) ⚡️ 만약 absolute를 사용하는데, 모든 부모가 static이라면 어떻게 될까?
html이 해당 absolute 요소의 컨테이닝 블록이 된다

자세한 내용은 아래 링크를!

컨테이닝 블록의 모든 것

fixed

viewport 또는 페이지 영역을 기준으로 화면에 고정되는 position 값이다
absolute처럼 문서 흐름에서 벗어나 단독적으로 배치되며
relative나 absolute와 같이 top, bottom, left, right를 사용해 배치한다

---

float

float는 이미지 주변에 텍스트를 감싸기 위해 만들어졌다

img {
  width: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}

img {
  float: left;
  width: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}

clearfix

float의 문제를 해결하기 위해 취소하는 방법을 일컫는 단어로 몇 가지 방법이 있는데 그 중에 ::after, overflow, clear 등을 통해 해결한다