css layout 잡기!! (1편)

React, Vue, Angular, Svelte 4대장을 계속 쓰다 보면 기본적인 css 속성만 알고,

css에 대해 무감각해져가고 성능 최적화, 코드 개선에 대해서 공부하다 보면 css에 대해 무감각해져가고 css 속성에 대해 이해도가 떨어지고 구글링, chatgpt 에 의존하게 됩니다.
(저 또한 그랬구요...)

그래서 기초부터 하나하나 적으면서 정리를 하려고 합니다.

 

---

Flex

display: flex;
위와 같은 속성을 가장 많이 사용하실겁니다. 1차원적인 레이아웃을 작성할 때 사용된다고들 하죠.

 

가로, 세로 정렬

• justify-content: center; ->컨테이너에서 가로축을 기준으로 가운데 정렬합니다.
• justify-content: flex-start (default); -> 요소들을 컨테이너의 왼쪽으로 정렬
• justify-content: flex-end; -> 요소들을 컨테이너의 우측으로 정렬
• justify-content:center; -> 요소들을 컨테이너의 중앙으로 정렬
• justify-content: space-between; -> 요소들 사이에 동일한 간격을 둡니다.
• justify-content: space-around; -> 요소들 주위에 동일한 간격을 둡니다.
• justify-content: space-evenly(FireFox Only) -> 첫번째로 오는 정렬 대상 전에 두 개 의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다.

 

space-between 과 space-around 를 보죠
between 은 사이의 간격이 일정합니다. (양쪽 끝을 붙일 상태에서 사이사이에 일정한 간격을 두기 위해선 좋습니다!)
around 는 외부의 간격이 일정합니다. (맨처음과 맨 끝은 좌우가 일정하진 않지만 끝과 끝은 일정하여서 좋습니다!)

• align-items -> 세로축을 기준으로 정렬을 하게 된다.
  속성
• flex-start 컨테이너의 최상단으로 정렬하죠.
• flex-end 컨테이너의 최하단으로 정렬하죠.
• center 컨테이너의 세로 축의 중앙으로 정렬하죠.
• baseline 컨테이너의 시작위치에 정렬하죠.
• stretch(default) 컨테이너의 맞게 늘리죠.

 

---

Grid

justify-items 은 그리드 내부의 엘리먼트들의 가로 정렬에 쓰인다.

main {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    justify-items: center;
}

• start : 아이템들을 그리드 위, 왼쪽으로 각각 정렬
• end : 아이템들을 그리드 위, 오른쪽으로 각각 정렬
• center : 위 중앙에 정렬
• stretch : width를 채우기

justify-content 는 그리드 컨테이너를 화면(height로 설정한 값)에서 가로 정렬하는데 쓰여요.

• start : 좌측 상단에 정렬한다.
• end : 우측 상단에 정렬한다.
• center : 중앙 상단에 정렬한다.
• space-around : 각 열의 좌우 여백을 동일하게 정렬한다.
• space-between : 시작점을 좌측, 끝점을 우측, 나머지 고르게 정렬한다.
• space-evenly : 모든 여백을 고르게
• stretch : normal과 동일하며 가로 축을 가득 채우기 위해 그리드를 늘린다.

 

align-items 는 엘리먼트들을 그래드 내부에서 세로정렬에 쓰인다.

• start: 상단 좌측에 정렬한다.
• end: 하단 좌측에 정렬한다.
• center : 중앙 좌측에 정렬한다.
• stretch : 세로축을 가득 채운다.

 

align-centent 는 그리드 컨테이너를 화면 전체(height로 설정한 값) 에서 세로 정렬하는데 쓰인다.

• start : 상단 좌측에 정렬한다.
• end : 하단 좌측에 정렬한다.
• center : 중앙 좌측에 정렬한다.
• space-around : 각 열의 상하 여백을 동일하게 정렬한다.
• space-between : 첫 행은 상단에, 마지막 행은 하단에, 나머지는 고르게 정렬한다.
• space-evenly : 상하 모든 여백을 고르게 분포.
• stretch : 상하로 늘려줌.

 

justify-self : 위에서는 전체 그리드를 정렬했고 이제 각각의 엘리먼트(자식 엘리먼트) 들에서 세로 정렬.

align-self : 위에서는 전체 그리드를 정렬했고 이제 각각의 엘리먼트(자식 엘리먼트) 들에서 세로 정렬

grid-auto-flow : 자동 배치

• row: 아이템들을 왼쪽부터 오른쪽으로 채우고 많으면 다음 행으로 넘긴다.
• column: 위에서 아래로 채우고 많으면 열을 작성.