7.1. HTML 구성요소

이번 장에서는 Studio에서 HTML 구성요소를 다루는 법에 대해 이야기한다.

7.1.1. 개관

HTML 또는 HyperText Markup Language는 웹 페이지를 만드는데 이용되는 표준 마크업 언어이다. 웹 브라우저는 HTML 코드를 사람들이 보는 일반 문서 모양으로 변환해서 보여준다.

학습자는 강좌에서 텍스트나 이미지를 볼 때 브라우저에서 형식화된 HTML 코드를 보게 된다. HTML에 대한 더 많은 정보는 Wikipedia 등을 참고한다.

7.1.1.1. HTML 구성요소

HTML 구성요소는 강좌 콘텐츠를 만드는 기초 재료이며, 텍스트, 링크, 이미지 등을 추가하고 형식화 하는데 사용된다. 콘텐츠를 제작할 때 그대로 보이는 비쥬얼 WYSIWYG 편집기를 이용해 HTML 구성요소를 만들어낼 수도 있고, 마크 업 언어를 그대로 보여주는 raw HTML 에디터를 사용할 수도 있다.

HTML 구성요소 사용 전에 강좌 개발하기HTML Markup 활용하기 을 복습하면 좋다.

HTML 구성요소에 행아웃을 추가하기 위해선 구글 Instant Hangout 도구 를 참고하면 된다.

7.1.2. HTML 구성요소 편집 옵션

HTML 작업은 다음 두 가지 방법으로 수행할 수 있다.

  • 비쥬얼 편집기

    비쥬얼 편집기를 이용하면, HTML 코드를 직접 사용하지 않고 워드프로세싱 프로그램처럼 콘텐츠를 만들거나, 편집하고, 포맷을 맞출 수 있다. 이에 쉽게 강좌 콘텐츠의 서식을 지정할 수 있고, 링크 및 이미지를 추가할 수 있다. 그러나, 비쥬얼 편집기에서 HTML 보기는 Raw HTML 편집기에서 할 수 있는 세부 제어를 제공하지 않으며, 사용자 서식 및 스크립트를 지원하지 않는다.

    HTML 요소를 추가하고 텍스트를 선택하고 편집을 클릭하면 비쥬얼 편집기가 기본으로 열린다.

  • Raw HTML 편집기

    HTML 언어를 사용하여 직접 작업하고 싶다면 raw HTML 편집기를 사용하면 된다. 만약 콘텐츠에 직접 만든 포맷이나 스크립트를 사용하고 싶다면 반드시 raw HTML 편집기를 사용해야 한다.

    HTML 구성요소를 추가하고 Raw HTML을 선택한 후 편집을 선택하면 자동으로 Raw HTML 편집기가 열린다.

두 편집기는 언제든지 돌아가며 사용할 수 있다. 자세한 사항은 HTML 구성요소 에디터 설정하기 를 참고하면 된다.

주석

다른 곳에서 복사한 내용을 비쥬얼이나 raw 편집기에 붙여넣기 한 후 꼭 검토해야 한다. 일부 어플리케이션은 자동으로 따옴표나 ‘를 바꾸기 때문에 다시 한번 확인이 필요하다.

7.1.2.1. HTML 구성요소 에디터 설정하기

  1. 강좌의 HTML 구성요소를 찾는다.
  2. 편집을 선택하고 설정을 클릭한다.
  3. 비쥬얼과 Raw 편집기 중 하나를 선택한다.
  4. 저장을 클릭하고 새로운 편집기 사용을 위해 구성요소를 다시 연다.

경고

Raw HTML 편집기로 강좌 콘텐츠 작업을 한 후 비쥬얼 편집기로 변경하게 되면, 앞서 만들었던 HTML이 삭제될 수 있다. 그래서 우선 비쥬얼 편집기로 편집을 시작하고, 사용자 HTML을 만들 필요가 있을 때 Raw HTML 편집기로 전환하여 이용할 것을 권장한다.

7.1.3. 비쥬얼 편집기

비쥬얼 편집기는 편집기 상단의 서식 버튼들을 클릭하여 서식을 지정할 수 있는 “what you see is what you get” (WYSIWYG) 인터페이스를 제공한다.

다음 이미지는 편집 옵션에 대한 설명이다.

