HTML 편집기 사용 방법

HTML 편집기

개요

내장된 HTML 편집기를 통해 강사, 교사 및 관리자는 강좌, 메시지, 위젯 등의 콘텐츠를 직접 생성하고 편집할 수 있습니다.

이 글에서는 매력적이고 미적인 콘텐츠를 제작하기 위해 편집기의 다양한 요소에 접근하고 사용하는 방법을 알려드립니다.

정보
참고로, 비즈니스 플랫폼에서는 기본적으로 '코스'라는 용어를, 학술 플랫폼에서는 기본적으로 '클래스' 라는 용어를 사용합니다. 이 글에서는 '코스' 와 '클래스' 라는 용어를 같은 의미로 사용합니다.

툴바 메뉴

HTML 편집기는 강좌, 메시지, 위젯 등의 콘텐츠를 편집할 때 표시됩니다. 도구 모음은 메뉴 표시줄과 아이콘으로 구성되어 있으며, 이를 통해 해당 섹션의 콘텐츠를 편집할 수 있습니다.

정보
이 문서의 스크린샷은 강좌 섹션 내에서 표시되지만, 툴바는 강좌, 메시지 및 위젯에서 동일하게 작동합니다. 툴바 왼쪽에 있는 콘텐츠 빌더는 강좌를 편집할 때만 사용할 수 있습니다.

도구 모음이 강조 표시된 편집 모드에서 강좌, 모듈, 페이지 섹션

상단 메뉴 표시줄은 7개의 메뉴로 구성되어 있으며, 각 메뉴는 아래에서 더 자세히 설명합니다.

툴바 상단 메뉴가 강조 표시된 코스, 모듈, 편집 섹션

파일

파일 메뉴에는 다음과 같은 작업이 포함됩니다.

제목
설명
새 문서
텍스트 창의 모든 텍스트/이미지/링크를 지웁니다.
시사
게시된 콘텐츠의 미리보기를 보려면 팝업 창을 여세요.
인쇄
텍스트 창의 내용을 출력합니다.

편집하다

편집 메뉴에는 다음과 같은 작업이 포함됩니다.

제목
설명
끄르다
최근 작업을 되돌리세요.
다시 하다
최근 작업을 다시 실행하세요.
자르다
선택한 텍스트/이미지를 제거하고 클립보드에 저장합니다.
복사
선택한 텍스트/이미지를 복사하여 클립보드에 저장합니다.
반죽
클립보드에서 텍스트/이미지를 붙여넣으세요.
텍스트로 붙여넣기
클립보드 내용을 서식 없이 텍스트로만 붙여넣습니다.
모두 선택하세요
텍스트 창의 모든 내용을 선택/강조 표시하세요.
찾기 및 바꾸기
단어나 구를 찾아서 새로운 단어나 구로 바꾸세요(해당하는 경우).

보다

보기 메뉴에는 텍스트 창 내의 텍스트와 문자를 보기 위한 다음과 같은 작업이 포함되어 있습니다.

제목
설명
소스 코드
텍스트 창에서 소스 코드를 보고 편집할 수 있습니다.
숨겨진 문자를 표시합니다
공백 및 줄 바꿈과 같은 보이지 않는 문자를 표시합니다.
블록 표시
텍스트 창 안에 단락 블록을 표시합니다.
시사
게시된 콘텐츠의 미리보기를 보려면 팝업 창을 여세요.

끼워 넣다

삽입 메뉴에는 이미지, 비디오, 표, 링크 등을 삽입하기 위한 다음과 같은 작업이 포함되어 있습니다.

제목
설명
링크
URL에 대한 하이퍼링크를 삽입하세요.
메디아
미디어 파일을 삽입/포함하세요.
테이블 표를 삽입하고 만드세요.
특수 문자 특수 문자를 삽입하세요.
이모티콘 이모티콘을 삽입하세요.
횡선
가로선을 삽입하세요.
페이지 나누기
새 페이지를 시작하려면 줄 바꿈을 삽입하세요.
비파괴 공간
페이지가 나뉘지 않도록 공백을 삽입하세요.
닻
원하는 위치에 앵커/책갈피를 삽입하세요.
템플릿 삽입
저장된 템플릿을 삽입하세요.
템플릿으로 저장
선택한 텍스트를 템플릿으로 저장하세요.
날짜/시간
드롭다운 메뉴에서 날짜 또는 시간 옵션을 선택하세요.
방정식 편집
선택한 수식을 편집하려면 클릭하세요.
이미지 업로드
이미지를 업로드하려면 클릭하세요.
파일 업로드
파일을 업로드하려면 클릭하세요.
웹 회의를 만드세요
웹 회의를 텍스트에 추가하려면 클릭하세요*.
오디오를 녹음하세요
클릭하면 텍스트 창에 직접 오디오를 녹음할 수 있습니다.
동영상 녹화
클릭하면 텍스트 창에 바로 동영상 녹화가 시작됩니다.
정보
* 웹 회의 만들기 옵션이 표시되려면 먼저 앱 센터에서 웹 회의 앱을 설치해야 합니다.

