<aside> 📢 다양한 블록을 조립하는 방법과 위치, 자유롭게 블록을 커스텀 하는 방법에 대한 설명입니다.

</aside>

블록이란(Block), 웹 페이지를 나무토막을 내 듯이 덩어리 형태로 나뉜 것을 말합니다.

블록이 세로 방향으로 나열된 웹 페이지의 구조를 세로형 레이아웃이라고 하며, 현재 웹페이지의 블록의 레이아웃 상태를 확인하고 편집할 수 있습니다.

템하 에디터의 블록은 헤더 · 푸터 블록, 레이아웃 블록으로 총 2개의 형태로 나뉩니다.

<aside> ❓ 템하의 에디터란?

 1️⃣ [에디터 모드 작업 환경 살펴보기](<https://temhamanual.notion.site/157796fab7a080668f11c8ca73423697>)

 2️⃣ [템하의 기본 단위 (rem, px, em…)](<https://temhamanual.notion.site/157796fab7a080668f11c8ca73423697>)

📄 페이지

1️⃣ ****페이지를 생성하는 방법

2️⃣ 페이지 명을 설정하는 방법

3️⃣ 산출물 다운로드 시 페이지 명 설정


🧩 블록

1️⃣ 헤더 · 푸터 블록, 레이아웃 블록의 차이

2️⃣ 프로젝트 생성 시 블록을 가져오는 방법

3️⃣ 레이아웃 블록의 옵션 사용법

4️⃣ 헤더푸터 블록의 옵션 사용법


⚙️ 설정

1️⃣ 페이지 설정

2️⃣ 페이지 설정 옵션

3️⃣ 프로젝트 설정

4️⃣ 프로젝트 설정 옵션


🕹️ 제어판

1️⃣ 제어판의 위치

2️⃣ 제어판의 옵션


↗️ 내보내기

1️⃣ 내보내기의 위치

2️⃣ 소스 다운로드

3️⃣ FTP 업로드

4️⃣ 템하 IP 허용


🌐 웹 게시

1️⃣ 웹 게시의 위치

2️⃣ 웹 게시 방법


👥 협업

1️⃣ 협업 프로젝트의 위치

2️⃣ 협업자를 초대하는 방법

3️⃣ 협업 페이지 구분 방법

4️⃣ 코멘트의 위치

5️⃣ 코멘트를 작성하는 방법

6️⃣ 코멘트 입력창 버튼의 역할

7️⃣ 코멘트 관리 방법


⌨️ 코드 (블록수정방법)

1️⃣ 지도 수정방법

</aside>

1️⃣ 헤더 · 푸터 블록, 레이아웃 블록의 차이

템하 에디터의 블록은 헤더 · 푸터 블록, 레이아웃 블록으로 총 2개의 형태로 나뉩니다.

각 블록의 기본 구역과 블록이 위치한 왼쪽 버튼을 예시로 아래 이미지와 설명을 참고해 주세요.

헤더 · 푸터 블록, 레이아웃 블록의 차이.png

2️⃣ 프로젝트 생성 시 블록을 가져오는 방법

<aside>

💡 프로젝트 생성 방법이 궁금하신가요? ⇒ 프로젝트 생성 방법 알아보기 ↗️

어떤 메뉴를 클릭해야 하는지 궁금하시다면 1️⃣ 헤더 · 푸터 블록, 레이아웃 블록의 차이를 확인해주세요

</aside>

블록가져오기.png

  1. 갖고 오려는 블록에 대한 버튼을 클릭합니다.

  2. “블록 패널 열기” 버튼을 클릭합니다.

  3. 원하는 블록을 드래그하여 끌어오거나, +버튼을 클릭하여 블록을 추가합니다.

    블록의 순서를 변경하고 싶다면 왼쪽 블록을 “위, 아래”로 드래그하여 순서를 변경합니다.

    service_01.gif

  4. 각각의 블록은 “무료, 유료(프리미엄)”으로 나뉘며, 제일 오른쪽 버튼(셀렉트 박스)을 클릭 시 원하는 카테고리를 지정하여 카테고리에 맞는 블록만 확인할 수 있습니다.

  5. “템플릿 블록”은 선택한 템플릿에 사용된 블록이 우선적으로 노출되며, 다양한 블록이 아래에 위치하여 노출됩니다. ”내 블록”은 사용자가 원하는 블록을 저장 시 저장한 블록의 목록이 노출됩니다.

3️⃣ 레이아웃 블록의 옵션 사용법

레이아웃 블록의 옵션으로는 “**① 옵션, ② 복제, ③ 저장, ④ 삭제**” 총 4가지가 존재합니다.

※ 텍스트를 클릭 시 해당 위치로 이동합니다.

service_02.gif

블록옵션.png

① 옵션 ****

  1. 클래스명

    클래스명.png

    코드를 통해 직접 커스텀을 할 때, 필요한 영역으로 블록을 감싸고 있는 최상위 부모 요소의 코드를 변경하는 옵션입니다.

  2. 사이즈

  3. 여백 ”여백” 은 상단, 하단 기준으로 나뉘며 PC의 여백, 모바일의 여백으로 나뉘어져 있습니다.

  4. 스와이퍼 슬라이드 ”스와이퍼 슬라이드” 란 웹이나 앱에서 사진이나 콘텐츠를 좌우로 넘기며 볼 수 있게 해주는 슬라이드 기능입니다.

  5. 백그라운드

② 복제

③ 저장

④ 삭제

4️⃣ 헤더푸터 블록의 옵션 사용법

<aside>

</aside>

✔️ 헤더 블록

헤더푸터 블록- 헤더.png

  1. 갖고 오려는 블록에 대한 버튼을 클릭합니다.
  2. “블록 패널 열기” 버튼을 클릭합니다.
  3. 원하는 블록을 드래그하여 끌어오거나, +버튼을 클릭하여 블록을 추가합니다.

service_02.gif

① 옵션