css레이아웃2 CSS | 6-2. 레이아웃 Grid Grid Flex와 가장 큰 차이점은 2차원 레이아웃 시스템이라는 점입니다. 기본구조 1. 컨테이너 - 그리드 전체 영역 2. 아이템 - 아이템들이 grid 규칙에 의해 배치 3. 트랙 - grid의 행과 열 4. 셀 - grid 한 칸 5. 라인 - 셀을 구분하는 선 6. 번호 - grid 라인의 각 번호 7. 갭 - 셀 사이의 간격 8. 영역 (Area) - grid 라인으로 둘러싸인 사각형 영역 컨테이너 컨테이너에 적용하는 속성 .container { display: grid; } 1. dispaly : gird | inline-grid 그리드의 시작 2. grid-template-rows, grid-template-columns: - 명시적 행과 열의 배치와 크기, 라인 이름도 정의 가능 repe.. 2021. 1. 25. CSS | 6-1. 레이아웃 Flex Flex 1. table (전설 속에 존재) 2. float, inline-block 3. Flex 4. Grid 레이아웃 태그는 위와 같이 발전해 왔습니다. 언젠가는 float, inline-block도 전설 속의 태그가 될 수도 있어요. 그렇다고 Grid만 쓰기에는 Flex만 가능한 기능들이 있기 때문에 우리는 Flex와 Grid를 둘 다 배워야만 합니다. 기본구조 item1 item2 item3 기본구조는 컨테이너 안에 아이템들이 배치되어 있는 구조입니다. 이어서 컨테이너와 아이템에 적용하는 속성들을 알아볼게요. 컨테이너 컨테이너에 적용하는 속성 .container { display: flex; /* display: inline-flex; */ } 메인축 : 아이템이 배치된 방향의 축 교차축 : 메.. 2021. 1. 24. 이전 1 다음
