css. 정렬(align)과 float

정렬 (align)

 

텍스트나 태그를 왼쪽 / 가운데 / 오른쪽에 배치하는 작업.

- 보통 가운데 정렬이나 오른쪽 정렬 등 특수 형태를 많이 사용함.

 

부모 태그에 text-align을 사용하면? > 자식 태그들이 정렬된다.

#parent {
	text-align: center;
}

 

 

가로 정렬은 쉽지만, 

세로로 가운데 정렬을 하는 것이 어렵다.

 

보통은 vertical-align: middle 속성을 시도하지만,

vertical-align은 다른 태그를 기준으로 수직 정렬이 되는 것이라서옆에 다른 태그가 있어야만 그 태그에 맞춰서 세로 정렬이 된다.

 

@css
display: flex;
align-items: center;

가장 쉬운 방법은 flex를 이용하여 align-items를 center로 설정하는 것이다.

그러나, IE에서만 문제가 발생.

 

모든 브라우저에서 가능한 방법들은 다음과 같다.

 

 

1 / 헬퍼(helper) 사용

 

- vertical-align은 옆의 태그를 기준으로 정렬되므로

눈에 보이지 않는 헬퍼 태그를 하나 만들고, 헬퍼를 기준으로 다른 태그들이 정렬되도록 함.

(width가 0이고 height가 100%임.)

 

+) 인라인 블럭으로 지정해야 좌우정렬을 할 수 있다.

 

(cr : www.zerocho.com)

 

그러나 이 방법을 사용하면 서로간에 간격이 발생한다. (margin과 padding을 0으로 해도)

>> 이것은 inline-block의 문제점임.

 

 

2 / table cell 

테이블 효과를 주는 것.

 

부모 = display: table

자식 = display: table-cell

 

div를 테이블처럼 동작해서 쉽게 가운데 정렬을 할 수 있다.

하지만, table-cell(즉, 자식요소)들의 width와 height를 조절하기 어렵다.

 

 

3 / transform 속성

- 우선, position: relative 후에 top: 50%로 위에서 50%정도 아래로 내린다.

>> 여기까지 하면 해당 태그의 높이의 절반만큼 아래로 내려가있음. 

 

여기에 transform: translateY(-50%)를 해서

다시 child태그 본인의 높이의 절반만큼 다시 올려줌.

>> 위로 올리기 위해서 음수의 값 사용 (-50%)

 

#parent {
  background: yellow;
  height: 200px;
  width: 100%;
}

.child {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background: skyblue;
}

 

= 자기의 height의 50%만큼 내려온 상태를 다시 올리는 것.

 

이 방법에서도 마찬가지로 inline-block의 간격 문제가 발생한다.

 

---

 

 

float

- 정렬 방법 중 하나.

- float는 자칫하면 레이아웃을 망쳐버릴 수 있어 조심히 사용해야함.

- float를 주면 더이상 div의 width는 100%가 아니다.

 

부모요소의 height를 따로 설정하지 않는 이상,

부모 요소의 height = 자식 요소의 height들의 합
. (margin / border / padding 포함)

float를 하면 해당 블록의 타입이 전부 block으로 변한다.

inline	▶▶▶▶  block
inline-block
block

단, 블록이지만 한줄을 전부 차지하지는 않는다. (width = 100%가 아님)

 

>> float의 문제점

- block요소들은 float를 무시하지만,

- inline 요소들은 float를 알아채고 피해서 흘러가게 된다.

 

float는 이름 그대로 떠있다는 의미이므로

한 태그가 공중에 붕 떠버리면 그 뒤에 태그들이 자리를 메우려 이동한다.

 

>> 해결 방법

clear 속성을 이용.

단, display: block을 해줘야 한다.

 

clear

- display: block에서만 사용 가능.

- clear는 left / right / both 총 세 개의 값이 존재한다! (both는 left와 right 모두)

 

- html로 div를 설정한 후 clear: left 해주면 해결되지만, 아무런 의미도 없으므로 권장 X.

>> HTML은 건들이지 않고, CSS로만 해결하기 위해 가상 요소(Pseudo-Element)를 이용하자.

- Pseudo Element 에 clear: left를 적용시킴.

 

.parent::after {
	content: "";
	display: block;
	clear: left;
}

부모 요소의 마지막 자식으로 만듬. 

(parent::after)

 

❗❗ 가상요소 사용시 반드시 content 속성을 적어야함.

(아무것도 없으면 "" 라고 적음. 생략은 불가능함!)

 

 

 

---

 

Ref. 

 

float - CSS: Cascading Style Sheets | MDN

Aligning Items in a Flex Container - CSS: Cascading Style Sheets | MDN

(CSS) CSS 정렬과 Float - 세로 가운데 정렬, inline-block 간격 문제

 

 

 

+) flex에 대한 내용과

align 시리즈는 추후 포스팅에서 다룰 예정임.

 

align-items : flex line을 기준으로 아이템정렬 (한줄 기준 정렬)

align-content : flex line정렬 (두줄 이상)

align-self: 부모 / 자식아이템을 다른 방식으로 정렬하고 싶을 때 (개별로 정렬 설정시)

 

text-align: 텍스트 정렬

vertical-align: 옆에 요소 기준 수직정렬