An image of the visual editor toolbar, with numbers next to each of the formatting buttons.
  1. 선택한 단락에 대한 서식 스타일을 선택한다. HTML에선 머리글 3부터 사용할 수 있는데 이는 HTML 구성요소가 전체 페이지의 일부이며 머리글 1과 2는 다른 요소가 사용하기 때문이다. HTML 구성요소 내에서 머리글 1이나 2를 사용하면 스크린 리더 도구 등과 충돌할 수 있다.
  2. Arial, Courier New, 또는 Times New Roman 같은 글꼴을 선택한다.
  3. 선택한 텍스트를 굵게 하거나 하지 않는다. 선택한 텍스트에 <strong> 태그를 편집기가 입력한다.
  4. 선택한 텍스트를 기울게 하거나 하지 않는다. 선택한 텍스트에 <em> 태그를 편집기가 입력한다.
  5. 선택한 텍스트에 밑줄을 긋거나 긋지 않는다. 선택한 텍스트에 <span style="text-decoration: underline;"> 태그를 편집기가 입력한다.
  6. 선택한 텍스트에 색상을 적용한다. 선택한 텍스트에 <span style="color: color-hex-code;"> 태그를 편집기가 입력한다.
  7. 선택한 텍스트를 코드로 표시하거나 표시하지 않는다. 선택한 텍스트에 <code> 태그를 편집기가 입력하며 이는 고정폭 폰트로 표시된다.
  8. 글머리 기호 목록을 만들거나 만들지 않는다. 선택한 텍스트에 <ul> 로 시작되고 <li> 로 끝나는 태그를 편집기가 입력한다.
  9. 번호 매기기 목록을 만들거나 만들지 않는다. 선택한 텍스트에 <ol> 로 시작되고 <li> 로 끝나는 태그를 편집기가 입력한다.
  10. 선택한 단락의 들여쓰기를 감소시키고 증가시킨다.
  11. 선택한 단락을 인용구로 만든다. 선택한 텍스트에 <blockquote> 태그를 편집기가 입력하며 이는 고정폭 폰트로 표시된다.
  12. 선택한 텍스트에서 링크를 만든다. HTML 구성요소에 링크 추가하기 에 자세한 안내가 있다.
  13. 선택한 텍스트에서 하이퍼링크를 삭제한다.
  14. 마우스 커서 위치에 이미지를 삽입한다. HTML 구성요소에 이미지 추가하기 에 자세한 안내가 있다.
  15. HTML 언어를 검토한다.

주석

비쥬얼 편집기는 공지사항 및 학습 자료 추가하기 에는 사용할 수 없다.

7.1.3.1. 비쥬얼 편집기에서 HTML 언어 검토하기

비쥬얼 편집기에서 만든 강좌 콘텐츠에 대해 HTML 언어 검토 작업을 하려면, 편집기 도구 모음에서 HTML 을 클릭한다. 그러면 HTML 소스 코드 편집기가 열린다.

The HTML source code editor for the visual editor in Studio.

필요한 대로 HTML 코드를 편집한다.

비쥬얼 편집기에 있는 HTML 소스 코드에서는 사용자 스타일 및 스크립트를 추가할 수 없고, Raw HTML 편집기 를 사용해야 한다.

확인을 클릭하면 비쥬얼 편집기로 되돌아온다. 그러면 비쥬얼 편집기는 HTML 코드가 유효한지 확인한다. 예를 들어, 단락 태그를 닫지 않는 경우, 편집기가 자동으로 추가할 것이다.

계속 비쥬얼 편집기로 작업하며 된다.

경고

소스 코드 편집기에서 확인 을 클릭하더라도 HTML 구성요소의 변경 내용은 저장되지 않는다. 그래서, 비쥬얼 편집기에서 변경 내용을 저장하기 위해 저장 을 클릭한 후 구성 요소를 닫아야 한다. 취소 를 클릭하면 HTML 소스 코드에서 수행한 변경 내용이 사라진다.

7.1.4. Raw HTML 편집기

Raw HTML 편집기는 텍스트 편집기로서 포맷 옵션 도구는 제공하지 않는다.

The raw HTML editor.

편집할 때 명확한 HTML문법을 사용해야 한다. Raw HTML 편집기가 HTML 코드를 검사 하지 않기 때문에, 강좌의 HTML 콘텐츠를 꼼꼼하게 테스트해볼 필요가 있다.

중요

HTML 구성요소가 전체 페이지의 일부이며 머리글 1과 2는 다른 요소가 사용하기 때문에 머리글 1이나 2를 사용하면 스크린 리더 도구 등과 충돌할 수 있다. 따라서 항상 머리글 3~6을 사용해야 한다.

7.1.5. HTML 구성요소 템플릿

새로운 HTML 구성요소를 만들 때 템플릿의 목록에서 선택할 수 있다.

The list of HTML Component templates in the Studio unit page.

Raw HTML 템플릿은 Raw HTML 편집기를 사용하도록 설정되어 있다. 그 외 모든 템플릿은 비쥬얼 편집기를 사용한다

HTML 구성요소는 템플릿으로 만든다고 해도 에디터로 변경할 수 있다. HTML 구성요소 에디터 설정하기 에 안내되어 있다.

7.1.6. HTML 구성요소 만들기

  1. 신규 구성요소 추가에서 HTML을 클릭한다.

  2. 템플릿을 선택한다.

    Text 를 선택했다고 가정하면, 학습활동 아래쪽에 빈 구성요소가 나타난다.

  3. 해당 구성요소에서, 편집 을 클릭한다.

    비쥬얼 편집기에서 HTML 구성요소가 열린다.

  4. 강좌 콘텐츠를 입력하고 서식을 지정한다. 필요시 비쥬얼 편집기에서 HTML 언어 검토하기 를 해도 된다.

    An image of the HTML component in the visual editor.
  5. 구성요소 편집기의 오른쪽 상단에서 설정 을 클릭한 후, 메뉴명 에 텍스트를 입력한다. 편집기로 돌아가려면, 오른쪽 상단에서 편집기 를 클릭한다.

    각 HTML 템플릿은 기본 이름이 지정되어 있고 이를 바꿔야 학습자가 쉽게 강좌 내용을 이해할 수 있다. 만약 기본 이름을 지우고 다른 이름을 입력하지 않으면 플랫폼은 “html”이란 이름으로 저장하게 된다.

    편집기로 돌아가려면, 오른쪽 상단에서 편집기 를 클릭한다.

  6. HTML 구성요소를 저장하려면, 저장 을 클릭한다.

비쥬얼 편집기에서, 다음과 같은 작업도 할 수 있다.