레이아웃
콘텐츠와 영역의 배치 등을 다루는 layout 기술
Flex 레이아웃
display를 flex로 지정하면 해당 방식으로 자식 요소들을 배치하게 된다.
flex-direction 은 내부 요소(아이템)들을 어느 축(가로 또는 세로)을 이 값에 따라 justify-content, align-items, align-content 등의 속성들이 작용할 방향이 결정 된다.
justify-content는 메인 축에서 아이템들을 정렬할 방식
align-items는 수직 축(메인 축의 반대)에서 아이템들을 정렬할 방식
wrap으로 아이템이 여러 줄이 되면 align-content를
사용해서 보다 다양한 방식으로 정렬할 수 있음
flex-wrap은 내부 요소의 갯수 x길이가 컨테이너를 넘어갈 때 이들을 여러 줄에 걸쳐 나열할지 여부를 정한다. (rap, norap)
flex 컨테이너 안 아이템의 속성들
flex: (flex-grow 값) (flex-shrink 값) (flex-basis 값);
flex-grow : 빈 공간을 채울지 여부, 그리고 채울 시 다른 아이템들의
동 속성값에 비례해서 공백을 나눠가짐. 기본값은 0
flex-shrink : 전체 공간이 부족할 때, 해당 아이템의 길이가
컨텐츠의 너비 또는 flex-basis로 지정한 값보다 작아질 수 있을지를
지정. 기본값은 1이며, 증가할수록 길이가 많이 줄어든다.
flex-basis는 메인 축상의 길이로, 컨테이너의 flex-direction 값에 따라 너비 또는 높이값으로 작용. 기본값은 auto.
eg
Grid 레이아웃
이전에는 flot과 clear 속성등을 사용했다면 현재는 Flex와 Grid 속성을 주로 사용하고 있다. Flex는 한 방향 레이아웃 시스템(1차워), Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원) 인점에서 차이가 있다.
Flex & Grid 는 처음들었을 때는 1도 모르겠는데 (지금은 1.5 정도) 보니깐 웹페이지 전반의 틀을 잡아주는데 용이한거 같다.
우선 이런 느낌정도만,,,
ps
조금씩 익숙해져야 하는데 아직 잘 모르겠지만 keep going 합시다요..
+++ 08.06
flex box layout (복습차원,,,)
크게 플렉스 컨테이너와 플렉스 아이템으로 구성된다.
display 속성
모든 플렉스 박스 레이아웃은 display 속성값을 flex나 inline-flex로 지정하는 것에서 시작한다.
flex는 적용된 요소의 다음 요소가 항상 줄 바꿈되고, inline-flex는 다음 요소가 주변에 배치되게 한다. display 속성이 지정된 요소는 플렉스 컨테이너가 되고, 자식 요소는 플렉스 아이템이 된다.
플렉스 박스 레이아웃의 기본 특징은 플렉스 아이템이 수직(세로)에서 수평(가로)방향으로 배치되기에, 플렉스 아이템이 원래 가지고 있던 박스 성격(인라인/인라인 블록/블록)은 무시된다.
flex-direction 속성
플렉스 박스 레이아웃의 주축 방향을 결정. 1차원 방식으로 가로(row)나 세로(column)중 한 방향으로만 레이아웃을 설계하는 방식.
row가 기본 flex-direction 기본 속성 ( 주축 방향을 왼쪽에서 오른쪽으로 지정) row-reverse는 오른쪽에서 왼쪽 지정
column은 주축 방향을 위쪽에서 아래쪽, coulumn은 아래쪽에서 위쪽 지정
flex-wrap 속성
플렉스 아이템이 플렉스 컨테이너 영역을 벗어날 때 어떻게 처리할지를 결정 한다.
기본값이 nowrap이다.
flex-flow 속성
flex-direction 속성과 flex-wrap 속성을 한 번에 사용할 수 있는 단축 속성
eg
flex-flow:column nowrap;
justify-content 속성
플렉스 아이템들을 주축 방향으로 정렬할 때 사용하는 속성
요런 느낌. space-between 속성은 플렉스 아이템 사이의 간격이 균일하도록 정렬
space-evenly 속성은 플렉스 아이템 사이와 양끝의 간격이 균일하도록 정렬
align-items, align-content, align-self 속성
플렉스 아이템을 교차축 방향으로 정렬할 때 사용.
align-items는 기본적으로 stretch 값이 적용도어 있어 단순하게 display 속성이에 flex나 inline-flex 값만 적용해도 플렉스 아이템이 플렉스 컨테이너의 높이만큼 가득 차게 늘어나는 것이다.
align-content 속성도 플렉스 아잉템을 교차축 방향으로 정렬할 때 사용하나, flex-wrap 속성 때문에 두 줄 이상이 됐을 때만 사용 한다.
align-items 속성으로 플렉스 아이템을 한 번에 정렬하지 않고 각각 정렬하고 싶을 때는 align-self 속성을 사용하면 된다.
Grid 속성
Grid Layout 속성은 웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성
2차원 방식이란 가로(row)와 세로(columm)를 같이 사용해 레이아웃을 설계하는 방식
display 속성
그리드 레이아웃은 항상 display 속성값을 grid나 inline-grid로 지정하는 것에서 시작한다. 해당 속성이 지정된 요소는 그리드 컨테이너가 되고, 자식 요소는 그리드 아이템이 된다.
grid-template-columns & grid-template-rows 속성
그리드 컨테이너의 기본 요소는 행과 열이다.
100px 크기의 행과 열이 2개씩 생성
row-gap과 column-gap 속성
그리드 갭은 행과 열이 만나 이루어지는 그리드 셀과 그리드 셀 사이의 간격이다.
align-items와 align-self 속성
그리드 아이템을 정렬할 수 있는 속성
justify-items와 justify-self 속성
justify-items 속성은 그리드 아이템을 각 그리드 셀의 가로 방향으로 정렬
place-items와 place-self 속성
align-items, justify-items
place-self, align-self
속성을 한 번에 사용할 수 있는 단축 속성
grid-template-areas & grid-area 속성
grid-template-areas 속성은 그리드 레이아웃의 행과 열을 이름으로 지정
그리드 컨테이너에 그리드 레이아웃에 표시된 행 이름을 지정할 수 있다. 이름을 지정하고 나면 grid-area 속성으로 이름을 그리드 아이템에 배치할 수 있다.
grid-column-start, grid-colimn-end, grid-row-start, grid-row-end 속성
그리드 행과 열을 그리는 선을 그리드 라인이라고 한다. 그리드 라인에는 각각 고유한 번호가 있는데, 이를 그리드 넘버라고 한다.
그리드 아이템의 열 & 행 시작 위치와 종료 위치를 지정한다.
gird-colum과 grid-row 속성
단축속성으로 아래 처럼 사용한다
grid-column: start, end;
grid-row: start, end;
