큐샵 고객센터
  • 📌큐샵
    • 🧑‍💻고객센터 안내
    • 🏠시작하기
      • 📝사이트 개설하기
        • 빈페이지로 시작하기
        • 템플릿으로 시작하기
        • 큐샵AI로 시작하기
      • 🚀이용요금안내
      • 💎마이베네핏
      • 🎫플랜 활성화 코드
    • 🙋고객 포럼 기능 요청하기
  • 💡큐샵 가이드
    • 🖌️상점 디자인하기
      • 에디터 기본정보
        • 섹션
        • 상단 메뉴바
        • 구조패널
        • 속성패널
        • 추가 패널
          • 섹션
          • 텍스트
          • 미디어
            • 로티 활용하기
          • 쉐이프
          • 아이콘
          • 버튼/폼
            • 구글 폼
            • 타입 폼
            • 탈리
          • 상품
          • 메뉴
          • 고급
            • 스크롤링 블록
            • 코드 블록
            • 구글 지도 블록
            • 네이버 지도 블록
            • 테이블 블록
            • 게시판 블록
            • 공지사항 블록
            • 아코디언 블록
            • RSS 피드
    • 🛠️운영관리
      • 상품
        • 상품 등록
          • 유형상품 등록하기
          • 무형상품 등록하기
        • 상품 조회/수정
        • 템플릿 관리
        • 카테고리 관리
      • 판매
        • 주문관리
        • 취소관리
        • 반품관리
      • 쇼핑 연동
        • 네이버쇼핑
      • 혜택
        • 쿠폰 관리
        • 적립금 관리
      • 리뷰
      • 문의
        • 상품문의
        • 1:1문의
      • 회원
        • 회원 관리
        • 그룹 관리
      • 메시지
        • 메시지 발신 관리
        • 발신 기본설정
        • 자동발신 설정
        • 발신 예시
      • 콘텐츠
        • 공지사항 관리
        • 입력폼 관리
          • 재피어 연동하기
        • 팝업/배너 관리
        • 게시판 관리
    • ⚙️상점설정
      • 기본정보
        • 사이트정보
        • 관리자정보
        • 주소지정보
      • 회원 가입
        • 기본 로그인
        • 소셜 로그인
          • 네이버 로그인
          • 카카오 로그인
        • 가입약관
        • 본인인증
      • 운영환경
        • 상담 설정
        • 도메인 설정
          • DNS 레코드
        • SEO 설정
          • 네이버 서치어드바이저
          • 구글 서치 콘솔
          • 다음 웹마스터 도구
          • 빙(Bing) 웹마스터 도구
      • 쇼핑환경
      • 결제수단
        • 무통장입금
        • 전자결제
          • 신청 전 확인 사항
          • 에스크로
            • 에스크로 인증마크 삽입하기
          • 토스 신청하기
          • 나이스페이 신청하기
          • KG 모빌리언스 신청하기
          • 휴대폰 결제
    • 🫂성장센터
      • 네이버 애널리틱스
      • 네이버 프리미엄 로그 분석
      • 네이버 지도
      • 구글 애널리틱스
      • 구글 애즈
      • 메타 픽셀
      • 메타 전환 API
      • 메타 도메인 인증
      • 카카오
    • ➕활용 가이드
      • 브라우저 쿠키 및 캐시 삭제하기
      • PC↔︎모바일 전용 페이지 만들기
      • 콘텐츠 고정하기
        • 섹션 고정하기
        • 블록 고정하기
        • 플로팅 콘텐츠
      • 헤더 디자인하기
      • 배경 고정하기
      • 사이트 이미지 최적 해상도
      • 쇼핑몰 운영을 위한 기본설정
      • 쇼츠 영상 업로드하기
  • 🖱️큐샵링크
    • 큐샵 링크 생성하기
    • 에디터 기본정보
      • 콘텐츠
        • 콘텐츠 요소
      • 디자인
  • 🚀큐샵 소식
    • 공지 및 뉴스
      • 공지 사항
        • 2025년 04월 25일
        • 2025년 03월 12일
        • 2025년 02월 27일
        • 2025년 02월 25일
        • 2025년 01월 31일
        • 2025년 01월 20일
        • 2024년12월27일
        • 2024년11월06일
        • 2024년11월 05일
        • 2024년09월25일
        • 2024년09월09일
        • 2024년08월16일
        • 2024년08월12일
        • 2024년08월08일
        • 2024년06월03일
        • 2024년05월13일
        • 2024년05월02일
        • 2024년04월25일
        • 2024년04월03일
      • 업데이트 소식
        • 2025년 4월
        • 2025년 3월
        • 2025년 2월
        • 2025년 1월
        • 2024년 12월
        • 2024년 11월
        • 2024년 10월
        • 2024년 9월
        • 2024년 8월
        • 2024년 7월
        • 2024년 6월
        • 2024년 5월
        • 2024년 4월
        • 2024년 3월
Powered by GitBook
On this page
  • 섹션이란?
  • 1. 섹션 개념 이해하기
  • 2. 섹션 구조 이해하기
  • 3. 섹션 설정하기
  • 3-1. 퀵 메뉴
  • 3-2. 더보기 메뉴

Was this helpful?

  1. 큐샵 가이드
  2. 상점 디자인하기
  3. 에디터 기본정보

섹션

섹션에 대한 기본적인 개념과 섹션을 활용하는 방법을 알아봅니다.

