[CSS이론] 05 - Flexbox | Grid System
Flexbox는?
정렬의 끝판왕
그동안의 float는 ...🖐
앞으로 flexbox만 사용하면된다. <- 이정도로 너무 좋은애!
[CSS실습] 03 - Float <- 옛날 코드를 보기위해 알아야 하는 애라고 생각하면좋다.... 😥
[CSS실습] 02 - Position
을 거치며 얘네가 어떤식으로 동작하는지 그 프로세스에 대해서 꼼꼼히 설명했었다.
하지만 Flexbox는 이 자체로가 그냥 완벽하다.
따라서 Flexbox를 사용할때는 원리이해(How it works)는 필요없고,
잘 사용하는 방법(How to use it)에 대해서만 기억하면된다.
container : a hollow object(텅 빈 객체) such a box or a bottle, that can be used for holding something.
텅 빈 객체 , 박스 or 병 or 그릇 같이 이런것들로 어떤것을 담거나 유지지키는 것을말함.
Flexbox를 사용을해서 정렬을 할때는 4Steps 사고에서만 정리하면된다.
#1. 플렉스박스 쓸거임(단호)
#2. 가로 정렬? 세로 정렬?
#3. 무조건 한 줄 안에 다 정렬?
------------------------------------------>#3번까지가 Flexbox를 사용하기위한 준비과정
#4. 씐나는 플렉스박스 파티 타임!
준비시작 !
#1. 플렉스박스 쓸거임(단호)
display속성 타입으로 flex | inline-flex 타입을 줄 수 있다.
이 선언은 대체 누구한테 해줘야 할까?
내가 정렬을 하고자하는 요소들을 감싸는 부모한테 display : flex값을 주어야한다.
#2. 가로 정렬? 세로 정렬?
선언을 했으면 내가 어느방향으로 정렬을 할 것인지에 대해 알려줘야한다.
이때 사용하는 속성이 바로 flex-direction(방향)이다.
정렬을할때 가로 방향으로 정렬할 것인지 새로 방향으로 정렬할 것인지에대해서 정해주는것이다.
가로정렬 : row
세로정렬 : column
근데 flex를 할때 굉장히 중요한 사실 하나를 더 알아야한다.
flex를 사용하면 우리눈에는 보이지않는 2개의 축(Axis) 이 생긴다.
이 Axis가 flex-direction이 어떤값으로 설정이 되어있느냐에 따라서 이 2개의 축의 방향이 완전히 달라진다.
즉, 중요한 기준점이다.
2개의 축의 이름은 Main axis와 Cross axis이다.
미리보는 2개의 축
Main axis는 flex-direction방향에 따라서 생긴다.
Main과 수직을 이루는 방향으로 Cross axis가생긴다.
flex-direction : row 로 주었다
그러면 왼->오 쪽으로 흐르는 Main axis가 생기고
그리고 그와 정확하게 (위->아래로 흐르는) 수직을 이루는 Coss axis가 생긴다
그럼 반대로
flex-direction : column으로 주면 어떻게될까?
column은 세로방향으로 정렬을 할때 사용하는 거니까 세로가 바로 Main이된다.
따라서 위->아래로 흐르는것이 Main axis가되고,
그와 정확하게 수직을 이루는 (왼->오) Corr axis가 생긴다.
이와같이 알 수 있듯이 flex-direction에 따라서 똑같이 2개의 축이 생기지만,
그 2개의 방향이 완전히 달라지기 때문에 이것을 반드시 기억해야된다.
row와 column말고도 row-reverse / column-reverse가 있는데,
이 둘은 Main axis만 방향들이 바뀔뿐 Corss axis의 방향은 똑같다.
#3. 무조건 한 줄 안에 다 정렬?
flex-wrap이란,
어떻게든 한줄안에 모든 요소를 정렬 할것인지 아니면 상황에따라서는
여러줄을 만들어서 정렬을 할 것인지에 대해 정해주는 것이다.
ex. 부모가 600px밖에 안되는데, 자식이 각각 300px씩 3개가 있다.
근데 한줄안에 다 담고싶어서 flex-wrap:nowrap 을 하게된다면
강제로 200px 200px 200px씩 한줄 정렬을 해버리는 것이다.
float를 사용했을때는 전혀 상상할 수 없는기능이다. ->얘는 바로 자식이 아랫칸으로 튕겨나갈것이다.
반대로 이렇게 하고싶지 않은 케이스도 많을 것이다.
무조건! 자식을 300px로 유지를 해야된다면, flex-wrap:wrap이라고 설정하게된다면 감싸겠다는 의미로써
한줄에 모두 정렬하기에 공간이 넉넉하지 않으면 2줄을 만들어서라도 배치하겠다~라는 것이다!
준비과정 끝 !
#4. 씐나는 플렉스박스 파티 타임!
우리가 정렬을 해줄때
내가 선언한 flex-deriction과 같은 방향 즉,
Main axis축을 기준으로 해서 무언가를 정렬해주고싶을때는 justify-content속성라는 CSS속성을 사용해서 정렬을해준다
그게아니라
그와 수직을 이루는 Cross axis축을 정렬해주고싶을때는 align-items | align-content 속성를 사용해주면된다.
Main axis축
Justify-content : center | flex-start | flex-end | space-betwwen | space-around
Cross axis축
❗ Tip : 선 align-items 후 align-contetn
align-items : center | flex-start | flex-end
align-content ( flex-wrap이 wrap이 되어야한다.)
+ order : 마음대로 순서를 바꿀 수 있다.
Grid System이란?
이전에는 CSS의 속성을 공부하고, 어떤식으로 사용하는지에 집중을해서공부를 했다면 ,
지금부터는 페이지 전체를 어떤식으로 설계를하고 스타일을 해야하는지에 대한 공부를 해보자.
그리고 페이지 전체를 설계하기 위해서는 디자인적인 방법론이있는데, 이것이 바로
Grid System이다.
Grid란? 격자 / 가이드라인
우리는 디자이너들의 디자인의 의도를 이해야는 부분이 있기때문에,
디자이너분들이 디자인시안을 만드실때 어떤방식으로 작업을 하시는지에 대해서 조금은 이해를 하고있어야한다.
how designers work
디자이너들은 Grid System을 이용해서 디자인을한다.
깔끔하고, 일관성있는 디자인을 만들기 위해 기본적으로 Grid라는것을 만들어 놓는다.
이 만들어놓은 작업 안에서 작업을 하기 때문에 Grid System이라고한다.
container column gutter
CSS Flex(Flexible Box) HEROPY Tech - flexible-box/
수평-수직 정렬에 대해 관련된 속성이다.
CSS Flex가 처음 등장하기 전에는 <table> / dispaly : inline-block / float속성을 통해 수평-수직 정렬을 겨우겨우했었는데 이는 완벽하지 않은 방법이였다.
Flex를 사용이 되며 위와같은 대체방법들은 사용되지 않게됐다.
Flex로 수직-수평 정렬을 완벽하게 할 수 있다.
CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공한다. 즉, 행과 열을 이용해서 레이아웃구조를 잡을 수 가 있다.
Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하므로, 좀 더 다차원(복잡하게)의 개념으로써 레이아웃을 잡는데는 무리가 있으므로 조금 더 복잡하게 사용하기위해 레이아웃을 사용할 수 있겠다.
CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다.
즉, 예전에 레이아웃을 잡기 위해서는 <table>/ float을 이용한 정렬방식 / position / flexible box 방식들을 많이 썼었는데, 이 것들을 완벽하게 다 대체할 수 있는 속성이 바로 Grid이다. -> 이를 통해 레이아웃을 조금 더 고차원적이게 완성할 수 있다.
CSS Grid는 CSS Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있다.
각각의 속성마다 주어지는 속성이 다르다.
더 알아보기 :
참고자료 :
Flexible box 레이아웃 - Justify-content / align-items 등
https://drafts.csswg.org/css-align/#intro