728x90 배움 기록/CSS2 [CSS] grid 속성들 정리 📌 flex vs grid ? 아이템을 자유자재로 배치할 수 있는 CSS Layout 에는 flex 와 grid 가 있다. flex : 아이템을 1차원적으로 배치할 수 있음 (가로 or 세로) grid : 아이템을 2차원적으로 배치할 수 있음 (가로 and 세로) 📌 grid 사용법 1. 부모 컨테이너에 display: grid 를 지정한다. 2. grid 안에 들어 있는 자식들은 각각 grid cell 로 변환된다. 📌 grid 속성들 정리 부모 속성들 ► grid-template-columns : 컨테이너 열(column)의 크기 지정 ► grid-template-rows : 컨테이너 행(row)의 크기 지정 ► grid-auto-rows : 컨테이너 행(row)이 몇 줄인지 모를 때, 전체적으로 자.. 2023. 9. 3. [CSS] flex 속성들 정리 (flex-basis, flex-grow, flex-shrink) flex-basis, flex-grow, flex-shrink에 대해서 정리해보겠습니다☺️ 📌 flex-basis ? flex-basis는 Flex 아이템의 기본 크기를 설정함 flex-direction이 row일 때는 width를 설정하고, column일 때는 height를 설정함 .container { display: flex; } .item1 { flex-basis: auto; /* 기본값 */ } → flex-basis의 기본값은 auto로 width를 따로 설정하지 않으면, 컨텐츠가 차지하는 width와 같은 값이 되고 width를 설정하면, 설정값과 동일한 값이 된다. → 만약 아이템에 (width를 적용하지 않고) flex-basis: 100px를 적용했을 때 아이템이 100px보다 작다면,.. 2023. 1. 15. 이전 1 다음 728x90
