[CSS] 요소를 분석하여 정렬하기

테크야끼·2021년 5월 29일

CSS align

CSS

목록 보기

8/9

퍼블리싱의 기본은 정렬
아직도 느낌만으로 정렬을 하거나 수 틀리면 플렉스 박스로 만들어버리고 있나요?
이제는 요소를 분석하여 정렬되는 원리와 구조를 이해해봅시다.

1. 수평 정렬(Horizontal Align)

1.1 inline/inline-block 요소

요소의 부모 요소에 text-align: center;를 지정한다.

.container {
  text-align: center;
}

1.2 block 요소

요소에 너비를 명시적으로 지정하고 { margin : 0 auto }를 지정한다.
정렬 대상 요소에 너비를 명시적으로 지정하지 않으면 너비는 full width가 되므로 중앙 정렬이 필요없다.

.item {
  width: 200px;
  margin: 0 auto;
}

1.3 복수의 block 요소

복수의 block 요소는 기본적으로 수직 정렬되므로 수평정렬하기 위해서는 정렬 대상 block 요소를 inline-block 요소로 변경한 후 부모 요소에 text-align: center;를 지정한다.

정렬 대상 요소에 width를 지정하지 않으면 콘텐츠에 너비에 맞추어 너비가 결정되므로 명시적으로 너비를 지정한다.

.container {
  text-align: center;
}
.item {
  width: 150px;
  display: inline-block;
}

2. 수직 정렬(Vertical Align)

2.1 inline/inline-block 요소

정렬 대상의 부모 요소에 padding-top과 padding-bottom 프로퍼티값을 동일하게 적용한다.

.container {
  padding: 50px;
}

패딩을 사용할 수 없는 경우 height와 line-height 프로퍼티값을 동일하게 적용한다.
단 이 방법은 행간이 지나치게 넓어지거나 Click Dead Zone 이슈가 발생하는 등 여러 줄의 텍스트에는 사용할 수 없다.

.container {
  padding: 50px;
}
.item {
line-height: 50px
}

2.1.2 Multiple lines

여러 줄의 텍스트의 경우, padding-top과 padding-bottom 프로퍼티값을 동일하게 적용하는 방법도 가능하다.

또 다른 방법으로 vertical-align 프로퍼티를 사용한 방법도 가능하다. 이 방법은 table 속성을 사용하여야 한다.

.parent {
  display: table;
  height: 100px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

2.2 block 요소

부모 요소를 기준으로 절대 위치를 지정하여 50%으로 이동한 뒤 margin으로 요소의 높이(100px)의 반 만큼 위로 밀어낸다.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

2.2.2 요소의 높이가 불확정 상태의 경우

부모 요소를 기준으로 절대 위치를 지정한다. transformY로 요소의 높이(100px)의 반 만큼 이동한다.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3. 수평/수직 정렬(Horizontal & Vertical Align)

요소의 너비와 높이가 고정되어 있는 경우, 요소의 너비와 높이가 불확정 상태의 경우 모두 사용 가능한 방법이다

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  /*요소의 높이 , 너비의 반(50%)만큼 위/왼쪽으로 이동*/
  transform: translate(-50%, -50%);
}

번외편

float

float을 사용하면 block 요소 안에 들어 있는 텍스트나 컨텐츠의 크기만큼 늘어났던 높이 값이 사라지는 (height:0) 현상이 일어난다. 다른 말로 하면 영역 사라지는 현상이 나타난다.

이를 해결하기 위한 5가지 방법이 있다.

깨지는 영역에 모두 float을 준다.
모든 박스에 float을 넣어주어야 해서 잘 사용하지 않는다.

깨지는 영역에 clear:both를 넣어준다.

태그를 만들어 클래스에 clear: both; height: 0; overflow: hidden;을 적용해, 높이가 0인 보이지 않는 태그를 만들어 clear: both float를 해제하는 방법이다. 그러나 의미없는 태그를 만들어 사용하는 것이므로 추천하지 않는다.
위치 자체는 잡을 수 있으나 다음 컨텐츠로 하여금 margin을 줘도 영역이 없다고 판단하는 현상이 발생한다. 레이아웃이 복잡할 때에는 어디가 깨지는 지 알 수 없어 사용이 힘들기도 하다.

부모요소에 display:inline-block을 준다.

박스의 성질 자체를 바꾸어야 한다. 박스가 block과 다르게 넓이가 꽉차지 않거나, IE7에서의 inline-block의 모습이 상위 버전과 다르게 나오는 등, 이를 해결하기 위한 방법(깊어지는 태그 단계 등)을 감수해야 한다.

부모요소에 overflow:hidden을 사용한다.

많이 사용하는 방법이다. 하지만 내가 지정한 영역 외에는 보이지 않기 때문에 못쓰는 경우도 있다.

부모 태그에 clearfix라는 css를 만들어 사용한다.

하위버전이나 크로스브라우징에 특별히 문제점이 발견되지 않은 제일 많이 사용하는 방법. css를 만들어준 후 부모 태그 안에 class로 clearfix를 박아주어야 하는 번거로움은 있다.

/* clearfix */
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display:block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}

flexbox

flexbox를 이용해 main axis와 cross axis를 기준으로 정렬하면 반응형에 대응하는 정렬을 쉽게 만들 수 있지만, 비교적 새로운 개념인 만큼 IE9 이하 브라우저에서 적용되지 않는 크로스브라우징 문제를 겪을 수 있다.

Can I use에서 flex에 대응하는 브라우저를 검색하면 결과는 위와 같다.
결과적으로 IE에도 Flexbox를 지원한다. IE10에서는 일부 스펙만 지원하고 IE11에서는 대부분 지원한다. 그러나 Notes를 보다싶이 많은 버그이슈가 보고되고있으므로 flex를 사용할 때는 크로스 브라우징을 항상 고려하자!

[참고]
https://css-tricks.com/centering-css-complete-guide/
https://caniuse.com/?search=flex