반응형
display: flex를 사용하여 요소를 가로세로 가운데 정렬하는 방법은 매우 간단합니다. flex 속성은 부모 요소에 설정되고, 자식 요소는 자동으로 정렬됩니다. 여기서는 justify-content와 align-items를 활용하여 중앙 정렬을 설정하는 방법을 설명하겠습니다.
다음은 HTML과 CSS 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Centering Example</title>
<style>
.container {
display: flex;
justify-content: center; /* 수평 중앙 정렬 */
align-items: center; /* 수직 중앙 정렬 */
height: 100vh; /* 화면 전체 높이 사용 */
border: 2px solid #ccc; /* 컨테이너 경계 표시 */
}
.item {
padding: 20px;
background-color: lightblue;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Centered Content</div>
</div>
</body>
</html>설명
- .container: display: flex;를 사용하여 내부의 자식 요소들이 유연한 레이아웃을 가질 수 있도록 합니다. justify-content: center;와 align-items: center; 속성을 추가하여 수평 및 수직으로 자식 요소가 가운데에 위치하도록 설정합니다.
- height: 100vh;: 컨테이너의 높이를 뷰포트의 100%로 설정하여 화면 전체의 높이를 차지하도록 합니다. 이는 자식 요소가 수직으로도 중앙에 배치되도록 돕습니다.
- .item: 내용물을 포함하는 자식 요소로, 적당한 패딩과 배경색을 지정하여 가독성을 높였습니다.
주요 속성
- justify-content: 주축(main axis, 기본적으로 수평축)을 따라 자식 요소를 정렬합니다. center는 중앙 정렬을 의미합니다.
- align-items: 교차축(cross axis, 기본적으로 수직축)을 따라 자식 요소를 정렬합니다. center는 수직 중앙 정렬을 의미합니다.
이러한 설정은 매우 다양한 레이아웃에 적용될 수 있으며, 화면 크기에 따라 중앙 정렬이 유지되도록 하는 데 매우 유용합니다. 필요에 따라 추가적인 스타일링을 적용하여 디자인을 조정할 수 있습니다.
반응형
'SMART GPT' 카테고리의 다른 글
| PHP에서 MP3 파일을 직접 읽고 스트리밍 하기 (1) | 2024.09.07 |
|---|---|
| 현재 페이지가 location.reload()에 의해 새로고침되었는지 ... (0) | 2024.09.07 |
| 텍스트 파일을 읽고, 각 줄의 끝에서 6글자를 삭제한 후, 결과를 새로운 파일에 저장합니다. (0) | 2024.08.23 |
| cURL을 사용하여 리다이렉트를 따라가 최종 URL 가져오기 (0) | 2024.08.23 |
| grid-template-columns CSS (0) | 2024.08.07 |
| 리스트 항목 간에 특정한 여백을 설정하려면? (0) | 2024.08.06 |
| PHP 5.x 버전에서 실행 가능한 10진수와 16진수 간의 변환을 수행하는 코드를 포함한 전체 웹 페이지 소스코드 (0) | 2024.08.06 |
| getElementsByClassName 사용하기 (0) | 2024.08.06 |
댓글