CSS 정렬

(2022-04-12)

vertical-align, 중앙 정렬 , 수직 정렬 , 수평 정렬


1. CSS 박스 모델 내부의 정렬

  ㅇ 내부 텍스트의 수평,수직 정렬
     - 박스 내부 수평(좌우) 정렬 : { text-align : 값; }
        . text-align : left, right, center, justify
     - 박스 내부 수직(상하) 정렬 : (기존에는 명확하게 규정된 해당 속성이 없었음)
        . 비록, 기존에 해당 속성은 없으나,
        . 박스 높이(height)와 라인 높이(line-height)를 같게 지정하면 됨
        . 例) 박스 { height:80px; }, 박스내 라인 { line-height:80px; } 

  ㅇ 내부 요소들의 수평 중앙 정렬 (auto : 여러 요소들을 보기좋게 수평 중앙 배치시킴)
     - 부모 박스 요소에, 폭(width)를 주고, 마진(margin)을 0 auto로 주면 됨
        . 例) 부모 박스 { width:100px; margin:0 auto; }

  ㅇ 내부 요소의 전체 중앙 정렬 (상하좌우 중앙 정렬)
     - 부모 요소에 position : relative 를 줌
     - 해당 내부 요소의 중앙점 위치 지정
        . position : absolute 을 지정하고,
        . left,right 속성에 50%를 지정
     - 해당 내부 요소의 중앙점 위치로부터 폭,높이의 반 만큼 좌상으로 끌어당김
        . margin-left,margin-top 속성에, 음수로써, 폭,높이의 반 만큼 지정
        . 또는, translateX(-50%),translateY(-50%)으로, 해당 내부 요소의 절반 크기 만큼 옮김 

  ㅇ 내부 요소들의 수평 측면 정렬 (좌측 정렬,우측 정렬)
     - 부모 요소에게는, overflow : hidden 또는 overflow : auto 속성값을 줌
     - 자손 요소에게는,
        . (좌측정렬) float : left 속성값을 줌
        . (우측정렬) float : right 속성값을 줌

  ※ [주의]  float를 갖는 자식 요소가 있을 경우, 부모 요소는 자식 요소를 인식하지 못함
     - 따라서, 부모 요소에게 overflow:auto 또는 overflow:hidden 을 주어야,
     - 부모 요소가 float를 갖는 자식 요소를 제대로 인식 가능 함


2. 동일 라인 내 요소들의 수직 정렬(상하 정렬) : vertical-align

  ㅇ vertical-align 속성 값
     - baseline, sub, super, text-top, text-bottom, middle, top, bottom

  ㅇ 적용 대상 : 인라인 요소인라인 블록 요소에 만 적용 

  ㅇ 적용상의 특징
     - 해당 요소 자체에 만 적용하고, 그 내용(자식 요소)은 아님
        . (단, 테이블 셀은 제외)
     - 다른 인라인 요소들에 비교하여, 적절히 상대적으로 정렬됨
        . (즉, 동일 라인에 이미 알고있는/기준인 다른 요소 없으면, 원하는 정렬이 어려움)


3. 이미지 정렬인라인 요소이미지 기준 정렬
     - 이미지 기본 위치     : 기본적으로 텍스트 하단 기준선에 맞춰 정렬됨
     - 텍스트 기준 상하정렬 
        . img 태그 align 속성에 top,middle,bottom 속성값으로 상하 기준 정렬
        . CSS 속성 vertical-align: text-top/text-middle/text-bottom 로써 상하 기준 정렬

  ㅇ 부모 블록 요소이미지 중앙 정렬 
     - img 요소의 부모 요소에 text-align 속성을 추가
     - img 요소를 display: block 속성값에 의해 block 요소로 만들고,
     - margin: 0px auto 속성값에 의해 중앙 정렬

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


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