퀵 링크
+ Flexbox를 사용하여 Div 요소 중앙에 배치하기
⭐ CSS 포지셔닝을 사용하여 Div 요소 중앙에 배치
주요 내용
웹사이트 레이아웃 내에서 요소를 중앙에 배치하는 것은 역사적으로 어려운 일이었습니다, 하지만 최신 CSS는 이 목표를 달성하기 위한 원활한 수단을 제공합니다.
중앙 집중식 위치 지정에 선호되는 기술로 부상한 Flexbox는 콘텐츠를 원활하게 정렬할 수 있는 다용도 및 적응형 레이아웃 프레임워크를 제공합니다.
CSS 그리드 및 포지셔닝 기술을 활용하면 웹페이지 디자인 내에서 요소의 배열과 정렬을 매우 정밀하게 제어할 수 있습니다.
웹 레이아웃 내에서 요소의 중앙에 배치하는 것은 일관되게 간단하지 않았기 때문에 지금까지 디자이너에게 골칫거리였습니다. 하지만 수많은 디자인 체계에서 요소는 중앙에 위치해야 합니다. 다행히도 최신 CSS는 이러한 목적을 위한 강력한 지원을 제공합니다.
플렉스박스, CSS 그리드 또는 CSS 포지셔닝 기법을 활용하여 div를 가로 및 세로로 중앙에 배치하는 기술을 익힙니다.
중앙 배치 연습을 위한 간단한 HTML 파일
중앙 배치 기능을 시연하기 위해 CSS를 활용한 일련의 최소한의 HTML 문서가 아래에 제공됩니다. 각 섹션에 따라 CSS를 변경하여 다양한 속성의 동작을 관찰할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
Flexbox를 사용하여 div 요소 중앙 배치하기
div 요소 중앙 배치에 Flexbox를 효과적으로 활용하려면 기본 원리를 이해하는 것이 중요합니다. 좋은 소식은 Flexbox가 간단한 방법론을 고수한다는 점이며, 이것이 광범위한 인기에 기여했다는 것입니다. 이 다용도 레이아웃 시스템은 컨테이너 내의 내용물을 손쉽게 정렬하고 공간을 분배할 수 있으므로 요소를 중앙 집중화하는 데 적합한 솔루션입니다.
플렉스 박스를 사용하여 요소를 중앙에 배치하려면 CSS에 다음 코드를 적용하세요:
HTML 디자인에서 플렉스박스 레이아웃을 효과적으로 활용하려면 div 요소를 컨테이너 안에 둘러싸고 컨테이너에 display:flex 속성을 적용하세요. 간단한 방법은 본문 태그를 요소의 컨테이너로 사용하는 것입니다:
CSS의 justify-content 및 align-items 속성은 각각 가로 및 세로 정렬에 사용됩니다. 이 속성을 ‘가운데’로 설정하면 두 축을 모두 중앙에 배치할 수 있습니다.또한 이 개념을 효과적으로 보여주기 위해 HTML 본문의 높이를 100vh로 설정하여 세로 정렬의 영향을 보여주는 것이 좋습니다.
최종 웹 페이지에서 HTML div 요소의 위치를 시각적으로 표시하려면 CSS를 사용하여 div에 배경색을 할당하는 것이 좋습니다. div에 스타일 속성을 추가하고 원하는 배경색 값을 16진수 형식(예: 빨간색의 경우 #FF0000)으로 지정하면 됩니다. 이렇게 하면 div가 웹페이지의 나머지 부분과 대비되어 눈에 띄기 때문에 레이아웃 내에서 정확한 위치를 쉽게 식별할 수 있습니다.
Google 크롬 인터페이스의 개발 도구에서 출력을 살펴보면 이 두 속성이 양쪽 축을 따라 정렬을 조절하는 방법을 알 수 있습니다:
CSS 그리드를 사용하여 Div 요소 중앙 배치
CSS 그리드를 사용하여 요소를 중앙에 배치하면 레이아웃을 제어하고 요소를 정렬할 때 높은 수준의 정밀도를 제공합니다.
그리드 속성.
‘그리드-템플릿-열’과 ‘그리드-템플릿-행’을 활용하면 구조화된 그리드 레이아웃을 만드는 데 매우 효과적입니다. 그리드 내에서 요소를 중앙에 배치하려면 각 속성에 대해 “1fr” 값을 사용하여 단일 열과 행을 사용하는 것이 좋습니다.
CSS를 사용하여 그리드에서 요소를 중앙에 배치하려면 “place-items” 속성을 사용할 수 있습니다. 이 속성을 사용하면 그리드 컨테이너 내에서 콘텐츠를 가로 및 세로로 중앙에 배치할 수 있습니다. 이 효과를 얻으려면 “place-items” 속성의 값을 “center”로 설정하기만 하면 됩니다.
그리드 컨테이너 내에서 div 요소를 중앙에 표시하려면 CSS를 사용하여 div를 그리드 중앙에 배치하는 스타일을 적용합니다. div의 `background` 속성을 설정하고 `선형 그라데이션(오른쪽 아래, #f00, #0f0)` 또는 기타 유사한 값을 지정하여 왼쪽에서 오른쪽으로 빨간색(#f00) 및 녹색(#0f0) 색상으로 위에서 아래로 그라데이션 효과를 만들 수 있습니다. 또한 ‘테두리-반경’ 속성을 사용하여 둥근 모서리를 만들고 요구 사항에 따라 너비 및 높이와 같은 원하는 치수를 설정할 수도 있습니다.
이 경우 단독 속성이 웹페이지에서 div의 중추적인 위치를 결정합니다:
CSS 포지셔닝을 사용하여 div 요소 중앙에 배치하기
CSS 포지셔닝 속성을 효과적으로 사용하여 웹 페이지 중앙에 div 요소를 정렬하려면 CSS 변환 및 관련 전환의 복잡성을 이해하는 것이 필수적입니다. 이 글에서는 단계별로 상세한 청사진과 함께 참고할 수 있는 데모 일러스트를 제공합니다.
div 요소를 효과적으로 배치하려면 해당 요소를 둘러싸는 요소가 상대적 위치를 채택하는지 확인하세요. 이렇게 하면 관계형 위치 지정 프레임워크가 생성되어 부모 경계 내 중앙 지점에 div를 정확하게 배치할 수 있습니다.
CSS를 사용하여 `div` 요소를 부모 컨테이너의 정확한 중앙에 배치하려면 절대 위치를 적용하고 `top` 및 `left` 속성을 적절히 설정합니다. 특히, 요소를 세로 및 가로로 자체 치수의 절반만큼 이동시키는 `translate(-50%, -50%)` 변환을 활용하세요.
이 기술은 요소의 상단 모서리를 중앙에 배치하고 치수를 기준으로 수평 및 수직으로 이동하는 2단계 프로세스를 사용합니다.
플렉스박스, CSS 그리드, 포지셔닝과 같은 고급 CSS 레이아웃 기술은 개발자에게 웹페이지에서 콘텐츠를 중앙에 배치할 수 있는 강력한 수단을 제공합니다. 예를 들어 Flexbox를 사용하면 최소한의 코드 줄로 가로 및 세로 중앙에 콘텐츠를 배치할 수 있습니다. 또한 CSS 그리드는 두 축에 걸쳐 강력한 정렬 기능을 제공하며, 포지셔닝을 활용하면 부모 컨테이너의 경계를 기준으로 요소의 중앙에 배치할 수 있습니다.
이러한 방법을 활용하면 웹사이트 콘텐츠의 세련되고 깔끔한 외관을 보장할 수 있습니다.