프로그래밍 언어/CSS3 flex layout 📖 flex layout한 방향 레이아웃 시스템(1차원) 1. 컨테이너에 Display: flex; 를 설정하는 것으로 시작속성명속성값설명displayinline block inline-block flex * display는 상위 개념 / flex-direction은 하위 개념 ex) display: flex; 로 전체 구성을 flex 선언했지만, 일부는 세로 정렬(flex-direction: column;)하고 싶을 때 2. flex 컨데이너에 적용하는 속성; 전체 아이템에 적용됨속성명속성명 한꺼번에 지정속성값설명flex-direction(배치 방향)flex-flow(방향 · 줄넘김동시 선언)rowrow-reversecolumncolumn-reverse flex-wrap(줄넘김 처리)no-w.. 2024. 5. 21. grid [grid : 두 방향(가로, 세로) 레이아웃 시스템(2차원)] * 용어정리 - grid container : grid의 전체영역 - grid item : grid 컨테이너의 자식요소들(grid 컨테이너의 셀을 채우는 내용물) - grid track : grid의 행(row) or 열(column) - grid cell : grid의 한 칸을 의미. grid item 하나가 들어가는 가상의 칸 - grid line : grid cell을 구분하는 선 - grid number : grid line의 각 번호 - grid gap : grid cell 사이 간격 - grid area : grid line으로 둘러싸인 사각형 영역. grid cell의 집합 * display: grid; => 컨테이너에 disp.. 2024. 5. 7. flex [flex : 한 방향 레이아웃 시스템(1차원)] * display: inline, block, inline-block, flex; -> display는 상위개념 / flex-direction는 하위개념 ( display: flex; 로 전체 구성을 flex 선언했지만 일부는 세로정렬(column)하고싶을 때~) => 컨테이너에 display: flex; 를 설정하는 것으로 시작함 =======flex 컨테이너에 적용하는 속성들; 전체 아이템에 적용======= 1) flex-direction (배치방향) : row, row-reverse, column, column-reverse; 2) flex-wrap (줄넘김 처리) : nowrap, wrap, wrap-reverse; 3) flex-flow (f.. 2024. 5. 7. 이전 1 다음