Previous에디터 기본정보Next상단 메뉴바

Last updated 6 months ago

Was this helpful?

섹션이란?

섹션은 구분, 구역의 뜻을 가지고 있으며 어떠한 것들을 항목별로 구분하기 위해 나눠진 것이라는 의미를 담고 있습니다.

페이지를 만드는 과정에서 페이지의 주제에 맞는 콘텐츠를 담아내는 바탕이 되는 요소로 크게 헤더 / 바디 / 푸터로 나뉘어져 있으며 각각의 섹션의 용도에 맞게 블록을 사용하여 디자인을 하게 됩니다.

1. 섹션 개념 이해하기

섹션은 가로 50칸의 격자 형태로 중앙의 작업 영역과 좌우의 여백 영역으로 나뉘어져 있으며, 페이지 디자인 방법에 따라 여백 영역을 활용하게 됩니다.

작업 영역과 여백 영역의 크기는 속성 패널의 레이아웃 설정을 통해 크기 조절을 할 수 있으며 여백의 크기는 브라우저 크기에 따라 실제 사이트에서 보여지는 차이가 발생할 수 있습니다.

해당 설정은 사이트에 모두 동일하게 적용이 됩니다.

작업 영역

이미지, 상품목록등의 콘텐츠를 사용하여 디자인을 하는 영역입니다.

  • 가로 48칸으로 구성

여백 영역

컨텐츠가 표시 되지않는 영역입니다.

  • 헤더/푸터 섹션 사용 불가

  • 컨텐츠 영역을 제외한 좌우 한칸의 영역

  • 전체 너비에 따라 영역 크기 변경

  • 확장 영역에 콘텐츠는 브라우저 크기와 관계없이 화면 전체에 적용

2. 섹션 구조 이해하기

섹션의 구조는 아래 이미지처럼 크게 헤더, 바디, 푸터로 나뉘어져 있습니다.

각 영역에 콘텐츠를 등록하여 디자인을 하게 되며, 영역의 높이는 좌측 하단 높이 조절 버튼을 드래그하여 조절이 가능합니다.

항목

설명

1

헤더 섹션 페이지 이동을 위한 메뉴, 로그인/가입, 로고 등의 콘텐츠를 사용합니다.

  • 별도의 설정을 하지않을 경우 모든 페이지 노출

2

바디 섹션 페이지 주제에 따라 이미지, 상품 목록등의 콘텐츠를 사용합니다.

3

푸터 섹션 이용약관등의 법적 필수 정보, 문의 수단 및 정보를 등록하는 용도로 사용이 됩니다.

  • 별도의 설정을 하지않을 경우 모든 페이지 노출

3. 섹션 설정하기

섹션의 기본 설정은 오른쪽 속성패널을 통해 배경, 여백 등의 설정을 할 수 있습니다.

3-1. 퀵 메뉴

헤더 섹션

항목

설명

헤더 합치기 헤더 섹션 아래 섹션의 배경색 또는 배경이미지가 헤더에 합쳐져 하나의 섹션처럼 보이게 됩니다.

섹션 고정 토글을 활성화 하게 되면, 헤더영역이 고정이 되어 스크롤 시 함께 내려오게 됩니다.

바디 섹션

항목

설명

섹션추가 해당 섹션 아래 빈 섹션을 추가합니다.

위로 이동 / 아래로 이동 해당 섹션의 위치를 위, 아래로 이동합니다.

복제 해당 섹션의 내용을 복제합니다.

  • 섹션 내 컨텐츠 모두 복제

섹션 고정 토글을 활성화 하게 되면, 설정에 따라 섹션이 고정이 되어 스크롤 시 함께 내려오게 됩니다.

삭제 해당 섹션을 삭제합니다.

  • 상단 메뉴바를 통해 실행 취소 및 복구 가능

더보기 메뉴 추가, 복제, 숨기기 등 다양한 설정을 할 수 있습니다.

  • 더보기 메뉴 가이드 참고

3-2. 더보기 메뉴

버리는 항목

섹션 추가 해당 섹션 아래 빈 섹션을 추가합니다.

섹션 복제 해당 섹션을 복제합니다.

  • 섹션 내 컨텐츠 모두 복제

다른 페이지로 복제 생성한 다른 페이지에 해당 섹션 전체를 복제합니다.

  • 섹션 내 컨텐츠 모두 복제

PC에서 숨기기/보이기 PC 뷰포트에서 해당 섹션을 숨기거나 숨김처리가 된 섹션을 다시 보이게 합니다.

  • 헤더 / 푸터 섹션의 경우 숨기기 설정 시 모든 페이지에서 숨김 처리가 됩니다.

모바일에서 숨기기/보이기 모바일 뷰포트에서 해당 섹션을 숨기거나 숨김처리가 된 섹션을 다시 보이게 합니다.

  • 헤더 / 푸터 섹션의 경우 숨기기 설정 시 모든 페이지에서 숨김 처리가 됩니다.

삭제하기 해당 섹션을 삭제합니다.

  • 상단 메뉴바를 통해 실행 취소 및 복구 가능

전체 너비 설정을 통해 영역의 크기를 조절 가능 ()

격자 간격 설정을 통해 콘텐츠 사이 기본 간격 조절 가능 ()

자세한 내용은 를 참고 부탁드립니다.

가이드 참고

💡
🖌️
속성패널 가이드
섹션 고정하기
전체 너비 설정하기
격자 간격 설정하기