> For the complete documentation index, see [llms.txt](https://help.goorm.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.goorm.io/ko/edu-lecturer/03.lesson-contents/theory-lesson.md).

# 이론 중심 강의 편집하기

'**이론 중심 강의**' 편집화면 입니다. \
'**이론 중심 강의**' 는 수강자에게 개념과 이론 전달을 중심으로 하는 강의 컨텐츠 형식입니다. 

![](/files/-MLMHIrO4-VYzfLPUFln)

\
\
이론 중심 강의 텍스트, 이미지, 동영상, 소스 코드, 문제(객관식, 주관식, O/X 등), 웹오피스 문서 등 \
다양한 컴포넌트를 활용하여 수강자에게 기본 개념에 대해 효과적으로 설명할 수 있습니다.

![](/files/-Lu5YiuBAL6E5emzi583)

### 1. 텍스트/HTML

**`텍스트/HTML`** 컴포넌트를 클릭하면 WYSIWYG 에디터가 추가됩니다. 강의 컨텐츠를 구성하는 \
가장 기본적인 에디터로써 클릭 시 작성 중인 컨텐츠 최하단에 에디터가 생성됩니다.

> 구름EDU에서는 오픈소스 WYSIWYG 에디터인 [Summernote](http://summernote.org/)를 사용하고 있습니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_dRcMg_1517887191291/49f25187d610bf9408f244e2c6fa59a5ecf78a7104ce3e76717489f1db89d9be.png)

에디터에서 기본적으로 제공하는 기능은 다음과 같습니다.

* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FqXOeBKkxsL2oifUX1jv2%2Ffile.png?alt=media" alt="" data-size="line"> **코드 보기** : 현재 편집 내용을 HTML 소스 코드 보여주며, 이를 편집할 수 있는 상태로 전환합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2F7Ay7EqjszouuNhme6wNo%2Ffile.png?alt=media" alt="" data-size="line"> **스타일** : \<h1>, \<p>, \<blockquote>와 같은 기본적인 스타일을 지정합니다.&#x20;
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FSOTyav63d2csK9HOVO1X%2Ffile.png?alt=media" alt="" data-size="line"> **굵게** : 선택 영역의 글자를 굵게 만듭니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FVdlZAXXO2Z8Mq7mGwnr2%2Ffile.png?alt=media" alt="" data-size="line"> **밑줄** : 선택 영역의 글자에 밑줄을 긋습니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FiOPpdhd9vo8nd5C0Xbln%2Ffile.png?alt=media" alt="" data-size="line"> **글자 효과 없애기** : 선택 영역의 스타일을 초기화합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FAOBhyqd7hRECRb7irWS0%2Ffile.png?alt=media" alt="" data-size="line"> **Formula :** Tex 문법을 사용하여 수식을 입력합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FxV5Ep6j0CawnEAMAM2FF%2Ffile.png?alt=media" alt="" data-size="line"> **글꼴** : 선택 영역에 글꼴을 지정합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FV0RhJcVhRDwTkws0jJ1H%2Ffile.png?alt=media" alt="" data-size="line"> **글자 크기** : 선택 영역의 글자 크기를 지정합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FHj5pFMN07QtzVZbPFH5a%2Ffile.png?alt=media" alt="" data-size="line"> **글자 색상** : 선택 영역의 글자색 또는 배경색을 지정합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FniapypY225PTZgp0Plhe%2Ffile.png?alt=media" alt="" data-size="line"> **글머리 기호** : 선택 영역에 글머리 기호를 넣거나 현재 위치에서 글머리 기호 넣기를 시작합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FsZjTe1p4TvkHyz1yX5wj%2Ffile.png?alt=media" alt="" data-size="line"> **번호 매기기** : 선택 영역을 번호 매기기 스타일로 바꾸거나 \
  &#x20;                              현재 위치에서 번호 매기기를 시작합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FCW88dkIJZjZNnA8GBUiO%2Ffile.png?alt=media" alt="" data-size="line"> **문단 정렬** : 선택 영역 또는 커서 위치에서 문단 정렬을 지정합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FfsLVBwMk5sa4LneE2eMq%2Ffile.png?alt=media" alt="" data-size="line"> **구분선 추가** : 커서 위치에 가로 구분선을 삽입합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FjiAXxG2T4QSglUjRqhtK%2Ffile.png?alt=media" alt="" data-size="line"> **테이블** : 커서 위치에 테이블을 삽입합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FgWz42cwx2smmeKsnqW2S%2Ffile.png?alt=media" alt="" data-size="line"> **링크** : 지정된 영역 또는 현재 위치에 하이퍼링크를 삽입합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2F9Y2ABVEz2EoypweMpj0X%2Ffile.png?alt=media" alt="" data-size="line"> **전체화면** : 편집화면을 전체화면으로 변경합니다.
* <img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FWxb9UEZfPGpsBP6KQwRV%2Ffile.png?alt=media" alt="" data-size="line"> **스플릿** : 에디터를 컴포넌트 커서 기준으로 2개의 에디터로 분할합니다.

### 2. 소스코드

'**소스코드**' 컴포넌트를 클릭하면 아래 화면과 같은 다이얼로그가 나타납니다.

![](/files/-Lu5YpEQjq7uMMesZIGr)

'**소스코드 삽입**' 창에 삽입하고 싶은 코드의 언어를 선택하고 코드를 입력한 뒤에 \
삽입 버튼을 클릭하면 아래와 같은 형태로 소스코드가 입력됩니다.&#x20;

코드 삽입 시 줄 번호 표시를 체크하면 해당 소스 코드 출력 시 좌측에 줄 번호도 함께  출력됩니다.&#x20;

코드 삽입 시 바로 실행 가능하도록 설정을 체크 하면 해당 소스 코드의 우측 상단에 \
실행을 위한 버튼이 나타나며, 수강자들은 이를 클릭해서 바로 실행할 수 있게 됩니다.

![](/files/-LrsZa6DXOTqudH62uz9)

### 3. 마크다운

'**마크다운**' 컴포넌트 클릭하면 마크다운 문법을 이용해서 문서 양식과 \
TeX 문법을 통해 수식을 입력할 수 있습니다.

* [마크다운 문법 자세히 알아보기](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
* [사용 가능한 TeX 문법](http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm#alphaList)

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_dRcMg_1517887191291/1515139573495_%E1%84%8B%E1%85%B5%E1%84%85%E1%85%A9%E1%86%AB%20%E1%84%8C%E1%85%AE%E1%86%BC%E1%84%89%E1%85%B5%E1%86%B7%20%E1%84%80%E1%85%A1%E1%86%BC%E1%84%8B%E1%85%B4%20%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5-%E1%84%86%E1%85%A1%E1%84%8F%E1%85%B3%E1%84%83%E1%85%A1%E1%84%8B%E1%85%AE%E1%86%AB%20%E1%84%89%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%B5%E1%86%B8.png)

### 4. 이미지

'**이미지**' 컴포넌트를 통해 이미지를 업로드 할 수 있습니다. \
저장된 이미지를 찾아서 업로드 하거나 이미지 URL을 통해 업로드할 수 있습니다.

### 5. PDF

'**PDF**' 컴포넌트는 PDF 문서를 업로드하여 강의에 포함시켜주는 컴포넌트입니다.

### 6. 동영상 링크

'**동영상 링크**' 컴포넌트는 다양한 동영상 스트리밍 서비스에서 제공하는 URL을 통해 \
동영상 삽입을 가능하게 합니다.

### 7. 동영상 업로드

'**동영상 업로드**' 컴포넌트는 보유중인 동영상 파일을 업로드 하여 강의에 포함시켜주는 컴포넌트입니다.

### **8. 슬라이드쉐어**

'**슬라이드쉐어**' 컴포넌트를 통해 '<http://www.slideshare.net/>'에 있는 슬라이드를 강의에 넣을 수 있습니다. 위의 기능들과 마찬가지로 URL을 입력하면 됩니다.

### **9. 문서 뷰어**

'**문서 뷰어**' 컴포넌트를 통해 저장된 ppt, pptx, doc 파일을 강의 내용에 포함시킬 수 있습니다.

### **10. 넷피스 문서**

'**넷피스 문서**' 컴포넌트(지원 예정)

### **11. 구글 문서**

'**구글 문서**' 컴포넌트를 통해 구글 드라이브에 있는 **문서**, **드로잉**, **스프레드시트**, **프레젠테이션** 등의 \
문서를 URL 입력을 통해 강의 내용에 포함시킬 수 있습니다.<br>

### **12. 문제 삽입**

'**문제 삽입**' 컴포넌트를 통해 수강자가 학습 내용을 제대로 이해하고 있는 지 확인할 수 있도록 \
객관식, 주관식, O/X, 선긋기, 서술형, 파일 제출 문제를 삽입할 수 있습니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_dRcMg_1517887191291/c2c715ea1e1a70a06a881f356cc7279809b0e1650014c860254a8b63cd7d1004.png)

삽입할 문제는 '**문제 관리**' 메뉴에서 이미 만들어진 문제들 중에서 선택 가능합니다. \
프로그래밍 문제를 제외한 객관식, 주관식, O/X, 선긋기, 서술형, 파일 제출 문제를 \
선택하여 삽입할 수 있습니다. \
\
추가할 문제를 모두 선택한 후, '**`선택 항목 삽입`**' 버튼을 누르면 \
최종적으로 선택된 문제들이 순서대로 에디터 내부에 입력됩니다.&#x20;

강의 작성 또는 편집 화면 상에서 버튼을 이용하여 추가되는 모든 컴포넌트는 \
항상 마지막으로 수정한 컴포넌트 아래에 입력되는 점을 유의하셔야 합니다.

컴포넌트들의 순서를 바꾸기 위해서는 각 컴포넌트 좌측 상단에 위치한\
&#x20;'<img src="https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lq-Q9LciN1X9EABxGkt%2Fuploads%2FeVmMMvpZ9Pq6NOcZa2yA%2Ffile.png?alt=media" alt="" data-size="original">' 버튼을 누른 상태로 드래그하여 위치를 조정할 수 있습니다.

![](/files/-Lu5Zk5jvOG3kaPgkofb)

작성 도중에 현재까지 작성한 내용을 살펴보고 싶다면, 작성한 내용을 저장한 뒤에 페이지 우측 상단의 \
'**`미리보기`**' 버튼을 눌러 현재까지 작성한 내용을 수강자 입장에서 확인해볼 수 있습니다.

![](/files/-Lu5ZqTQL0eOOnUdDPW5)