솔루션 꿀팁&길라잡이

섹션 및 비주얼 섹션

조회수 721

섹션이란?

메이크디는 페이지(메뉴) 안에 섹션이 있고, 섹션 안에 위젯이 올라가는 구조로 이루어져 있습니다. 아래 예시 이미지처럼 페이지 내 구역을 여러 개 섹션으로 나누어, 각 섹션별로 다른 분위기를 연출할 수 있습니다.



섹션 추가하기

1. 비주얼 섹션 또는 미리 구성된 섹션 추가

  • 왼쪽 상단의 툴바에서 섹션 추가 버튼 을 누릅니다.
  • 원하는 섹션 유형의 미리보기 이미지를 클릭합니다.
  • 섹션이 페이지의 마지막에 추가됩니다.

컨텐츠, 구성원, 연락 분류에서는 자주 사용하는 레이아웃으로 미리 구성된 섹션을 추가할 수 있습니다.


2. 빈 섹션 추가 및 섹션 이동

위젯이 하나도 없는 빈 섹션을 추가하거나, 섹션을 이동하고자 할 땐, 섹션 영역에서 마우스 오른쪽 버튼을 누릅니다. (위젯 영역이 우선으로 인식되므로 위젯이 없는 가장자리 영역을 클릭해주세요)

섹션을 위로 이동하거나, 아래로 이동하면 섹션 단위로 한칸씩 이동됩니다. 상단보다 높게 이동되거나 하단보다 낮은 위치로 이동될 수는 없습니다.

섹션도 위젯처럼 복사 및 붙여넣기가 가능합니다. 제작완료한 섹션 디자인을 복사/붙여넣기 하는 방식으로 반복되는 작업을 크게 줄일 수 있습니다.



섹션 설정

섹션의 배경색, 배경이미지, 간격 및 각종 효과를 섹션 설정을 통해 제어할 수 있습니다.

  • 배경 이미지/동영상 설정방법: 섹션의 상단 회색 부분에 마우스 커서를 올리면 이미지 찾기 버튼으로 이미지를 업로드하거나 YouTube영상을 배경으로 설정할 수 있습니다.
  • 배경-이미지: 올려진 배경 이미지를 표시하는 방법을 선택합니다. 9칸으로 구성된 네모난 버튼은 이미지가 표시되는 기준위치를 설정합니다.
  • 배경-배경색: 배경색을 지정합니다. 업로드 된 이미지가 있는 경우 이미지 위에 겹쳐 보이기 때문에 이미지와 함께 사용하려면 투명도를 조정하세요.
  • 배경-텍스트: 섹션에 표시되는 기본 텍스트 색상을 설정합니다. 이 값을 비워두면 공통 디자인 설정 의 텍스트 색상을 따릅니다.
  • 흑백 이미지: 업로드된 배경 이미지를 흑백으로 처리합니다.
  • 배경 이미지 고정: 스크롤을 하더라도 배경이 고정된 위치에 표시됩니다.
  • 마우스 포인터 움직임: 마우스 포인터의 움직임에 따라 배경 이미지가 움직입니다.
  • 간격-상하여백, 좌우여백: 섹션의 안쪽 여백을 설정합니다.
  • 그리드 간격: 기본 그리드 간격 옵션을 해제하고 그리드 상하 및 좌우 간격을 조정하여 공통 디자인 설정의 그리드 간격을 따르지 않고 해당 섹션에만 위젯간 간격을 조정할 수 있습니다.
  • 가로 100% 확장: 섹션의 본문영역을 브라우저 크기만큼 확장합니다.
  • 사이드: 좌측이나 우측에 사이드 메뉴를 삽입하려면 분할된 모양의 아이콘을 선택합니다. 사이드 영역의 폭과 사이드 영역과 본문 영역간의 간격을 조정할 수 있습니다.


비주얼 섹션

슬라이드 방식으로 동작하는 비주얼 섹션은 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보를 알리는데 특화되어 있습니다.

슬라이드가 2개 이상인 경우 다음 슬라이드로 전환 시 Fade, Slide 등의 전환 효과가 일어납니다. 단, 슬라이드를 1개만 삽입한 경우 이 전환 효과는 동작하지 않습니다.


비주얼 섹션의 배경으로 사용하기 좋은 이미지는?

비주얼 섹션 내 배경 이미지는 브라우저 가로폭을 기준으로 꽉 차게 표시됩니다. 비주얼 섹션은 하단 끄트머리를 마우스로 드래그하여 높이 조절이 가능하지만, 브라우저 가로폭에 따라 원본 이미지의 상하 또는 좌우가 잘려 표시될 수 있기 때문에, 배경 이미지를 작업하실 때 사방에 어느 정도 여유 공간을 주세요.

사용자 기기의 화면 크기는 매우 다양하고 비주얼 섹션에 사용한 이미지는 모바일에서도 그대로 사용됩니다. 따라서 이미지에 텍스트가 포함되거나 특정한 인물 또는 제품에 포커스가 맞춰진 사진은 PC에서 잘 보인다 하더라도, 아래 그림처럼 다른 기기에서는 잘려 보일 수 있습니다.


  • 텍스트는 비주얼 섹션에서 텍스트를 입력하여 표현합니다.
  • 풍경, 패턴, 특정 사물에 포커스가 맞춰지지 않은 이미지를 선택합니다.


: 이미지의 비율을 유지하여 모든 기기에서 표현하고 싶다면 이미지 위젯이나 갤러리 위젯을 이용해 보세요.