css 정리

주말은 공부를 못했다. . . 이모집 갔다가 집에 오느라 + 새로 산 데스크탑 세팅. . .

그리고 시험도 있었고. 오늘도 있다. 하지만 해야죠?

이제 css를 마저 정리해보고자 한다. 

 

css 급하게 강의를 듣느라 정말 강의만 듣고 넘겼는데, 막상 웹페이지를 만들기 시작하니

 

레이아웃 만드는 게 쉽지 않아서... 

---

 

플렉스 박스는 무엇이냐...

 

행 또는 열을 주축으로 설정하여 웹 요소를 배치, 정렬하는 1차원 레이아웃 방식이다.

플렉스 컨테이너, 플렉스 아이템 간의 상호작용을 통해 배치, 정렬을 결정한다.

---

플렉스 컨테이너는 플렉스 방식으로 레이아웃을 결정할 요소고,

플렉스 아이템은 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소다.

시작은 display에 flex를 주면 되는데

display: flex는 기본적으로 블록 레벨이다. 인라인으로 주고 싶다면 inline-flex로 주면 된다.

 

 

---

플렉스 방식은 두 개의 축을 제공한다. 그 중 하나의 축을 주축삼아 요소를 배치한다.

 

주축의 기본값은 가로(왼->오)방향이다.

 

오로지 한 축만을 기준으로 정렬한다. ( 높이를 줘도 달라지지 않음)

---

관련 속성

1. flex-direction

플렉스 컨테이너 주축을 결정하는 속성이다.

행은 가로 축, 열은 세로 축을 주축으로 한다.

row - 행(기본값), column - 열

2. flex-wrap

플렉스 아이템들이 강제로 한 줄에 배치되게 할 것인지

또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현할 것인지 결정한다.

no wrap - 공간이 부족하더라도 한 줄에 배치 (기본값)

wrap - 여러 행에 걸쳐 배치

* flex-flow = 위 두 개 속성을 함께 지정할 수 있다.

---

3. justify-content

플렉스 아이템들이 플렉스 박스 주축을 따라 배치될 때, 요소 사의 공간을 분배하는 방식을 결정한다.

flex-start - 기본값

flex-end - 컨테이너 오른쪽 끝에 붙어 정렬

center - 컨테이너 가운데

space-around - 일정한 간격을 가지고 펼쳐짐 (플렉스 아이템들이 똑같은 여백 가짐)

space-between - 양 끝에는 여백 없이 펼쳐짐 (양 끝을 제외하고는 여백 동일)

space-evenly - 똑같은 여백을 가지고 펼쳐짐 (플렉스 컨테이너가 요소 사이사이 동일한 여백 가짐)

 

---

4. align-itmes

플렉스 컨테이너가 교차축 위에서 플렉스 아이템들이 어떤 식으로 정렬할 것인지 결정한다.

* flex-wrap이 기본 값일 때 교차축에서의 배치 방법이다.

5. align-self

플렉스 아이템들에 개별적으로 추가해주는 속성이다.

개별 플렉스 아이템이 교차축에서 어떤 식으로 정렬될 것인지 스스로가 결정하는 속성이다.

align-itmes와 비슷하다.

6. align-content

교차축 위에서 justify-content와 동일하게 사용할 수 있는 속성이다.

(조건) - flex-wrap이 wrap으로 지정, 아이템 배치에 필요한 공간보다 플렉스 컨테이너가 더 클 때 사용한다.

flex-wrap이 wrap일 때 교차축 배치 방법이다.

---

5. flex-grow

플렉스 아이템이 기본 크기보다 더 커질 수 있는지를 결정하고,

플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성이다.

(음수는 허용되지 않음)

6. flex-shrink

플렉스 아이템이 기본 크기보다 더 작아질 수 있는지를 결정한다.

// (flex-grow와 동일)

7. flex-basis

플렉스 아이템의 초기 크기를 지정한다.

box-sizing이 따로 설정되지 않은 경우 콘텐츠 박스의 크기를 결정한다.

8. flex

flex-grow, flex-shrink, flex-basis 위 세가지 속성을 정의할 수 있는 단축 속성이다.

 

9. order

플렉스 아이템의 배치 순서를 설정할 수 있으며, 지정한 숫자에 맞춰 오름차순으로 배치가 진행된다.

코드에 영향을 끼치지 않고, 보여지는 순서에만 영향을 준다.

---

그리드 레이아웃

 

이름 그대로 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식을 말한다.

 

그리드 레이아웃 방식에서 그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의

상호작용을 통해 결정된다.

 

그리드 컨테이너는 그리드 방식으로 레이아웃을 결정할 요소를 말하고, 그리드 아이템은 컨테이너

내부에서 그리드 방식으로 배치되는 요소다.

---

시작은 flex처럼 display: grid 속성을 준다.

마찬가지로 인라인은 inline-grid 속성을 주면 된다.

 

---

관련 속성

 

grid-template-columns

