▲

GN⁺: CSS에서 div를 중앙 정렬하는 방법

 (joshwcomeau.com)
5P by neo 9달전 | favorite | 댓글 3개

요소 중앙 정렬 방법

  • 요소를 부모 요소 내에서 중앙에 배치하는 것은 오랫동안 까다로운 문제였음.
  • CSS가 발전하면서 다양한 해결책이 제공되었으며, 현재는 선택의 폭이 넓어짐.
  • 이 튜토리얼은 다양한 접근 방식 간의 트레이드오프를 이해하고, 모든 시나리오에서 중앙 정렬을 처리할 수 있는 전략을 제공함.

자동 마진을 이용한 중앙 정렬

  • 가로 방향으로 요소를 중앙에 배치하고자 할 때, auto 값을 가진 마진을 사용할 수 있음.
  • 요소의 너비를 제한해야 하며, fit-content는 요소가 내용물에 맞게 크기를 조정함.
  • margin-inline 속성을 사용하면 margin-left와 margin-right를 동시에 auto로 설정할 수 있음.

Flexbox를 이용한 중앙 정렬

  • Flexbox는 주 축을 따라 아이템 그룹을 배분하는 데 많은 제어를 제공함.
  • 단일 요소를 수평 및 수직으로 중앙에 배치할 수 있으며, 자식 요소가 컨테이너에 맞지 않을 때에도 중앙 정렬이 유지됨.
  • flex-direction 속성을 사용하여 여러 자식 요소의 스택 방향을 제어할 수 있음.

뷰포트 내에서 중앙 정렬

  • 요소를 부모 컨테이너가 아닌 뷰포트 내에서 중앙에 배치해야 하는 경우가 있음.
  • position: fixed와 inset: 0px를 사용하여 요소를 뷰포트에 고정하고, margin: auto를 사용하여 수평 및 수직으로 중앙에 배치할 수 있음.

알 수 없는 크기의 요소 중앙 정렬

  • 요소의 크기를 명시적으로 알 수 없을 때, fit-content를 사용하여 내용물에 맞게 요소를 축소할 수 있음.

CSS Grid를 이용한 중앙 정렬

  • CSS Grid를 사용하여 수평 및 수직으로 요소를 중앙에 배치하는 가장 간결한 방법은 place-content: center 속성을 사용하는 것임.

Flexbox와의 차이점

  • CSS Grid는 다른 레이아웃 알고리즘을 사용하며, 때때로 추가 복잡성이 문제가 될 수 있음.
  • Flexbox는 부모 요소를 기준으로 백분율을 계산하는 반면, CSS Grid는 그리드 셀을 기준으로 계산함.

요소 스택 중앙 정렬

  • CSS Grid를 사용하여 여러 요소를 동일한 셀에 할당할 수 있으며, 이는 요소들이 뒤에서 앞으로 쌓이게 함.

텍스트 중앙 정렬

  • 텍스트는 CSS에서 특별한 취급을 받으며, text-align 속성을 사용하여 텍스트를 중앙에 배치할 수 있음.

미래의 중앙 정렬

  • align-content 속성이 Flow 레이아웃에서도 구현되고 있으며, 이는 블록 방향의 콘텐츠 정렬을 제어함.

패턴을 넘어서

  • CSS를 깊이 이해하면, 기억에 의존하는 대신 직관을 사용하여 문제를 해결할 수 있음.

어떤 방법을 사용할지 결정하기

  • 단일 요소를 수평으로 중앙에 배치하고 싶을 때는 Flow 레이아웃의 자동 마진 전략을 사용할 수 있음.
  • 모달이나 배너와 같은 부유하는 UI를 중앙에 배치하려면, Positioned 레이아웃과 자동 마진을 사용할 수 있음.
  • 요소 스택을 중앙에 배치하려면 CSS Grid를 사용할 수 있음.
  • 텍스트를 중앙에 배치하려면 text-align을 사용할 수 있으며, 이는 다른 방법과 함께 사용될 수 있음.
  • 대부분의 다른 상황에서는 Flexbox를 사용할 수 있음. 이는 가장 다재다능한 방법으로, 하나 또는 여러 자식을 수평/수직으로 중앙에 배치할 수 있음.

GN⁺의 의견

  • 이 글에서 가장 중요한 것은 다양한 CSS 중앙 정렬 방법에 대한 이해를 돕는 것임.
  • CSS의 발전으로 인해 이전에는 복잡했던 중앙 정렬 작업이 훨씬 간단해졌으며, 이는 웹 개발자들에게 큰 도움이 됨.
  • Flexbox와 CSS Grid와 같은 현대적인 CSS 기술을 이해하고 활용하는 것은 웹 디자인과 레이아웃에 있어서 필수적인 기술이 되었음.
