CSS2 [CSS] Grid과 CSS Unit Grid Flex는 1차원(한 방향)의 레이아웃 시스템을 제공하지만 Grid는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. Flex와 동일하게 Container, item이 필요합니다. - 부모요소 : Grid Container - 자식요소 : Grid item .container { display: grid; } Grid 용어 정리 그리드 트랙 (Grid Track) 2개의 그리드 라인 사이 공간을 말합니다. 이 공간은 수평/수직 방향 모두를 말합니다. 그리드 셀 (Grid Cell) Grid를 구성하는 단일 유닛(single unit)을 말합니다. 그리드 라인(Grid Line) Grid를 행(rows)/열(columns)로 나누는 수평, 수직 선을 말합니다. 그리드 번호(Grid Number).. 2022. 11. 15. [CSS] display와 float, Felx display 요소가 화면에 어떻게 보여질지 특성을 지정합니다. .container { display: ; } Value 1. none : 보여지지 않는다. 요소는 존재하지만 화면에서는 사라진다. 2. inline : 글자요소 3. block : 상자 (레이아웃) 요소 4. inline-blokc : 글자 + 상자 요소 5. flex box : 1차원 레이아웃(x축, y축) 6. grid : 2차원 (x축, y축) 행과 열을 동시에 사용 float 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성 float: value; value inherit: 부모 요소에서 상속 left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. rig.. 2022. 9. 15. 이전 1 다음
