.
[css] css3 flex를 공부하자 본문
https://heropy.blog/2018/11/24/css-flexible-box/
CSS Flex(Flexible Box) 완벽 가이드
많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS Flex에 대해서 알아봅시다.
heropy.blog
대부분 사이트는 전체 레이아웃이 수직 구성이며 ‘위-아래’로 스크롤 하여 사용합니다.
레이아웃을 구성할 때 가장 많이 사용하는 요소(Elements)들이 기본적으로 블록(Block) 개념으로 표시(Display)되며 이는 뷰(View)에 수직(위에서 아래로)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있습니다.
하지만 수평(왼쪽에서 오른쪽으로) 구성의 경우는 상황이 조금 다릅니다.
문제는 수평 구조를 만드는 속성이 명확하지 않았기 때문인데, 그래서 많은 경우 <table>나 float 혹은 inline-block 등의 도움을 받았습니다.
하지만 이러한 방법들은 다양한 문제(Clear, White space 등, 해결은 가능하지만..)를 가지고 있기 때문에 결국 수평 레이아웃 구성의 차선책일 뿐이며, 이제 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다.
기존
flex
Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다.
우선 Flex는 2개의 개념으로 나뉩니다.
첫 번째는 A) Container
두 번째는 B) Items 입니다.
Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다.
주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다.
Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있으며,
Items에는 order, flex, align-self 등의 속성을 사용할 수 있습니다.
http://www.beautifulcss.com/archives/2812?source=post_page-----b22820120132----------------------
Beautiful CSS » 포지셔닝 : Flexbox
Image from Introducing Flexbox Fridays 이야기에 앞서 Flexbox Layout은, 새롭게 CSS3 명세에 반영된 레이아웃 모듈로서, 요소들이 수용된 공간을 어떻게 효과적으로 채워나갈지에 대한 아이디어에서 시작된 새로운 레이아웃 방식입니다. 이 명세는 일부 IE 계열 브라우저에서 제조사 전용속성을 필요로 하며, 다소 버그가 발생할 수 있지만, 앞으로의 레이아웃 방식을 완전히 대체할 만한 기술이므로 반드시 학습하길 권합니다.
www.beautifulcss.com
http://www.beautifulcss.com/wp/demo/flexbox/
데모보기: Flexbox
www.beautifulcss.com
(클릭으로 간단히 바로 속성 확인해 볼수 있는 블로그)
flexbox로 만들 수 있는 10가지 레이아웃
https://d2.naver.com/helloworld/8540176#ch3
https://d2.naver.com/helloworld/8540176#ch3https://d2.naver.com/helloworld/8540176#ch3
- 레이아웃 1 - 스크롤 없는 100% 레이아웃
- 레이아웃 2 - 내비게이션 영역
- 레이아웃 3 - 브라우저 화면 아래에 붙는 푸터
- 레이아웃 4 - 정렬이 다른 메뉴
- 레이아웃 5 - 폼 레이블 수직 중앙 정렬
- 레이아웃 6 - 중앙 정렬 아이콘
- 레이아웃 7 - 유동 너비 박스
- 레이아웃 8 - 말줄임과 아이콘
- 레이아웃 9 - 위아래로 흐르는 목록
- 레이아웃 10 - 가로세로 비율을 유지하는 반응형 박스
A) Flex Container
Flex Container를 위한 속성들은 다음과 같습니다.
주 축(main-axis)과 교차 축(cross-axis)의 개념은 뒤에서 살펴봅시다.
속성의미
| 1) display | Flex Container를 정의 |
| 2) flex-flow | flex-direction와 flex-wrap의 단축 속성 |
| 3) flex-direction | Flex Items의 주 축(main-axis)을 설정 |
| 4) flex-wrap | Flex Items의 여러 줄 묶음(줄 바꿈) 설정 |
| 5) justify-content | 주 축(main-axis)의 정렬 방법을 설정 |
| 6) align-content | 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) |
| 7) align-items |
교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄) 주의) Items가 flex-wrap을 통해 여러 줄(2줄 이상) 경우 align-content 속성이 우선합니다.
align-items는 Container 내 모든 Items의 정렬 방법을 설정함 B-6)align-self를 사용할 수 있습니다. |
1) display
display 속성으로 Flex Container를 정의합니다.
보통 요소의 표시 방법을 display: block;, display: inline-block 혹은 display: none; 같이 사용하는 경우가 많죠.
같은 요소의 표시 방법으로 Block이나 Inline이 아닌 Flex(display: flex, display: inline-flex)로 정의합니다.
| flex | Block 특성의 Flex Container를 정의 |
| inline-flex | Inline 특성의 Flex Container를 정의 |
flex와 inline-flex는 차이는 단순합니다.
display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며,
display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다.
여기서 말하는 수직과 수평 쌓임은 Items가 아니라 Container라는 것에 주의
두 값의 차이는 내부에 Items에는 영향을 주지 않습니다.\
2) flex-flow
이 속성은 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정합니다.
| a) flex-direction | Items의 주 축(main-axis)을 설정 | row |
| b) flex-wrap | Items의 여러 줄 묶음(줄 바꿈) 설정 | nowrap |
.flex-container {
//공통 사용시
flex-flow: flex-direction flex-wrap;
//단독 사용시
flex-direction: 값;
flex-wrap: 값;
}3) or 2-a) flex-direction
| 수평) row | Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시 | row |
| 역수평) row-reverse | Items를 row의 반대 축으로 표시 | |
| 수직) column | Items를 수직축(위에서 아래로)으로 표시 | |
| 역수직) column-reverse | Items를 column의 반대 축으로 표시 |
주 축(main-axis)과 교차 축(cross-axis)
값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 됩니다.
(수평정렬: 주축/ col: 교차축 )
반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 됩니다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라집니다.
(수직정렬: 주축/ row: 교차축)
시작점(flex-start)과 끝점(flex-end)
주 축이나 교차 축의 시작하는 지점과
끝나는 지점을 지칭
주축 시작점/ 교차축 시작점이 있음
역시 방향(reverse)에 따라 시작점과 끝점이 달라집니다.
뒤에서 언급할 속성 중 값으로 flex-start와 flex-end를 사용하는데 이는 방향에 맞는 그 시작점과 끝점을 의미합니다.
4) or 2-b) flex-wrap
Items의 여러 줄 묶음(줄 바꿈)을 설정합니다.
| nowrap (default) | 모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시) | nowrap |
| wrap | Items를 여러 줄로 묶음 | |
| wrap-reverse | Items를 wrap의 역 방향으로 여러 줄로 묶음 |
기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않습니다.
이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄 안에서만 가변합니다.
Items를 줄 바꿈 하려면 wrap을 사용해야 합니다.
5) justify-content
주 축(main-axis)의 정렬 방법을 설정합니다.
| flex-start | Items를 시작점(flex-start)으로 정렬 | flex-start |
| flex-end | Items를 끝점(flex-end)으로 정렬 | |
| center | Items를 가운데 정렬 | |
| space-between | 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨 | |
| space-around | Items를 균등한 여백을 포함하여 정렬 |
6) align-content
교차 축(cross-axis)의 정렬 방법을 설정합니다.
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있습니다.
Items가 한 줄일 경우 align-items 속성을 사용하세요.
| stretch |
Container의 교차 축을 채우기 위해 Items를 늘림 교차 축에 해당하는 너비(속성 width 혹은 height)가 값이 auto(기본값)일 경우 |
stretch |
| flex-start | Items를 시작점(flex-start)으로 정렬 | |
| flex-end | Items를 끝점(flex-end)으로 정렬 | |
| center | Items를 가운데 정렬 | |
| space-between | 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨 | |
| space-around | Items를 균등한 여백을 포함하여 정렬 |
7) align-items
교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다.
Items가 한 줄일 경우 많이 사용합니다.
주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선합니다.
따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.
| stretch | Container의 교차 축을 채우기 위해 Items를 늘림 | stretch |
| flex-start | Items를 각 줄의 시작점(flex-start)으로 정렬 | |
| flex-end | Items를 각 줄의 끝점(flex-end)으로 정렬 | |
| center | Items를 가운데 정렬 | |
| baseline | Items를 문자 기준선에 정렬 |
https://codepen.io/witblog/pen/aaKoBV
5. 폼 타이틀 수직 중앙정렬
...
codepen.io
B) Flex Items
Flex Items를 위한 속성들은 다음과 같습니다.
| 1) order | Flex Item의 순서를 설정 |
| 2) flex | flex-grow, flex-shrink, flex-basis의 단축 속성 |
| 3) flex-grow | Flex Item의 증가 너비 비율을 설정 |
| 4) flex-shrink | Flex Item의 감소 너비 비율을 설정 |
| 5) flex-basis | Flex Item의 (공간 배분 전) 기본 너비 설정 |
| 6) align-self | 교차 축(cross-axis)에서 Item의 정렬 방법을 설정 |
1) order
Item의 순서를 설정합니다.
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.
음수가 허용됩니다.
HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용합니다.
| NUM (숫자: 작을 수록 우선순위 높음) | Item의 순서를 설정 | 0 |
2) flex
Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성입니다.
| a) flex-grow | Item의 증가 너비 비율을 설정 | 0 |
| b) flex-shrink | Item의 감소 너비 비율을 설정 | 1 |
| c) flex-basis | Item의 (공간 배분 전) 기본 너비 설정 | auto |
flex container의 크기에 영향을 받는 반응형 flex item을 만들고 싶다면 flex: auto 속성을 사용
.item {
flex: flex-grow flex-shrink flex-basis;
flex: 1 1 20px; /* flex-grow flex-shrink flex-basis */
flex: 1 1; /* flex-grow flex-shrink */
flex: 1 20px; /* flex-grow flex-sbasis (단위를 사용하면 flex-basis 가 적용됩니다) */
/*아래 3개가 같은 것*/
flex: 1; /* flex:1; === flex-grow:1; flex-shrink: default(1); flex-basis: 0 (auto 아님 주의)*/\
flex: 1 1;
flex: 1 1 0;
flex: auto; /* flex: 1 1 auto */
/* flex 통합 속성 안쓰고 각각 쓸 수 있음 */
flex-grow: 값;
fles-shrink: 값;
flex-basis: 값;
}3) or 2-a) flex-grow
Item의 증가 너비 비율을 설정합니다. 숫자가 크면 더 많은 너비를 가집니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.
| 숫자 | Item의 증가 너비 비율을 설정 | 0 |
모든 Items의 총 증가 너비(flex-grow)에서
각 Item의 증가 너비의 비율 만큼 너비를 가질 수 있습니다.
예를 들어 Item이 3개이고
증가 너비가 각각 1, 2, 1이라면,
첫 번째 Item은 총 너비의 25%(1/4)을,
두 번째 Item은 총 너비의 50%(2/4)를,
세 번째 Item은 총 너비의 25%(1/4)을 가지게 됩니다.
https://codepen.io/heropark/pen/zMLbPw
flex-grow
...
codepen.io
cf_) TweenMax (GSAP: Green Sock Animation Platform)
프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인기반의 애니메이션 자바스크립트 라이브러리 입니다. 이 GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있어요.
GSAP 를 사용하면 Javascript에 대한 지식이 뛰어나지 않아도 애니메이션 제작을 할 수 있어요!
이 가이드에서는 GSAP의 TweenMax 기능의 설정 및 사용하는 방법에 대해 알아 볼 것입니다.
https://byseop.netlify.com/gsap/
GSAP 트윈맥스(TweenMax)를 이해하고 사용하기. - BYSEOP's devlog
BYSEOP's devlog
byseop.netlify.com
TweenLite.to([Selector], [Duration], {Properties:end values})
처음 Selector 은 대상을 뜻합니다. 어떤걸?,
두번째 Duration 는 지속시간 입니다. 몇초동안?
세번째 {Properties:end values} 는 객체의 키와 값입니다. 뭘? 어떻게?
출처: https://recoveryman.tistory.com/378?category=704086 [회복맨 블로그]
4 or 2-b) flex-shrink
Item이 감소하는 너비의 비율을 설정합니다.
숫자가 크면 더 많은 너비가 감소합니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.
| 숫자 | Item의 감소 너비 비율을 설정 | 1 |
감소 너비(flex-shrink)는 요소의 너비에 영향을 받기 때문에 계산하기 까다롭습니다.
영향을 받는다는 요소의 너비는 width, height, flex-basis 등으로 너비가 지정된 경우를 의미합니다.
Container의 너비가 줄어 Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 Item의 너비가 줄어듭니다.
계산이 까다롭기 때문에 활용도는 조금 떨어진다고 생각합니다. 원리 정도만 이해하고 넘어갑시다.
즉, 컨테이너 너비가 "N px"줄어들 때, 각 아이템의 너비가 정해저 있으면,
그 비율(ex: 아이템1 비율 계산: Npx * (아이템1 /아이템1+아이템2))에 맞게 줄어든다.
5 or 2-c) flex-basis
Item의 (공간 배분 전) 기본 너비를 설정합니다.
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다.
하지만 단위 값이 주어질 경우 설정할 수 없습니다.(공간너비 설정이 안된다. flex-grow(?)만 적용)
목록을 이루는 항목 요소가 일정한 비율로 유지되게 flex-basis: 33.33% 속성을 적용한다
| auto | 가변 Item과 같은 너비 | auto |
| 단위 | px, em, cm 등 단위로 지정 |
아래 그림:) flex-basis 가 auto 일때, 0일때, 단위 설정일 때
6) align-self
교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정합니다.
align-items는 Container 내 모든 Items의 정렬 방법을 설정합니다.
필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있습니다.
이 속성은 align-items 속성보다 우선합니다.
| auto | Container의 align-items 속성을 상속받음 | auto |
| stretch | Container의 교차 축을 채우기 위해 Item을 늘림 | |
| flex-start | Item을 각 줄의 시작점(flex-start)으로 정렬 | |
| flex-end | Item을 각 줄의 끝점(flex-end)으로 정렬 | |
| center | Item을 가운데 정렬 | |
| baseline | Item을 문자 기준선에 정렬 |
| 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) |
|
교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄) 주의) Items가 flex-wrap을 통해 여러 줄(2줄 이상) 경우 align-content 속성이 우선합니다.
align-items는 Container 내 모든 Items의 정렬 방법을 설정함 B-6)align-self를 사용할 수 있습니다. |
align 속성 우선순위
align-self > align-content(여러줄일때) >= align-items(align-content를 stretch 로 해야함)