Grid Items
개발자도구에서 레이아웃을 상세하게볼수있다.
3행3열로 잘 나눠진 모습을 볼 수있다.
매겨져있는 번호는 line이라고 함.
=> 라인은 양수, 음수 두 값을 가진다.
grid-row(column)-start(end)
명시적으로 몇번째 라인부터 시작, 끝내라고 정할 수 있다.
grid-row-start:2;
grid-row-end:4;
2번라인부터 행이 시작하여 4번라인에서 행이 끝나라고 정하였다.
span키워드를 사용하면, 몇개의 라인을 아이템의 시작부분부터 늘릴 것인지 명시적으로 정할 수 있다.
기본값은 1이다.
4번째 아이템은 자리가없어서 암시적 행으로 내려갔다.
이를위해 전시간에 배운grid-auto-flow:dense를 사용할 수 있다.
start,end를 같이 사용할 수 있는 단축속성이 있다.
gird-row(column): [start] / [end]
justify-self, algin-self
아이템을 셀 내부에서 개별적 정렬이 가능하다.
아래는 컨테이너에
justify-items:end;
align-items:end;를 입힌 모습인데, 첫번째 자식만 중앙으로 옮겨보았다.
또한 justify, algin-self : normal값도 역시 stretch와 똑같기때문에 셀 내부에서 너비,높이가 최대한 늘어난다.
order
flex처럼 숫자가 작으면 앞에, 크면 뒤로 밀려난다.
기본값은 0이다.
그리드의 쌓임 맥락
기본적으로 나중에 만들어진 요소가 맨 위에 쌓인다.
z-index로 인위적으로 결정 가능하다. position, flex와 동일하다.
Grid Functions
그리드에선 함수를 사용할수 있다. repeat도 좋은 예다.
repeat(2, 100px 200px);이런식으로 반복할수도 있다. 결과는100px 200px 100px 200px이다.
minmax
너비-높이의 최소-최대값을 명시할 수 있다.
minmax(최소너비, 최대너비)
grid-template-columns: minmax(100px,1fr) minmax(200px, 1fr);
브라우저를 축소시켜 너비를 강제로 줄여도 두번째 열은 200px를 고수한다.
암시적 행-열에도 마찬가지로 minmax를 사용할 수 있다.
암시적 행을 100px을 주었지만, 3번째 아이템의 높이가 200px이기때문에 넘친다. 이때grid-auto-rows에minmax를 사용해본다.
auto는 아이템의 너비(높이)만큼 늘어나게 해준다.
fit-content
내부 컨텐트의 최대너비를 지정한다.
옆으로 더 늘어나지않고, 300px에 맞추어 줄바꿈이 일어난 모습이다.
Units
그리드에서 자주 사용하는 단위들을 알아보겠다.
fr
fr은 사용 가능한 남은 공간에 대한 비율이다.
컨테이너의 너비가auto이기에 끝까지 늘어나려한다.
이 부분을 포함한 비율을fr로 정의한다.grid-template-columns: 100px 100px 1fr 2fr;
min-content, max-content
최소-최대너비(컨텐트의 최소-최대너비)를 가리킨다.
grid-template-columns: repeat(4, min-content)한글은 한 글자씩 줄바꿈 처리한다.
grid-template-columns: repeat(4, max-content)
한글도 적용하고싶다면 이렇게 하면된다. 한중일언어의 자동줄바꿈을 글자가 아닌 띄어쓰기별로 해준다.word-break: keep-all;
auto-fill, auto-fit
컨테이너의 너비에 맞춰주는 단위다.minmax를 사용할 시 아이템의 최소너비가 정해져서 컨테이너를 넘칠수 있다.
grid-template-columns: repeat(4, minmax(100px,1fr));
auto-fit을 사용하면 열의 갯수를 명시적으로 정하지 않고 유동적으로 바꿀 수 있다.grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
브라우저의크기를 늘렸다 줄여도 넘치지 않는다.
auto-fill은 지정할 수 있는 최소너비에 맞춰준다. 남는공간이 생길 수 있음.
Transform 3D
요소를 변화시키는 tranform.
transform-origin
transform-origin을 이용하여 변화 기준을 정할수도 있다.
transform: rotate(45deg);
추가로 아래와같이 기준을 정한다. (x축, y축)transform-origin:0% 0%;
perspective
원근효과를 줄수도있다. 단, 3차원에서만 적용된다.
transform: perspective(300px) rotateY(45deg);
y축기준으로 45도 전환을 300px뒤에서 지켜봤다.
아예perspective라는 속성을 선언해줄수도 있다.(컨테이너에)perspective:300px;또한, 원근의 기준점도 설정할 수 있다.
perspective-origin: 0 50%;
transform-style
3차원이 적용된 요소의 자식에 3차원속성을 줄수 없다.
transform-style을 선언하면 이를 가능케한다.
transform-style:preserve-3d;
주의해야 할 점은 자식요소만 적용되고, 후손요소는 적용이 안된다.
backface-visibility
요소의 뒷면을 transition중에 어떻게 보여줄지 결정한다.
숨길수도 있다.
Columns
다단(mutil column) 레이아웃! 뭔지 잘 모르겠다. 강의를 따라가며 보자.
이렇게 되어있는 문단을 나눌 수 있다.column-count: 2;
아하! 다단이 문단을 의미하는거구나!
너비도 정할수 있다.
column-width: 300px참고로 최소너비가
count보다 우선이다.
문단의 구분선도 사용할 수 있다.
column-rule: 4px dotted blue;
문단 간격도 설정할수 있다.
column-gap:40px
gap:40px;둘 다 동일한 기능이다.
Filter
Filter는 무슨 기능일까?
=> 요소에 흐림, 색상변경, 변형 등 다양한 기능을 제공한다.
예제로보자.
filter:blur(4px)
요소가 흐려지는구먼?filter: graysacle();
채도를 떨어뜨려준다. 퍼센테이지로 정할수도 있다.
음...전부 보면서 정리할 필요는 없어보인다.
필요할때 찾아서 사용하는게 좋아보인다!
느낀점
몰랐던 기능이 굉장히 많다. 특히 중요한 grid에 대해서 정말 무지했는데 많이 배워갔다. 다만 기능이 많은 만큼 전부 외워서 사용하는 일은 드물 것 같다. 따라서 내부 동작원리를 깨달아놓는게 중요하다. 그때그때 필요한 기능이 무엇인지 메타인지를 정확히 할 수 있으니까!
CSS는 어렵다고 생각했는데 아닌거 같다.
대신 뭐가 많구나...