▲
v08zbv8fvlkjasdflkj 9달전  [-]

그러고보니 GeekNews도 아티클이 중앙정렬안된게 갑자기 거슬리네요 ㅠ ㅋㅋ

답변달기
▲
joyfui 9달전  [-]

place-items: center; 애용 중인데 여러 방법이 더 있군요.

답변달기
▲
neo 9달전  [-]
Hacker News 의견

  • 첫 번째 댓글 요약:

    • CSS로 요소를 중앙에 배치하는 것이 어려운 이유에 대한 다양한 의견이 있음.
    • 대부분의 사람들이 중앙 배치가 어려운 이유를 물을 때, 단순히 한 요소를 다른 요소의 정중앙에 배치하는 방법을 묻는 것임.
    • 과거 HTML에서는 <table> 태그를 사용하여 쉽게 중앙 배치를 할 수 있었으나, CSS에서는 이것이 어렵게 느껴짐.
    • CSS가 더 나은 도구라고 하면서도 기본적인 중앙 배치조차 쉽게 할 수 없었던 점이 실망스러움.
    • 이러한 이유로 오랫동안 테이블 레이아웃을 사용함.
    • 그럼에도 불구하고 CSS를 좋아함.

  • 두 번째 댓글 요약:

    • 자동 페이지 레이아웃과 포맷팅의 복잡성을 이해하지 못하는 사람들이 많음.
    • 이 복잡성을 단순한 '내가 원하는 대로 해줘' 식으로 추상화하는 것은 불가능함.
    • 웹사이트의 예시로 Gwern Branwen의 사이트를 들며, 원하는 스타일에 맞춰 콘텐츠를 제한하는 것이 중요함.
    • 웹 페이지 레이아웃은 다양한 디스플레이에 맞게 콘텐츠를 표현하는 복잡한 과정임.
    • CSS는 처음부터 웹 페이지를 만들기로 결심한 사람들에게 복잡해 보일 수 있지만, 실제로는 선택의 폭이 넓음.
    • 원하는 결과를 얻기 위해 적절한 도구를 찾고, 콘텐츠를 적절한 형태로 포장하는 과정이 필요함.

  • 세 번째 댓글 요약:

    • CSS 포지셔닝과 중앙 배치를 이해하는 데 박스 모델에 대한 이해가 도움이 됨.
    • display와 position 속성이 포지셔닝을 배우는 데 기초적임.
    • MDN에 이에 대한 유용한 기사가 있음.

  • 네 번째 댓글 요약:

    • 기사가 매우 좋고, 특히 상호작용적인 부분이 인상적임.
    • CSS에서 중앙 배치를 쉽게 하는 방법을 제공하는 웹사이트를 오랫동안 사용해옴.

  • 다섯 번째 댓글 요약:

    • CSS에서 '중앙 배치'는 고전적인 문제임.
    • CSS가 명확하지 않은 것은 여러 위원회가 동시에 설계한 복잡한 집합체이기 때문임.
    • CSS는 지속적인 변화 속에 개별 모듈의 상태로 존재함.
    • 이는 소프트웨어 개발의 바람직한 방법이 아님.

  • 여섯 번째 댓글 요약:

    • CSS가 수십 년이 지나도록 테이블을 중앙에 배치하는 것만큼 효과적인 방법을 제시하지 못함.
    • 그 기간 동안 레이아웃 목적으로 테이블 사용이 부끄러운 것으로 여겨짐.

  • 일곱 번째 댓글 요약:

    • 많은 사람들이 CSS에 대해 불만을 가지고 있음.
    • 스타일 지시사항이 서로 충돌하거나, 아무런 효과 없이 실패하는 것이 주요 문제임.

  • 여덟 번째 댓글 요약:

    • 기사에서 언급한 바와 같이, Flexbox는 간단한 경우 중앙 배치 문제를 해결함.
    • Flexbox로 해결되지 않는 경우는 단순한 중앙 배치 이상의 복잡한 작업을 수행하고 있기 때문임.

  • 아홉 번째 댓글 요약:

    • position: absolute, left: 50%, transform: translateX(-50%)를 사용하는 것이 중앙 배치에 대한 자신의 주요 방법임.

  • 열 번째 댓글 요약:

    • CSS에서 div를 중앙에 배치하는 것이 매우 어렵기 때문에 웹 개발을 포기한 이유임.
답변달기