체재

서식 메뉴에는 텍스트 서식을 지정하기 위한 다음과 같은 작업이 포함되어 있습니다.

제목
설명
용감한
선택한 텍스트를 굵게 표시합니다.
이탤릭체
선택한 텍스트를 이탤릭체로 표시합니다.
밑줄
선택한 텍스트에 밑줄을 그으세요.
취소선
선택한 텍스트에 취소선을 그으세요.
어깨 기호
선택한 텍스트를 위첨자로 서식 지정합니다.
아래첨자
선택한 텍스트를 아래첨자로 서식 지정합니다.
암호
선택한 텍스트를 코드 형식으로 지정합니다.
블록
드롭다운 메뉴에서 적절한 블록 서식을 삽입하세요.
글꼴
드롭다운 메뉴에서 다른 글꼴을 선택하세요.
글꼴 크기
드롭다운 메뉴에서 글꼴 크기를 선택하세요.
맞추다
드롭다운 메뉴에서 텍스트 정렬 스타일을 선택하세요.
선 높이
드롭다운 메뉴에서 줄 간격을 선택하세요.
들여쓰기 증가
텍스트 또는 단락을 오른쪽으로 들여쓰기하십시오.
들여쓰기 감소
텍스트 또는 단락을 왼쪽으로 이동합니다.
텍스트 색상
드롭다운 메뉴에서 원하는 텍스트 색상을 선택하세요.
배경색
드롭다운 메뉴에서 배경색을 선택하세요.
서식 지우기
선택한 텍스트의 서식을 지웁니다.

도구

도구 메뉴에는 다음과 같은 작업이 포함됩니다.

제목
설명
소스 코드
소스 코드를 보거나 편집할 수 있습니다.
단어 수 단어 수와 문자 수를 확인하세요.

테이블

테이블 메뉴에는 테이블을 삽입하고 테이블 구조를 수정하는 다음과 같은 작업이 포함되어 있습니다.

제목
설명
테이블
표를 삽입하세요.
셀 드롭다운 메뉴에서 선택한 셀에 대한 수정 옵션을 보여줍니다.
열
드롭다운 메뉴에서 선택한 행에 대한 수정, 삭제 및/또는 삽입 옵션을 사용할 수 있습니다.
열
드롭다운 메뉴에서 선택한 열에 대한 수정, 삭제 및/또는 삽입 옵션을 사용할 수 있습니다.
테이블 속성
테이블의 너비, 높이, 테두리 등의 속성을 보고 수정할 수 있습니다.
테이블 삭제
선택한 테이블을 삭제합니다.

툴바 보조 메뉴

기본 메뉴 아래에는 추가 서식 지정을 위한 드롭다운 옵션과 아이콘이 있는 도구 모음이 있습니다.

툴바 보조 메뉴 아이콘이 강조 표시된 코스, 모듈, 편집 섹션

실행 취소 및 다시 실행

  1. 이전 작업을 취소하려면 실행 취소 아이콘을 클릭하세요.
  2. 이전 아이콘을 다시 실행하려면 다시 실행 아이콘을 클릭하세요.
실행 취소 및 다시 실행 아이콘

단락 및 제목 스타일

  1. 제목 스타일 드롭다운 메뉴를 클릭하여 텍스트에 서식과 스타일을 적용하세요.

강좌, 모듈, 편집 섹션(제목 스타일 메뉴가 활성화되고 강조 표시된 상태)

글꼴 스타일

  1. 글꼴 드롭다운 메뉴를 클릭하여 텍스트의 글꼴을 변경하세요.
강좌, 모듈, 편집 섹션에서 글꼴 스타일 메뉴가 활성화되고 강조 표시된 상태입니다.

