300x250 1분코딩2 [CSS] Flex 아이템에 적용하는 속성들(1) Flex 아이템에 적용하는 속성들 flex - basis - 유연한 박스의 기본 영역 flex-basis는 Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이). .item { flex-basis: auto; /* 기본값 */ /* flex-basis: 0; */ /* flex-basis: 50%; */ /* flex-basis: 300px; */ /* flex-basis: 10rem; */ /* flex-basis: content; */ } flex-grow 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다. -여백의 비율이다... 2021. 8. 3. [CSS] grid 개념정리(1) grid란? css는 레이아웃과 스타일을 정의할 때 사용되는 언어입니다. 그 중 grid(그리드) 레이아웃의 끝판 왕이라고 할 수 있다. Flex는 한 방향 레이아웃 시스템이고 (1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) Grid 용어정리 그리드 컨테이너 (Grid Container) => display: grid를 적용하는, Grid의 전체 영역 그리드 아이템 (Grid Item) => Grid 컨테이너의 자식 요소 그리드 트랙 (Grid Track) => Grid의 행(Row) 또는 열(Column) 그리드 셀 (Grid Cell) => Grid의 한 칸을 가리키는 말 그리드 라인(Grid Line) => Grid 셀을 구분하는 선 그리드 번호(Grid Number) => G.. 2021. 7. 27. 이전 1 다음 반응형
