<aside> 📢 에디터를 사용하기에 앞서, 에디터의 사용 방법과 에디터에 위치한 각각의 버튼에 대한 설명입니다.

</aside>

템플릿하우스는 웹 페이지 제작 과정에서 복잡하고 번거로운 일들을 대폭 줄여주는 다양한 기능들이 준비되어 있습니다.

초등학생도 한 번 보고 사용할 수 있는 블록 조립 방식, 한 공간에서 여러 팀원과 함께 개발할 수 있는 협업 기능,

개발을 더 디테일하게 커스텀 할 수 있는 강력한 코드 편집기, 웹 페이지에 생동감을 불어넣어주는 다양한 애니메이션 효과,

최종 완성된 코드를 그대로 제공하는 코드 산출물 다운로드까지 한 번에! 이것이 바로 템플릿하우스의 에디터입니다.

템플릿하우스는 위지윅(WYSIWYG) 기반의 웹 페이지 제작 도구입니다. 위지윅이란 간단히 말하면, 보이는 그대로가 결과물이라는 의미입니다.

앞으로 소개할 에디터를 통해 여러분은 웹 페이지를 제작하게 될 것이고, 작업한 웹 페이지 디자인은 결과물 그대로 웹 브라우저에서 보이게 될 것입니다.

<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️⃣ 에디터 모드 작업 환경 살펴보기

<aside> 💡 이미지를 클릭하시면 큰 화면으로 확인하실 수 있습니다.

</aside>

에디터화면매뉴얼.png

그룹 39140.png

2️⃣ 템하의 기본 단위 (rem, px, em…)

템하에서 기본적으로 제공하는 단위는 rem을 기준으로 제공합니다**.** 각 단위에 대한 설명은 아래와 같습니다.

  1. px (픽셀) : 화면에서 고정된 크기의 점 단위로, 정확한 크기를 설정할 때 사용합니다. 예를 들어, 16px은 화면에서 16개의 픽셀을 차지합니다. 설정하려는 크기 그대로 사용합니다. (예: 16px, 20px등)

  2. rem : 기준이 되는 글꼴 크기(root font size)를 기준으로 크기를 설정합니다. 템하의 기본 글꼴 크기는 10px로. 1rem = 16px 입니다. (예: 1.6rem = 16px, 2rem = 20px)

  3. em : 부모 요소의 글꼴 크기를 기준으로 크기를 설정합니다. 부모 요소의 글꼴 크기가 16px이라면 1em = 16px입니다. 원하는 크기(px) ÷ 부모 요소의 크기(px) (예: 부모 글꼴 크기가 20px이라면, 1.5em = 30px)

  4. % (퍼센트) : 부모 요소 크기에 비례해서 크기를 설정합니다. (요소 크기 ÷ 부모 요소 크기) × 100% (예: 화면 너비가 1000px이고, 50vw로 설정하면 크기는 1000 × 0.5 = 500px)

  5. vw (뷰포트 너비) : 화면 전체 높이(viewport width)를 100단위로 나눈 비율로 크기를 설정합니다. (요소 크기 ÷ 화면 너비) × 100vw (예: 화면 너비가 1000px이고, 50vw로 설정하면 크기는 1000 × 0.5 = 500px)

  6. vh (뷰포트 높이) : 화면 전체 높이(viewport height)를 100단위로 나눈 비율로 크기를 설정합니다. (요소 크기 ÷ 화면 높이) × 100vh (예: 화면 너비가 1000px이고, 50vw로 설정하면 크기는 800 × 0.25 = 200px)