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를 갖는 자식 요소가 있을 경우
- 부모 요소는 float된 자식 요소를 인식하지 못함
- 따라서, 부모 요소에게 overflow:auto 또는 overflow:hidden 을 주어야,
- 부모 요소가 float를 갖는 자식 요소를 제대로 인식 가능 함
2. 동일 라인 내 요소들의 수직 정렬(상하 정렬) : vertical-align
ㅇ 적용 대상
- 인라인 요소(텍스트 또는 이미지 등), 테이블 셀(display:table-cell)에서,
수직 정렬을 제어하는 속성
ㅇ 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 속성값에 의해 중앙 정렬