CSS justify-content 속성과 space-around 값이란?
CSS Flexbox 레이아웃에서 justify-content 속성은 플렉스 컨테이너 안의 아이템들을 주축(main axis) 방향으로 어떻게 배치할지 결정합니다. 이 속성에 space-around 값을 지정하면 각 아이템의 앞뒤로 균등한 여백이 자동으로 배분됩니다.
space-around의 핵심 특징은 다음과 같습니다.
- 각 아이템의 좌우에 동일한 크기의 공간이 생성됩니다.
- 인접한 아이템들의 여백이 서로 겹치기 때문에, 아이템 사이의 간격은 양쪽 가장자리 여백의 약 2배로 나타납니다.
- 컨테이너 너비가 남는 만큼만 여백으로 분배되므로, 화면 크기에 따라 간격이 유동적으로 조절됩니다.
space-around 적용 예제
아래 코드를 실행해 보면 빨간색 플렉스 컨테이너 안에서 주황색 박스들이 균등한 간격으로 배치되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: red;
justify-content: space-around;
}
.mycontainer > div {
background-color: orange;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>예제 코드 해설
컨테이너인 .mycontainer에 display: flex;를 선언해 자식 요소들이 가로 방향으로 나열되도록 설정했습니다. 여기에 justify-content: space-around;를 추가하면 Q1부터 Q4까지의 박스들이 서로 붙지 않고, 컨테이너의 남은 공간을 아이템 주변에 고르게 나눠 가지며 배치됩니다.
space-between과의 차이점
헷갈리기 쉬운 값으로 space-between이 있습니다. space-between은 첫 번째와 마지막 아이템을 컨테이너 양 끝에 딱 붙인 상태에서 나머지 공간을 아이템 사이에만 분배합니다. 반면 space-around는 양 끝에도 여백을 남기므로, 전체적으로 더 부드럽고 균형 잡힌 배치가 필요할 때 유용합니다.