요소 꽉 채우기
flex-grow는 요소를 늘려서 빈공간을 꽉 채우고 싶을때 쓰는 속성이다.- 얼마나 늘릴지 정할때 사용하는 숫자는 상대적인 숫자이다.
- 기본값은 0이다.
반대로 요소 크기를 줄여서 꽉 채워본다고??
- 컨테이너보다 요소들의 합이 크게 설정되어있다면 컨테이너를 넘어갈 것 같지만, 요소들이 사이좋게 공간을 나눠서 꽉 채운다.
- 이건
flex-box에서 요소의 크기를 줄여준 것이다.
-> 개발자 도구에서 확인해보면 - 빗금 친 부분이 원래 크기인데, 화살표 만큼 줄였다는 것을 의미한다.
flex-shrink의 기본값은 원래 1이다. 그래서 이렇게 다같이 줄어든 것 이다.- 그런데
flex-shrink값이 다르다면 값이 클수록 더 많이 줄어들게 된다.팁!
빈공간을 채우고 싶을때flex-grow: 1을 사용하고,
어떤 요소의 크기를 내가 원하는 대로 고정하고 싶을때는flex-shrink:0을 사용한다.
flex-basis 속성
- 앞에서
flex-grow와flex-shrink를 쓰면서 요소들의 크기를 정할 때 특이한 점이 있었습니다. 우리가 정한 width나 height 값으로 크기가 결정되는 게 아니란 거였는데요. flex-box에서는 요소들의 크기가 유연하게 늘어나거나 줄어들었습니다. - 사실 플렉스박스에서는 고정된 크기가 있는 게 아니라 시작 크기와 최종 크기가 있습니다. 앞에서 정렬에 대해서 배울 때 기본 축(Main Axis)과 교차 축(Cross Axis)에 대해 배웠던 거 기억나시나요?
- 기본 축에서는 시작 크기를 정해 놓으면 플렉스박스 안에서 유연하게 최종 크기가 결정됩니다. 크롬 개발자 도구에서 플렉스박스의 요소를 검사해 보면 빗금을 친 부분만큼의 시작 크기에서, 화살표만큼 최종 크기로 늘어나거나 줄어드는 걸 볼 수 있습니다.
- 플렉스박스에서 요소의 시작 크기는 flex-basis라는 속성으로 지정할 수 있는데요. flex-basis 값을 따로 정해 주지 않으면 기본값은
auto입니다. - 그러면 width나 height를 참고해서 시작 크기를 정하는데요. 기본 축의 방향이 가로 방향이면 width를, 세로 방향이면 height를 참고해서 시작 크기를 정합니다.
- 그래서 사실 대부분의 경우 width나 height만 잘 정해주면 별문제 없이 동작하죠. 하지만 플렉스박스에서 크기를 정하고 싶을 때는 보다 정확하게 flex-basis를 사용하는 걸 추천드립니다.
flex 속성
flex-basis를 사용하면 좋은 점이 하나 있는데요. 바로 flex라는 속성으로 코드를 짧게 쓸 수 있다는 것입니다. 아래 세 코드는 모두 같은 역할을 하는 코드인데요. flex 속성은 순서대로 flex-grow, flex-shrink, flex-basis 값을 한 번에 쓸 수 있는 속성입니다. 코드가 훨씬 깔끔해지죠?- width 속성으로 시작 크기를 지정하기
flex-grow: 1; flex-shrink: 0; width: 100px; //////////////////////// flex-basis 속성으로 시작 크기를 지정하기 flex-grow: 1; flex-shrink: 0; flex-basis: 100px; //////////////////////// flex 속성으로 짧게 쓰기 flex: 1 0 100px;
- 트랙 숫자 영역은 폭을 24px로 한다.
- width 속성을 써도 되지만, 플렉스박스에서는 flex-basis를 쓰는 게 좋습니다.
flex-basis속성으로 플렉스박스에서 요소의 시작 크기를 지정할 수 있는데요. 24px로 하고 싶다면 flex-basis: 24px 이렇게 하면 됩니다.
- width 속성을 써도 되지만, 플렉스박스에서는 flex-basis를 쓰는 게 좋습니다.
.track-number {
flex-basis: 24px;
}- 트랙 제목 영역의 크기를 늘려서 플렉스박스에 꽉 채운다.
플렉스박스에서 요소의 크기를 늘려서 꽉 채우려면 flex-grow 속성을 사용합니다. - 트랙 제목 영역에 해당하는 .title에다가 flex-grow: 1이라고 해 줄게요. 기본적으로 flex-grow의 값은 0이기 때문에 이렇게 하면 제목 영역을 늘려서 꽉 찰 겁니다.
.track-title {
flex-grow: 1;
}- 아이콘들은 크기가 늘거나 줄어들지 않는다.
- 플렉스박스에서 요소의 크기를 늘리지 않으려면 flex-shrink 속성을 사용합니다. flex-shrink의 기본 값은 1인데요. 기본적으로 요소가 넘치면 크기를 줄여주기 때문입니다. 이 값을 0으로 하면 줄어들지 않습니다.
- 늘거나 줄어들지 않는다고 했으니까, flex-grow:0과 flex-shrink: 0을 추가해 주면 되겠죠? 그런데 flex-grow는 기본값이 0이기 때문에 굳이 쓰지 않아도 됩니다.
.track-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
}- 요소 늘려서 채우기:
flex-grow- 기본 값은 0입니다. flex-grow 값이 클수록 많이 늘어납니다.
- 요소 줄여서 채우기:
flex-shrink- 만약 요소들의 크기가 커서 넘치는 경우, 요소의 크기를 줄여서 플렉스박스 안에 가득 채웁니다. flex-shrink의 기본 값이 1이기 때문에 기본적으로 요소를 줄여서 배치하고, 0으로 지정하면 크기가 줄어들지 않습니다. 그리고 flex-shrink 값이 클수록 상대적으로 많이 줄어듭니다.
Grid란?
- 가로, 세로 두 방향, 2차원으로 배치할 수 있는 방법이
grid이다. - 요소를 왼쪽에서 오른쪽으로, 위쪽에서 아랫쪽으로 배치하는데, 바둑판처럼 배치할 수 있다.
- 이때 각 칸을 나누는 줄들을
그리드 라인(Grid Line)이라고 한다. - 요소를 배치할 수 있는 네모난 칸을
그리드 셀(Grid Cell)이라고 한다. - 그리드를 셀로 나누면 그리드 크기를 바꿀 수 있고, 그리드 크기도 바꿀수있고 사이에 간격도 줄수있다.
- 새롭게 생겨날 컬럼, 로우의 크기를 정할 수 있고, 한칸이 아니라 여러칸에 걸쳐 배치할 수도 있다.
- 배치할 요소에 이름을 붙여서 이름으로 배치가 가능하다.
grid 나누기
display: grid// 태그를 그리드를 만들기grid-template-columns(rows)// 컬럼을 나누는 건데 그 크기를 각각 어떻게 나누겠다는 것.- 근데 이거를 같이 적용하고 싶을때는
grid-template: 세로 세로 세로 / 가로 가로 가로-> 이렇게 슬래시로 구분해서 쓰면 한 줄로 가능하다. - 유연한 크기와 유용한 함수들
- 만약 그리드를 담고있는 컨테이너의 넓이가 비율로 지정되어서 바뀐다면?
- 이때는
grid-template를px로 지정한다면, 컨테이너를 넘어가거나 빈공간이 생긴다. - 그래서 px 단위가 아니라 비율을 나타내는 fr(fraction) 단위를 사용한다.
- 크기에서 최대 최소값을 정하려면??
- minmax(200px, 300px) 이라고 해주면 최소200px에서 최대 300px까지 유연하게 변한다.
- minmax 안에 fr을 쓸수 있지만 최솟값에는 쓰지 못한다.
- 만약 그리드를 너비가 똑같은 6개로 나눈다면?
- 1fr을 6번 쓰면 되지만, 함수를 사용하면 편하다.
repeat(6, 1fr)이라는 함수를 사용하면 편하다.
간격넣기
- flexbox와 마찬가지로 gap이라는 속성을 사용한다.
- 사용방법은 동일하다. 세로, 가로 순으로 적용된다.
크기 미리 정해두기
- 컬럼만 정해주고 나머지는 알아서 할 수 있나??
grid-temte-columns값 만 정해주고grid-auto-rows값을 정해주면 된다.- 여러 값을 주면서 값을 번갈아 가면서 사용할 수 도 있다. 활용방법이 다양하다.
원하는 위치에 원하는 크기 요소 배치하기
- 그리드에서는 그리드 라인을 기준으로 배치한다.
- 맨 왼쪽부터 1, 2, 3 / 위에서부터 1, 2, 3 이렇게 번호를 붙인다.
- 반대방향부터는 -1,-2,-3 순으로 한다. -> 이것은 셀의 번호가 아니라 그리드 라인의 번호이다.
grid-row:2, grid-column:3으로 하면 해당하는 그리드에 배치가 된다.grid-row: 3/5라고 하면 3번 로우 라인부터 5번 로우 라인까지 걸쳐서 배치가된다.grid-row:3/span2라고 하면 3번 로우 라인부터 2칸 차지한다.
그리드를 이름으로 배치하기
- 이름 붙일때는
grid-area라는 속성을 사용한다. - 해당하는 셀에 이름을
grid-area를 사용해서 붙이고
grid-template-areas:
"name name"
"name name"- 이런식으로 사용한다.
- 칸을 비워놓고 싶다면 .를 사용하면 된다.
- 같은 이름이 붙어 있으면 그리드 셀이 합쳐진다.
중고