글꼴 크기

    1. 글꼴 크기 드롭다운 메뉴를 클릭하여 텍스트 크기를 변경하세요.
    강좌, 모듈, 편집 섹션에서 글꼴 크기 메뉴가 활성화되고 강조 표시된 상태입니다.

    글꼴 형식

    1. 텍스트를 굵게 표시하려면 굵게 표시 아이콘을 클릭하세요.
    2. 텍스트를 기울임꼴로 표시하려면 기울임꼴 아이콘을 클릭하세요.
    3. 텍스트에 밑줄을 긋기 위해 밑줄 아이콘을 클릭하세요.
    굵게, 기울임꼴, 밑줄 아이콘

    텍스트 색상

      1. 글자 색상 아이콘을 클릭하여 글꼴 색상을 선택/변경하세요.
      강좌, 모듈, 편집 섹션에서 텍스트 색상 메뉴가 활성화되고 강조 표시됨

      텍스트 정렬

      1. 정렬 아이콘을 클릭하여 텍스트를 정렬하세요.

      강좌, 모듈, 편집 섹션에서 정렬 메뉴가 활성화되고 강조 표시된 상태입니다.

      글머리 기호 목록

      1. 글머리 기호 목록 아이콘을 클릭하여 글머리 기호 목록을 만들고 서식을 지정하세요.
      강좌, 모듈, 편집 섹션(글머리 기호 목록 메뉴가 활성화되고 강조 표시됨)

      번호가 매겨진 목록

      1. 번호 매기기 목록 아이콘을 클릭하여 글머리 기호 또는 번호 매기기 목록을 만들고 서식을 지정하세요.
      강좌, 모듈, 편집 섹션(번호 목록 메뉴가 활성화되고 강조 표시됨)

      이미지 업로드 및 파일 업로드

      1. 이미지를 업로드하려면 이미지 업로드 아이콘을 클릭하세요.
      2. 파일을 업로드하려면 파일 업로드 아이콘을 클릭하세요.
      이미지 업로드 및 파일 업로드 아이콘

      서식 지우기

      1. 콘텐츠를 복사하여 붙여넣을 때 적용되었을 수 있는 스타일을 지우려면 서식 지우기 아이콘을 클릭하세요.
      서식 지우기 아이콘

      배경색

      1. 텍스트/이미지에 강조 표시를 추가하려면 배경색 아이콘을 클릭하세요.
      강좌, 모듈, 편집 섹션에서 배경색 메뉴가 활성화되고 강조 표시됨

      고급 도구 모음

      추가 기능을 사용하려면 다음을 참조하세요.

      1. 더보기 를 클릭하세요 고급 도구 모음을 표시하려면 아이콘을 클릭하십시오 .

      강좌, 모듈, 편집 섹션(더보기 아이콘이 강조 표시됨)

      고급 도구 모음은 보조 도구 모음 아래에 표시되며, 아래에서 설명하는 추가 옵션을 포함합니다.

      고급 도구 모음 아이콘이 강조 표시된 코스, 모듈, 편집 섹션

      들여쓰기 및 가로선

      1. 들여쓰기 줄이기 아이콘을 클릭하여 텍스트의 들여쓰기를 줄이세요.
      2. 들여쓰기 증가 아이콘을 클릭하여 텍스트를 들여쓰기하세요.
      3. 가로선을 삽입하려면 가로선 아이콘을 클릭하세요.
      들여쓰기 줄이기, 들여쓰기 늘리기 및 가로선 아이콘

      이모티콘

      1. 이모티콘을 클릭하세요 이모지 아이콘 이모티콘 키보드를 열려면 아이콘을 클릭하세요.
      2. 이모티콘을 클릭하여 삽입하세요.
      강좌, 모듈, 편집 섹션(이모지 팝업 화면 포함)

      특수 문자

      1. 특수 문자를 클릭하세요 특수 문자 아이콘 특수 문자 팝업 창을 열려면 아이콘을 클릭하십시오.
      2. 특수 문자를 클릭하여 삽입하세요.

      강좌, 모듈, 특수 문자 팝업 화면이 있는 편집 섹션

      고급 아이콘

      1. 삽입/편집 링크 아이콘을 클릭하세요 임의의 URL에 링크를 삽입합니다.
      2. 미디어 삽입/편집 아이콘을 클릭하세요. 임의의 URL에 대한 링크를 삽입/포함합니다.
      3. 수식 삽입/편집 아이콘을 클릭하세요. 임의의 URL에 대한 링크를 삽입/포함합니다.
      4. 템플릿 삽입 아이콘을 클릭하세요. 템플릿 아이콘 삽입 템플릿을 삽입하려면.
      5. 소스 코드 아이콘을 클릭하세요 소스 코드 아이콘 현재 페이지의 소스 코드를 보려면.
      6. 오디오 녹음 아이콘을 클릭하세요 오디오 녹음 아이콘 강의 페이지에 직접 오디오를 녹음하려면.
      7. 동영상 녹화 아이콘을 클릭하세요 동영상 녹화 아이콘 강좌 페이지에 직접 영상을 녹화할 수 있습니다.
      1. 웹 회의 만들기 아이콘을 클릭하세요. 웹 회의 아이콘 만들기 드롭다운 옵션 중 하나를 사용하여 웹 회의 링크를 생성합니다.
        1. 참고 - 사용하시는 플랫폼에 설치된 웹 회의 앱만 표시됩니다.

      웹 회의 생성 메뉴가 활성화되고 강조 표시된 상태에서 강좌, 모듈, 편집 섹션을 엽니다.

      모범 사례

      편집기를 최대한 활용하려면 다음 모범 사례를 참고하세요.

      • 새 단락 대신 줄 바꿈을 삽입하려면 Shift + Enter 키를 누르십시오.
      • HTML 위젯을 삽입할 때는 먼저 소스 코드에서 텍스트 창을 확인하세요.
        • '보기 ' 드롭다운 메뉴를 클릭하세요.
        • 소스 코드를 보려면 < >를 클릭하세요.
      • 서식 오류를 방지하려면 타사 콘텐츠를 일반 텍스트로 붙여넣으세요.
      • 표의 테두리를 보이지 않게 하려면:
        • 테이블을 선택하세요.
        • 테이블 속성을 클릭하세요.
        • 팝업 창의 일반 탭에서 테두리 너비를 "0"으로 설정하세요.
        • 고급 탭에서 테두리 스타일을 "숨김" 또는 "없음"으로 선택합니다.

      강좌, 모듈, 편집 섹션에서 표가 선택되고 표 속성 아이콘이 강조 표시됩니다.

      맞춤법 검사기

      편집기에는 맞춤법 검사 기능이 포함되어 있어 철자가 틀린 단어에 빨간색 줄을 표시합니다. 맞춤법 오류를 수정하려면 다음 단계를 따르세요.

      1. CTRL 키를 누르세요 + 마우스 오른쪽 버튼을 클릭하세요 .
      2. 제시된 목록에서 올바른 철자를 선택하세요.
      맞춤법 검사 메뉴가 활성화되고 강조 표시된 강좌, 모듈, 편집 섹션

      임베딩 변수

      {{변수 이름}} 형식을 사용하여 수업 페이지에 변수를 삽입할 수 있습니다. 이를 통해 사용자와 강좌에 맞게 콘텐츠를 맞춤 설정할 수 있습니다.

      콘텐츠 페이지에서 다음 변수들을 사용할 수 있습니다.
      • {{class_custom_field_1}}
      • {{class_custom_field_2}}
      • {{class_finish_date}}
      • {{class_id}}
      • {{class_location}}
      • {{class_name}}
      • {{클래스_이름_링크}}
      • {{class_start_date}}
      • {{completed_at_utc}}
      • {{course_code}}
      • {{크레딧}}
      • {{수업일수}}
      • {{남은일수}}
      • {{deactivate_students_after}}
      • {{organization_id}}
      • {{조직명}}
      • {{section_code}}
      • {{site_name}}
      • {{site_name_with_url}}
      • {{teacher_name}}
      • {{teacher_name_with_link}}
      • {{user_email}}
      • {{user_first_name}}
      • {{user_full_name}}
      • {{사용자_전체_이름_링크}}
      • {{user_id}}
      • {{user_last_name}}
      • {{사용자가 선호하는 연락 방법}}
      • {{user_ssn}}
      • {{userid}}
      • {{왜}}

      강좌, 모듈, 편집 섹션(변수 예시가 강조 표시됨)

      사이즈 측정 영상

      HTML 편집기에서 동영상을 링크로 추가하는 경우, 다음 HTML 코드를 사용하여 동영상 크기를 설정할 수 있습니다.
      <a width='100' height='700'>링크</a>.
      1. 동영상 크기가 자동으로 조정되도록 하려면 너비 또는 높이 값 중 하나를 생략하면 됩니다.
      2. 동영상의 크기를 설정할 때 백분율 값을 사용할 수도 있습니다. 예를 들어, <width='100%' >와 같이 사용할 수 있습니다.

      이미지 편집

      편집기는 이미지가 업로드된 후 다양한 편집 옵션을 제공합니다. 이미지를 편집하려면 다음 단계를 따르세요.

      1. 이미지를 클릭하세요.
      2. 옵션 메뉴가 나타납니다.
      상
      설명
      반시계 방향으로 회전 아이콘
      		 이미지를 시계 반대 방향으로 회전시키세요
      시계 방향으로 회전 아이콘
      		 이미지를 시계 방향으로 회전하세요
      이미지를 가로로 뒤집기 아이콘
      		 이미지를 가로로 뒤집으세요
      이미지를 세로로 뒤집기 아이콘 이미지를 세로로 뒤집으세요
      이미지 자르기 아이콘
      		 이미지 자르기
      이미지 편집 아이콘
      		 이미지 속성 편집

      강좌, 모듈, 편집 섹션에서 이미지가 선택되고 이미지 편집 도구 모음이 활성화된 상태입니다.

      이미지 속성 편집 아이콘을 선택하면 이미지 삽입/편집 팝업 창이 나타납니다.
      1. 출처 : 이미지의 출처를 표시합니다.
      2. 대체 설명 : 이 설명은 시각 장애가 있는 사용자를 돕기 위해 화면 낭독기가 읽어줍니다.
      3. 가로 및 세로 : 이미지 크기를 조정합니다.
        1. 참고: 이미지의 가로/세로 비율을 유지하려면 잠금 아이콘을 사용하세요.


      새 이미지를 추가할 때 화면 낭독기를 위한 설명도 추가할 수 있습니다.
      1. 이미지 설명란 에 설명을 입력하세요.

      이미지 업로드 팝업

      콘텐츠 템플릿

      콘텐츠 템플릿을 사용하면 HTML 조각을 리소스 카탈로그에 저장한 다음 나중에 콘텐츠 영역에 쉽게 삽입할 수 있습니다. 이 기능을 활용하여 콘텐츠 영역에서 자주 사용하는 공통 콘텐츠 요소 라이브러리를 만들 수 있습니다.

      콘텐츠 템플릿에 HTML 조각을 추가하려면 다음 단계를 따르세요.

      1. HTML 편집기에서 텍스트 및/또는 이미지를 선택하세요.
      2. 마우스 오른쪽 버튼을 클릭하세요.
      3. '템플릿으로 저장'을 선택하세요.

      강좌, 모듈, 텍스트 및 이미지가 포함된 편집 섹션이 선택되어 있고, 마우스 오른쪽 클릭 메뉴에서 '템플릿으로 저장'이 강조 표시되어 있습니다.

      1. 템플릿에 제목을 입력하세요.
      2. 확인 을 클릭하세요.
      3. 콘텐츠 템플릿은 개인 라이브러리에 저장됩니다.

      템플릿으로 저장 팝업

      저장된 콘텐츠 템플릿에 액세스하려면 다음 단계를 따르세요.

      1. 왼쪽 탐색 모음에서 리소스를 클릭하세요.
      2. 팝업 메뉴에서 카탈로그를 클릭하세요.
      3. 검색 패널에서 리소스 유형 > 콘텐츠 템플릿 으로 필터링하세요.
      4. 콘텐츠 템플릿을 클릭하세요.

      리소스, 검색 패널에서 리소스 유형 섹션이 강조 표시된 카탈로그 페이지

      콘텐츠 템플릿이 표시됩니다. 콘텐츠 템플릿에 대한 자세한 내용을 보려면 다음을 참조하세요.
      1. 세부 정보를 클릭하세요.

      리소스, 콘텐츠 템플릿 팝업


      이제 콘텐츠 섹션을 업데이트할 수 있습니다.
      1. 콘텐츠를 수정하려면 '편집'을 클릭하세요 .
      2. 템플릿을 제거하려면 삭제를 클릭하세요.

      리소스, 편집 및 삭제 아이콘이 강조 표시된 콘텐츠 템플릿

      '수정'을 클릭하면 콘텐츠를 업데이트하고 다른 사용자와 공유할 수 있습니다.
      1. 콘텐츠 템플릿을 다른 사용자와 공유하려면 개인 , 조직 또는 비즈니스 라이브러리를 선택하세요.
      2. 내용을 편집한 후 저장을 클릭하세요.

      리소스, 콘텐츠 템플릿 편집 화면

      콘텐츠 템플릿의 사본을 섹션에 삽입하려면 다음 단계를 따르세요.
      1. 해당 섹션에 접속하세요.
      2. 마우스 오른쪽 버튼을 클릭하세요.
      3. 삽입 템플릿을 선택하세요.
      4. 드롭다운 목록에서 템플릿을 선택하세요.
      5. 저장 버튼 을 클릭하세요.
      강좌, 모듈, 편집 섹션에서 마우스 오른쪽 클릭 메뉴에 템플릿 삽입이 강조 표시됩니다.