Centering

Element를 centering하는 방법

Flex box를 이용할 때 | display: flex

justify-content, align-items를 이용해 아이템을 가운데로 정렬할 수 있다. 

body {
  /* 100vh가 아니면 centering 안됨 */
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

 

 

어떤 요소를 가운데로 정렬하고 싶을 때, 그 요소를 감싸고 있는 부모 태그를 flex box로 선언하면 쉽게 정렬이 가능하다.  위의 코드는 body의 자식 태그를 가운데로 정렬할 수 있게 만들어 준다. 

 

+) height을 100% 으로 설정하면 수직 가운데 정렬이 불가능하다. 100%는 body 태그의 부모 태그인 html 태그의 높이와 같고, 그 높이는 결국 자식 요소의 높이의 합으로 결정되기 때문이다(block level tag). 즉, 정렬을 해도 우리 눈에 가운데 정렬이 된 것처럼 보이지 않는다. 

 

Flex box를 이용하지 않을 때 

Block-Level Items | margin: 0 auto

블럭 레벨의 아이템이란, 한 줄에 하나의 아이템만 배치할 수 있는 요소들을 말한다. 오른쪽에 margin이 자동으로 설정되어 있기 때문에 한 줄에 하나의 아이템만 배치하는 것이 가능하다. 대표적으로 <div>가 있다. 

margin 속성의 값을 'auto'로 지정하면 오른쪽에 설정된 margin이 좌우에 고르게 분배되어, 아이템을 가운데로 정렬할 수 있다. 단, 상하를 기준으로 가운데 정렬하는 것은 불가능 하다. 

 

Inline-Level Items | text-align: center

Inline-level의 아이템, 즉 한 줄에 여러개를 배치할 수 있는 아이템에는 오른쪽에 자동으로 margin이 설정되지 않기 때문에, margin: auto를 이용한 가운데 정렬 방법을 사용할 수 없다. text-align은 block level 아이템의 content(text 뿐만 아니라 모든 content를 말함)를 좌우로 정렬할 수 있는 속성이다. 

 

The text-align CSS property sets the horizontal alignment(수평 정렬) of the content inside a block element or table-cell box.

 

line-height | ⚠ hacky

line-height은 inline box의 높이를 지정하는 속성 값으로, 주로 텍스트의 높이를 지정하는데 사용된다. 만약 이 값을 block box에 지정하면, block의 inline 자식 요소의 최소 높이를 지정할 수 있고, 이를 이용하면 상하 방향으로 가운데 정렬할 수 있다. 텍스트의 높이를 지정하는 원래의 의도와는 다르게 사용하기 때문에 hacky하다. 

 

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. 

 

position과 transform 이용하기

 

position과 transform 이용하기

 

이전, 다음 버튼을 그림의 높이의 정확한 중간 지점에 배치하고 싶을 때 다음과 같이 css 코드를 작성할 수 있다. 

 

.travel .image {
  position: relative;
}

.travel .prev,
.travel .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

 

translateY(-50%)는 자기 자신의, 위의 코드에서는 이전과 다음 버튼의,  높이의 절반 만큼을 브라우저 y축의 - 방향(윗방향)으로 이동시킨다. 

+) top: 50%는 자기 자신이 아니라, absolute position에 의해 image를 기준으로 한다. 

 

Background를 centering하는 방법+

background

요소의 background(배경)과 관련된 속성(color, image, position, size...)을 한 번에 정의할 수 있다. 이때 순서는 상관없지만, position과 size는 반드시 position/size의 형태로 작성해야 한다. 

 

.topbanner {
  background: url("starsolid.gif") #99f no-repeat center/cover;
}