CategoryFR (2)

[CSS] 5. fr 단위 대하여

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천해 드립니다.fr?fr이란 유연한 크기를 갖는 단위입니다. 그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타냅니다.사용자가 계산해야 할 부분을 fr을 통해서 쉽고 유연하게 사용할 수 있습니다..grid { display: grid; grid-template-columns: auto 100px 1fr 2fr;}1번 열은 auto를 사용한다. 해당 Element 내부 콘텐츠에 맞게 사이즈가 조정된다.2번 열은 100px을 할당한다. 100픽셀 크기만큼의 폭을 차지한다.3번 열은 1fr 크기를 할당한다. 1fr이란 남은 자유 공간의 1/3(총fr)만큼의 크기를 할당한다.4번 열은 2fr 크기를 할당한다. 2fr이란 남은 ..

[CSS] 3. fr 단위를 이용하여 grid 나누기

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다. fr 단위를 이용하여 grid 나누기이번 코드에서 중요 포인트는 fr단위입니다.보기아래 css를 보시죠.container { display: grid; height: 100vh; grid-template-columns: 1fr 4fr 1fr; grid-gap: 10px 100px; margin: 10px;} .grid-item { background-color: rgb(74, 173, 228);}grid-template-columns를 보시면 1fr + 4fr + 1fr => 총 6개의 fragment로 나눕니다.데모를 보시면 바로 이해가 가실겁니다.하지만 특이한 점이 있는데 grid-gap이 위에서 나눈 fragmen..