섹션 그리드 간격 설정법 - 위젯 간 거리 조절하기

  아임웹 연구소 소장 해준  |  2017 . 09 . 18

시작에 앞서
빈 섹션에 이미지와 버튼을 추가했는데, 그 이미지와 버튼을 좀 더 가까이 붙일 수 없는지 궁금해하시는 분들이 많습니다.

위젯 간 거리를 넓히는 건 [여백] 위젯을 써서 간단하게 구현 가능하지만, 기본값으로 정해진 위젯 간의 거리는 어떻게 줄여야 할지 이용자분들께서 고민이 되시는 것 같습니다. 이 문제는 그리드 간격을 조절해서 생각보다 아주 쉽게 해결할 수 있습니다. 

오늘은 섹션의 [그리드 간격]을 조절해서, 위젯 간의 간격을 늘리거나 줄이는 방법에 알아보겠습니다.




1단계, 섹션 설정창 열기
먼저 아무 이미지를 1장을 삽입하고, 이미지 하단에는 버튼 위젯을 삽입합니다.

(1) 이후 해당 이미지와 버튼이 들어간 섹션의 바깥 회색 영역에 마우스 커서를 대고, 마우스 오른쪽 버튼을 클릭합니다. (2) 보조 메뉴가 나타나면 [섹션 설정] 버튼을 클릭해 [섹션 설정]을 클릭해주세요.





2단계, 기본 그리드 간격 체크 해제하기
섹션 설정 창을 열면, 간격 항목 가장 우측에 [기본 그리드 간격]이 체크되어 있을 겁니다. 아래 그림을 보시고 [기본 그리드 간격] 항목을 찾아, 체크 버튼을 꺼줍니다.





3단계, 위젯 상하 간격 확인하기
[기본 그리드 간격]을 체크 해제하니, 아래 그림처럼 위젯들의 상하 간격이 확 줄어든 걸 확인하실 수 있습니다. 맨 위부터, 여백, 이미지, 버튼, 여백 순으로 1px 여유도 없이 딱 붙었습니다. 그럼 좌우 간격은 어떨까요?





4단계, 위젯 좌우 간격 확인하기
이미지 위젯을 하나 더 추가한 다음, 기존 이미지의 우측에 이동시킵니다. 그랬더니 좌우 간격도 제로가 되어 이미지끼리 딱 붙어버렸네요.





5단계, 상하/좌우 그리드 간격 설정하기
위젯과 위젯 사이의 상하/좌우 그리드 간격은 섹션 설정 창을 통해 픽셀 단위로 조절할 수 있습니다. [기본 그리드 간격]을 해제하면, 아래 그림처럼 [그리드 상하 간격], [그리드 좌우 간격]을 조절할 수 있는 항목이 활성화됩니다.





6단계, 그리드 좌우 간격 조절하기
섹션 설정 창에서 [그리드 좌우 간격]을 10px로 설정하고, 창을 꺼보세요. 그럼 아래 그림처럼, 이미지와 이미지 사이 여백이 생긴 걸 확인할 수 있습니다.





7단계, 그리드 상하 간격 조절하기
이번에는 [그리드 상하 간격]을 조절해보겠습니다. [그리드 상하 간격]을 0에서 20px로 바꿔보고, 섹션 설정 창을 껐습니다. 그랬더니 아래 그림처럼 이미지와 버튼 사이 여백이 생겨났습니다.





TIP!
그리드 간격을 조절했다고, 제작한 모든 페이지에 적용되는 건 아닙니다. 섹션 설정 창을 통해 설정 변경한 그리드 간격은, 말 그대로 그 섹션에만 적용됩니다.
모든 페이지에 공통된 그리드 간격을 주고 싶다면, 디자인 모드 좌측 툴바 하단에 위치한 [공통 디자인 설정]에서 변경해주셔야 합니다.


해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, 네이버 페이, KCP 공식파트너입니다.