섹션 설정하기 (배경·효과·간격·사이드·섹션 ID)
섹션 설정에서는 섹션의 배경, 배경 효과, 안쪽 여백과 위젯 간격, 사이드 영역, 섹션 고정을 지정할 수 있어요. 앵커 링크에 쓰는 섹션 ID도 여기서 확인해요.
섹션 설정 열기
1. 디자인 모드에서 설정할 섹션의 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭해 주세요.
2. 메뉴가 열리면 '섹션 설정'을 클릭해 주세요.
배경 이미지·동영상 넣기
섹션 설정 창 가운데 이미지 영역에 마우스를 올리면 세 가지 버튼이 나타나요.
이미지 찾기 · 내 PC에 있는 이미지를 올려요.
무료 이미지 · 아임웹이 제공하는 무료 이미지를 골라요.
동영상 · YouTube 또는 Vimeo 주소를 입력해 동영상을 배경으로 써요.
배경 표시 방식과 색상
배경(이미지) · 올린 이미지를 어떻게 표시할지 고르는 항목이에요. 채우기 · 반복안함 · 반복 · 가로반복 · 세로반복 중에서 선택할 수 있어요. 기본값은 채우기라 어떤 크기의 이미지든 섹션에 꽉 차게 표시돼요.
작은 무늬 이미지를 타일처럼 깔고 싶다면 '반복'을 골라 주세요. 고해상도 이미지를 쓰는 것보다 가볍고 빠르게 패턴 배경을 만들 수 있어요.
이미지 오른쪽의 아홉 칸 버튼은 이미지가 표시되는 기준 위치를 정해요.
배경색 · 섹션의 배경색을 지정해요. 배경 이미지가 있으면 이미지 위에 겹쳐지니, 이미지와 함께 쓰려면 투명도를 조절해 주세요.
글자색 · 섹션 안 기본 글자색이에요. 비워 두면 공통 디자인 설정의 색을 따라가요.
배경 효과
오른쪽 체크박스로 배경에 효과를 줄 수 있어요. 여러 개를 함께 선택해도 돼요.
흑백 이미지 · 배경 이미지의 색을 빼고 흑백으로 표시해요.
배경 이미지 고정 · 스크롤해도 배경이 제자리에 머무는 효과예요. 모바일 브라우저에서는 지원하지 않아요.
마우스 포인터 움직임 · 마우스를 움직이면 배경 이미지가 따라 움직여요.
눈내리기 효과 (PC 전용) · 배경에 눈이 내리는 효과를 줘요. 눈이 흰색이라 배경이 밝으면 잘 보이지 않을 수 있어요.
모바일에서도 음소거로 자동재생 · 배경 동영상을 모바일에서도 자동 재생해요. 브라우저 정책상 음소거 상태로만 재생돼요.
간격 · 여백과 위젯 간격
상하 여백 / 좌우 여백 · 섹션 안쪽 여백을 픽셀 단위로 지정해요. 여백 위젯을 넣지 않고도 같은 크기의 여백을 빠르게 줄 수 있어요.
그리드 간격 · 섹션 안 위젯끼리의 간격이에요. 기본값은 공통 디자인 설정을 따르는 '기본 그리드 간격'이고, 이 체크를 해제하면 그리드 상하 간격과 그리드 좌우 간격을 이 섹션에만 다르게 줄 수 있어요. 0으로 두면 위젯끼리 완전히 붙어요.
가로 100% 확장 · 섹션 본문 영역을 브라우저 너비만큼 넓혀요.
사이드 영역 만들기
섹션을 둘로 나누어 왼쪽이나 오른쪽에 사이드 영역을 만들 수 있어요. 2차 메뉴, 배너, 페이지 타이틀 등을 넣는 데 쓰여요.
사이드 항목에서 왼쪽 또는 오른쪽 모양의 아이콘을 클릭하면 사이드가 생기고, 아래 항목들을 조절할 수 있어요.
사이드 가로 크기 · 사이드 영역의 너비예요.
본문과 여백 · 본문과 사이드 사이의 간격이에요.
선스타일 · 본문과 사이드 사이에 세로선을 넣어요. 선두께, 선모양(실선·점선·긴점선), 선색을 지정할 수 있어요.
섹션 고정 · 스크롤해도 사이드 영역이 화면에 머물러요.
섹션 고정
사이드를 쓰지 않는 섹션에서는 '섹션 고정' 항목이 표시돼요. 체크하면 스크롤로 섹션이 화면을 벗어나도 위쪽에 고정돼요.
섹션 ID 확인하기
섹션 ID는 그 섹션을 가리키는 고유한 값이에요. 버튼이나 링크에 주소 대신 섹션 ID를 넣으면 클릭했을 때 그 섹션으로 이동시킬 수 있어요.
섹션 설정 창 오른쪽 위에 #으로 시작하는 값이 섹션 ID예요. 마우스로 드래그해 선택한 뒤 복사(Ctrl+C)해서 쓰시면 돼요.
자주 묻는 질문
Q. 배경 이미지를 넣었는데 원하는 부분이 잘려요.
A. 배경은 브라우저 크기에 맞춰 늘어나고 줄어들어요. 배경 항목의 아홉 칸 버튼으로 기준 위치를 바꾸거나, 표시 방식을 '반복안함'으로 바꿔 보세요. 잘리면 안 되는 이미지라면 배경 대신 이미지 위젯으로 넣는 편이 좋아요.
Q. 배경 이미지 고정이 모바일에서 안 돼요.
A. 모바일 브라우저에서는 지원하지 않는 효과예요.
Q. 위젯 사이를 완전히 붙이고 싶어요.
A. 간격 항목에서 '기본 그리드 간격' 체크를 해제하고 그리드 상하·좌우 간격을 0으로 입력해 주세요.
Q. 섹션 고정을 켰는데 디자인 모드에서 아무 변화가 없어요.
A. 미리보기에서만 확인할 수 있어요. 미리보기로 스크롤해 보세요.
Q. 섹션마다 설정이 따로 적용되나요?
A. 네, 섹션 설정은 그 섹션에만 적용돼요. 다른 섹션에는 영향을 주지 않아요.