CSS 레이아웃

(2023-06-14)

1. 레이아웃 (Layout) 이란?웹페이지 내 구성 요소들의 공간적 위치를, 효율적/효과적으로 배열시키는, 자리 배치


2. [CSS 레이아웃]  CSS에 의한, 요소 모양, 배치 및 레이아웃 관련 속성

  ㅇ 기본 유형 제어  :  display     ☞ display 참조
     - 주로, `요소 모양` 및 `레이아웃`의 지정/조정을 위함
     - 기본 유형 종류 : { display : (block, inline, inline-block, none, table, flex, grid 등) }

  ㅇ 기존 레이아웃 방법  :  (아래 여러 기능들을 조합시켜, 복잡하게 구현함)
     * (즉, 레이아웃 전용의 CSS가 없어, float, position 등을 사용하여, 꽤 복잡하게 구현하게 됨)
     - 요소(박스)의 위치 지정  :  position, left/right/top/bottom     ☞ 요소 위치 지정 참조
     - 요소(박스)의 유동 배치  :  float     ☞ 요소 부유화(float) 참조
     - 요소(박스)의 수직 제어  :  z-index
     - 요소(박스)의 보이기/숨김 제어  :  visibility
     - 요소(박스)의 크기 조정  :  box-sizingCSS 박스 모델 참조
     - 요소(박스)의 넘침 제어  :  overflowCSS 박스 모델 참조
     - 요소(박스)의 정렬       :  ☞ CSS 정렬 참조
        . (CSS 박스 모델 내 요소들의 수평 정렬, 수직 정렬, 중앙 정렬, 이미지 정렬)

  ㅇ 신규 레이아웃 방법  :  (꽤 단순하게 구현 가능)
     * (아래와 같이, 레이아웃 전용의 CSS 제공)
     - 멀티 컬럼 레이아웃  :  column-count, column-width
        . 긴 텍스트의 다단 컬럼 나누기를 위함

     - 1차원 레이아웃  :  (display : flex)     ☞ Flexbox 참조
        . 박스들을 유연하게, 행 또는 열 형태로써, 무리짓게 하여 배치

     - 2차원 레이아웃  :  (display : grid)
        . 수평 줄과 수직 열을, 격자 처럼 구분하며, 동시에 제어 가능
           .. grid-template-columns
           .. grid-column-start, grid-column-end, grid-row-start, grid-row-end
           .. grid-gap, column-gap, row-gap
           .. grid-area

레이아웃,정렬
   1. CSS 레이아웃   2. 요소 display 유형 (display, visibility)   3. 요소 부유화 (float)   4. 요소 정렬   5. 플렉스 박스 (flex)   6. 요소 위치 지정 (position)  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"