그리드 컨테이너 트랙 중 열(column) 트랙 내 아이템들의 크기를 지정할 수 있는 속성이다.

(트랙: 행 또는 열)

repeat(반복될 열 & 행 개수, 크기) : 같은 크기일 때 반복해서 지정할 수 있다.

*repeat 첫번째 인자에 받을 수 있는 키워드 :  auto-fill(트랙의 최소 길이의 합보다 컨테이너의 너비가 훨씬 길어진 경우 빈 공간을 남긴다), auto-fit(컨테이너에 빈 공간을 남기지 않고 다 채워준다)

minmax(최소 길이, 최대 길이) : 아이템의 최소, 최대 길이를 지정할 수 있다.

 

grid-template-rows

트랙 중 행 트랙 내 아이템들의 크기를 지정할 수 있는 속성이다.

fr - (단위) 사용할 수 있는 공간에서 비율로 나눔

 

 gap(grid-gap)

그리드 아이템 사이의 간격을 지정하는 속성이다. 간격을 똑같이 지정할 수도 있고,

각자 지정할 수도 있다.

 

grid-column & row 

그리드 컨테이너의 줄 번호를 이용해 아이템을 배치할 수 있다.

줄 번호 : 경계선 하나하나마다 매겨진 숫자 의미

grid-row-start -> (n번째 줄에서) 시작

grid-row-end -> (n번째 줄까지)

---

grid-template-areas

그리드 영역(아이템)의 이름을 이용해 레이아웃의 형태를 정의할 수 있다.

 

grid-area

그리드 영역(아이템)의 이름을 지정할 때 사용하는 속성이다.

 

---

align-items

플렉스 박스 방식에서와 유사한 역할을 한다. 그리드 컨테이너 행 높이를 기준으로 그리드 아이템의 배치를 결정한다.

(행 높이 안에서의 배치 결정)

 

align-self

각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정한다.

 

justify-items

수평축(행)을 따라 그리드 아이템을 정렬하고자 할 때 사용할 수 있는 속성으로, 그리드 컨테이너에 지정한다.

아이템에 할당된 열 방향 너비가 기준이 된다.

(열 너비로의 배치 결정)

 

justify-self

수평축(행)을 따라 그리드 아이템을 정렬하고자 할 때 사용할 수 있는 속성으로, 각각의 그리드 아이템에 지정한다.

 

---

align-content & justify-content

플렉스 박스 방식과 유사하게 사용한다.

그리드 컨테이너의 수직축과 수평축에서의 아이템 정렬 방식을 결정한다.

컨테이너에 여유 공간이 있을 때 사용할 수 있다.

 

align-content : 컨테이너 전체 안에서냐, 세로 방향

align-items : 트랙 안에서냐

 

justify -content : 가로 방향

---

정리 (flex)

 

부모 요소인 div.container -> flex container라 부름

자식 요소인 div.item -> flex item이라 부름

 

컨테이너는 flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치된 것

 

속성은 컨테이너에 적용하는 속성, 아이템에 적용하는 속성 두 가지로 나뉨

 

(컨테이너에 적용하는 속성)

flex-direction -> 아이템 배치 방향 설정

flex-wrap -> 줄넘김 처리 설정

flex-flow = 위 두가지 한꺼번에 지정 가능

 

*justify (메인축 방향으로 정렬(-))

*align (수직축 방향으로 정렬(|))

 

justify-content -> 메인축 방향으로 아이템 정렬

align-items -> 수직축 방향으로 아이템 정렬

align-content -> 여러 행 정렬( flex-wrap:wrap일 때)

 

 

(아이템에 적용하는 속성)

flex-basis -> 유연한 박스의 기본 영역

flex-grow -> 유연하게 늘리기

flex-shrink -> 유연하게 줄이기

flex = 위 세가지를 한 번에 지정 가능

 

align-self -> 수직축 방향으로 아이템 정렬( align-items보다 우선)

order -> 배치 순서 결정

z-index -> z축 정렬 가능 (숫자가 클수록 위로 올라감)

 

 

 

정리 (grid)

flex보다 더 복합적인 레이아웃 표현 가능

 

그리드 컨테이너 -> 그리드를 적용하는 그리드의 전체 영역

그리드 아이템 -> 그리드 컨테이너의 자식요소

그리드 트랙 -> 그리드의 행 또는 열

그리드 셀 -> 그리드 한 칸

그리드 라인 -> 그리드 셀 구분하는 선

그리드 번호 -> 그리드 라인의 각 번호

그리드 갭 -> 그리드 셀 사이의 간격

그리드 영역 -> 그리드 라인으로 둘러싸인 사각형 영역 (그리드 셀의 집합)

 

속성

grid-template-rows & columns -> 그리드 트랙의 크기들을 지정해주는 속성

 

---

https://youtube.com/playlist?list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&si=0HEIOfgwPu8wh6fz

CSS 레이아웃 - flex & grid

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자