[CSS] CSS Flex, 2D 새로운 기술들을 파헤쳐보자 !

 

CSS Flex (플렉서블 레이아웃)

대부분의 웹사이트는 수직 구성이며 "위-아래"로 스크롤 하여 사용합니다. 레이아웃을 구성할 때 가장 많이 사용하는 요소들이 대부분 블록개념으로 표시되며 이는 뷰에 수직으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 구성할 수 있습니다. 하지만 수평 구성의 경우는 속성이 명확하지 않기 때문에 <table>이나 float 혹은 inline-block으로 구성했습니다. 따라서 쉽게 수평을 구성할 수 있는 Flex(플렉서블 레이아웃)이 차선책으로 만들어졌습니다.

• display : flex;
• flex-wrap

 

플렉스 라인에 더 이상의 여유가 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지 여부를 설정합니다.

1. nowrap : 기본 설정, 플렉스 요소가 다음 줄로 넘어가지 않습니다. 대신 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치시킵니다.
2. wrap : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다.
3. wrap-reverse : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다. 단, 아래 쪽이 아닌 위쪽으로 넘어갑니다.

 

justify-content

: 플렉스 요소의 수평 방향 정렬 방식을 설정합니다.

• flex-start : 기본 설정, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치됩니다.
• flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치됩니다.
• center : 플렉스 요소는 컨테이너의 가운데에서부터 배치됩니다.
• space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치됩니다.
• space-around : 플렉스 요소는 앞, 뒤 그리고 요소들 사이에 모두 여유 공간을 두고 배치됩니다.

 

align-items

: 플렉스 요소의 수직 방향 정렬 방식을 설정합니다. 이 속성은 한줄만을 가지는 플렉스 박스에는 효과가 없으며, 두 줄 이상 가지는 플렉스 박스에만 효과가 있습니다.

• stretch : 기본 설정, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.
• flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됩니다.
• flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됩니다.
• center :  플렉스 요소는 플렉스 컨테이너의 가운데에 배치됩니다.
• baseline : 플렉스 요소는 플렉스 컨테이너의 기준선에 배치됩니다. 글자의 밑을 기준으로 잡고 크기 변경 및 정렬
• align-self : 플렉스 컨테이너의 align-items 속성보다 우선 적용됩니다. 이 속성을 이용하면 플렉스 요소마다 서로 다른 align 속성값을 설정할 수 있습니다.

 

order

: 플렉스 컨테이너 안에 있는 플렉스 요소들의 순서를 설정합니다.

 

flex-grow

: 플렉스 컨테이너 아이템들이 차지할 너비들에 대한 증가형 숫자를 지정합니다.

 

flex-shrink

: 플렉스 컨테이너 아이템들이 차지할 너비들에 대한 감소형 숫자를 지정합니다.

 

flex-basis

: 플렉스 컨테이너 아이템의 길이를 지정합니다.

 

flex: 2 2 0; 

첫 번째 숫자 - flex-grow
두 번째 숫자 - flex-shink
세 번째 숫자 - 0 == auto

 

 

CSS 2D

 

transform

: 2차원 좌표에서 요소를 변형시키는 속성입니다. 이동, 확대, 축소, 회전, 경사등을 만들 수 있습니다.

• translate : 요소를 X축 방향이나 Y축 방향으로 이동합니다.
• scale : 각도를 지정하여 요소를 확대 또는 축소를 시킵니다.
• rotate : 각도를 지정하여 요소를 회전시킵니다.
• skew : X축 방향과 Y축 방향으로 요소를 기울입니다.

 

* 벤더 프리픽스(vender prefix)

주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미합니다. 아직 css 권고안에 포함되지 못한 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 벤더 프리픽스를 사용합니다.

 

*아래 사이트에서 속성을 확인하여 벤더 프리픽스를 적용
https://caniuse.com

Can I use... Support tables for HTML5, CSS3, etc

 

ms : 마이크로소프트
moz : 모질라 ==> 파이어폭스
o : 오페라 브라우저
webkit : 크롬/사파리

-ms-transform: translate(30px, 30px);
-moz-transform: translate(30px, 30px);
-o-transform: translate(30px, 30px);
-webkit-transform: translate(30px, 30px);

 

linear-gradient(방향, 시작색상, 끝색상)

방향을 적지않으면 위에서 아래로 그라데이션이 됩니다.

.gradient{
    background: yellow; /* 일단 시작색상을 배경에 깔아 놓기위해 */ 
    /* 속성을 지원하지 않는 모든 브라우저를 위한 코드 */
    /* 크롬과 사파리를 위한 코드 */
    background : -webkit-linear-gradient(yellow, blue);
    /* 파이어 폭스를 위한 코드 */
    background : -mox-linear-gradient(yellow, blue);
    /* 오페라를 위한 코드 */
    background : -o-linear-gradient(yellow, blue);
    /* 익스플로러를 위한 코드 */
    background : -ms-linear-gradient(yellow, blue);
    /* CSS 표준 문법을 위한 코드 */
    background: linear-gradient(yellow, blue);
}

* 벤더 프리픽스를 사용하는 방법은 해당 속성이 적용되지 않았을 경우 표현해야 하는 코드를 가장 먼저 작성해야하며, 표준 문법 코드는 가장 마지막에 작성해야 합니다.

 

transition

: 요소에 추가할 css 스타일 전환효과를 설정합니다. 추가할 전환효과나 지속될 시간도 설정할 수 있습니다.

• transition-delay : 전환효과가 나타나기 전까지 지연시간을 설정합니다. 설정된 시간이 흐른뒤에 시작됩니다.
• trasition-duration : 전환효과가 지속될 시간을 설정합니다. 
• transition-property : 요소에 추가할 전환효과를 설정합니다.
• transition-timing-function : 전환효과의 값을 설정합니다.
• linear : 전환효과가 처음부터 끝까지 일정한 속도로 진행합니다.
• ease : 기본값, 전환효과가 천천히 시작되어 그 다음에는 빨라지고 마지막에는 느려집니다.
• ease-in : 전환효과가 천천히 시작됩니다.
• ease-out : 전환효과가 천천히 끝납니다.
• ease-in-out : 전환효과가 천천히 시작되어 천천히 끝납니다.