그룹 요소는 하위 요소를 묶어서 관리하는 요소입니다. 하위 요소를 하나의 묶음으로 관리해 반응형 처리를 할 때, 필수적입니다. 다만, 그룹 요소를 처음 만나본 분들이라면 여백을 어떻게 설정해야 할지 막막합니다. 특히, 그룹 요소에 하위 요소들이 많을 경우, 요놈을 어떻게 설정해야 더 이쁘게 보일지 감이 잘 오지 않습니다. 이번에는 그룹 요소의 여백을 어떻게 조정할 수 있는지 개념적으로 뜯어보겠습니다.

여백의 미 (출처 : 쇼미더머니)

그룹 요소에서 존재하는 여백은 크게 3개입니다. 각 조정 방식을 찬찬히 둘러봅시다.

그룹 요소의 테두리 외부 여백 = 마진(Margin)

그룹 요소의 테두리 내부 여백 = 패딩(Padding)

하위 요소 사이의 여백 = 간격(Gap)

2. 테두리를 기준으로 여백 적용하기

a. 마진과 패딩을 사용합시다

그룹 요소를 클릭하면, 테두리가 존재합니다. 이 테두리를 기준으로 (1) 외부 여백과 (2) 내부 여백을 조정할 수 있습니다. 외부 여백은 마진(margin), 내부 여백은 패딩(padding)이라고 합니다. 마진과 패딩은 그룹 요소 속성 창의 [appearance] 탭에서 설정합니다. 우측 속성 창의 최하단에 [Margins]와 [Paddings] 영역을 확인할 수 있습니다.

만약 마진 값을 설정하면, 테두리의 바깥 쪽으로 여백이 생깁니다. 아래 이미지처럼 파란색 테두리 밖의 초록색 영역이 현재 마진을 설정해 생성된 외부 여백입니다.

반대로 패딩 값을 설정하면, 테두리의 안 쪽으로 여백이 생깁니다. 아래 이미지처럼 파란색 테두리 내부의 파랑색 영역이 현재 패딩을 설정해 생성된 내부 여백입니다.

b. 둘 다 똑같은 거 아니에요?

언뜻보면 여백을 외부에 두냐 혹은, 내부에 두냐의 차이만 있을 뿐 큰 차이가 없어보입니다. 하지만, 여백이 테두리를 기준으로 어디에 있느냐는 굉장히 중요한 요소입니다. 예를 들어, 그룹 요소에 배경 색을 적용하면, 배경 색은 테두리 내부에 적용됩니다. 즉, 패딩으로 설정한 영역에도 색이 적용됩니다. 하지만 마진으로 설정한 영역에는 색이 적용되지 않습니다.

비슷한 원리로 버튼을 보자면, 배경색은 패딩으로 설정한 영역에까지 적용합니다. 반면 마진에는 배경색이 적용되지 않습니다.

3. 하위 요소 사이의 간격 정하기

앞선 마진과 패딩은 그룹 요소의 테두리를 기준으로 한 여백과 관련 있습니다. 그룹 요소에 존재하는 하위 요소들 사이의 여백(a.k.a 간격)은 다른 방식으로 설정해야 합니다. 3가지 방법이 있으며, 각 상황에 맞춰 적절한 방법을 사용하면 됩니다.

하위 요소에 직접 마진 적용하기

그룹 요소의 정렬 기능 활용하기

그룹 요소의 간격 기능 활용하기

a. 하위 요소에 마진 적용하기

첫 번째 방법은 하위 요소에 직접 마진을 적용하는 방식입니다. 예를 들어, 그룹 요소의 container layout을 row로 설정하면, 하위 요소들은 X축 방향으로 배열됩니다.

이때, 하위 요소를 클릭하고 직접 마진 값을 적용해 간격을 조정할 수 있습니다.

b. 그룹 요소의 정렬 기능 활용하기

그룹 요소의 container layout을 row로 설정하면, 하위 요소들은 X축 방향으로 배열됩니다. 이때, alignment를 어떻게 설정하느냐에 따라서 정렬 방식이 달라집니다. 예를 들어 하위 요소들의 좌우 여백을 균등하게 설정해 정렬할 수 있고 혹은, 양쪽 끝을 기준으로 정렬할 수도 있습니다.

만약 container alignment에서 4번째를 선택하면, 하위 요소들의 좌우 여백이 균등하게 설정되어 정렬됩니다. 첫 번째 버튼의 좌우 여백과 오른쪽 버튼의 좌우 여백이 동일한 수치로 배열됩니다.

container alignment에서 5번째를 선택하면, 하위 요소들이 양쪽 끝을 기준으로 정렬됩니다. 첫 번째 버튼은 좌측 끝에, 오른쪽 버튼은 우측 끝에 배열된 걸 볼 수 있습니다.

이런 식으로 하위 요소들을 배열한 후, 각 하위 요소의 크기를 %나 fit width to content로 처리하는 방식을 추가해 사용할 수 있습니다.

c. 그룹 요소의 간격 기능 활용하기

세 번째는 그룹 요소에 간격을 설정하는 겁니다. 그룹 요소를 클릭하고 [appearance] 탭에 들어가보면, [apply gap spacing between elements]가 있습니다. 이는 해당 그룹 요소에 속한 하위 요소들 사이의 간격을 지정하는 겁니다. 예를 들어 Column gap을 12로 선택하면, 하위 요소 사이에 12px의 간격이 자동 생성됩니다.

4. PC, 테블릿, 모바일마다 다른 여백 값 적용하기

PC, 테블릿과 모바일의 윈도우 창 크기는 서로 다릅니다. 그래서 PC에 적합해 보이는 여백 값도 테블릿이나 모바일에서는 과하게 보일 수 있습니다. 이런 경우, 그룹 요소에 조건 기능을 사용해야 합니다. [Conditional] 탭에서 조건을 추가하고, [Current page width]를 불러옵니다. 이는 유저가 접속한 브라우저 창의 크기를 의미합니다.