에디터 사용법

 

(참고 : 본 [시나브로] 시리즈에 포함된 위지위그 에디터인 HTMLArea는 InteractiveTools.com의 Mihai Bazon이 개발한 것으로서, 복사, 수정, 판매, 타 프로그램으로의 삽입 등의 모든 변형이 가능한 프리웨어입니다.)

 

  본 문제 입력/수정 화면은 텍스트만이 아니라 html 태그를 사용하여 다양한 효과를 줄 수 있습니다. 우선 문제 입력 에디터를 살펴 보겠습니다. 문제 입력 에디터는 아래 그림에서 보는 것과 같이 다양한 메뉴 버튼들이 있습니다.

  대부분의 버튼들은 일반적인 게시판의 버튼들과 기능이 비슷하기 때문에 특별히 설명드릴 필요가 없습니다. 다만 이 사용 설명 페이지에서는 문제 작성에 많이 필요한 표와 그림 삽입에 대해서만 설명드리겠습니다.

   버튼을 누르면 표 삽입 창이 뜹니다.

  이 창에서 자신이 만들고자 하는 표를 적당히 설정하고 [OK] 버튼을 누릅니다.

  그 다음 표 안에 자신이 넣고자 하는 내용을 넣으면 표 작성은 끝납니다.

  작성한 표에 대한 수정은 표 관련 아이콘을 이용하면 됩니다.

 

  이번에는 그림 삽입에 대해 알아보겠습니다. 그림 삽입은 두가지로 나누어 생각할 수 있는데, 다른 인터넷 웹 페이지에 있는 그림 파일을 링크시키는 방법과, 자신의 서버에 그림 파일을 업로드한 뒤 그 파일을 링크시키는 방법이 있습니다.
  우선 다른 인터넷 웹 페이지에 있는 그림 파일을 링크시키는 방법을 알아보겠습니다. 일단 링크시키고자 하는 그림 파일을 다른 웹 페이지에서 고릅니다. 예를들어 [다음]의 로고 파일을 링크시켜 보겠습니다.

  위 그림과 같이 원하는 그림 파일 위에 마우스를 위치시키고 오른쪽 클릭을 하고 [속성] 항목을 클릭합니다.

  그러면 위 그림과 같이 해당 그림 파일의 주소가 나타나는데, 그 주소를 마우스로 드래그해서 클립보드에 복사합니다. 그 다음 에디터의 버튼을 누릅니다.

  위 창이 뜨면 [Image URL] 항목에 아까 클립보드에 복사한 것을 붙여 넣습니다. 간단히 [ctrl - v]를 누르면 됩니다.

  그 다음 [Preview] 버튼을 누르면 새 창이 또 뜨면서 링크하고자 하는 그림 파일을 확인할 수 있습니다.

  이제 나머지 항목들을 적당히 입력하고 [OK] 버튼을 누릅니다.

  그러면 아래와 같이 입력된 모습을 보실 수 있습니다.

 

  이번에는 자신의 계정에 그림 파일을 직접 업로드 한 뒤 링크시키는 방법에 대해 알아보겠습니다. 이 작업을 하기 위해서는 우선 버튼을 눌러 에디터를 텍스트 모드로 바꿔야 합니다. 버튼을 눌러 보겠습니다.

  html 모드에서 텍스트 모드로 전환된 것을 볼 수 있을 겁니다. 이 상태에서,

  위 그림과 같이 [문제] 버튼을 클릭합니다.

  위 그림은 자신의 계정에 그림 파일을 직접 업로드하고, 업로드한 파일을 링크시키는 화면입니다. 업로드는 [찾아보기] 버튼을 클릭해 실행하면 됩니다. 이미 업로드된 파일을 링크시키려면 위 그림의 붉은색 타원(그림 파일의 이름)을 클릭하면 됩니다. 클릭해 보겠습니다.

  창이 닫히면서 기존 창에 그림파일의 태그와 경로가 자동 입력된 것을 확인하실 수 있을 겁니다. 이제 다시 버튼을 누르면 html 모드로 복귀합니다.

  방금 링크된 그림 파일이 정상적으로 나타나는 것을 확인하실 수 있습니다.

 

  참고적으로 이 에디터의 또하나의 좋은 기능에 대해 알려 드리겠습니다. 위 문제 입력 화면은 화면이 협소해 많은 내용을 입력하기가 불편합니다. 이때 버튼을 누르면 별도의 편집창이 뜹니다.

  위 화면을 최대로 키우면 모니터 크기만큼 창을 크게 할 수 있습니다. 특이한 것은 위 편집창에서 작업하는 내용은 기존창에 동시에 입력됩니다. 입력을 모두 마치면 새로 뜬 편집창의 버튼을 누릅니다.

  그러면 방금 작업한 내용이 기존 창에 입력되어 있는 것을 확인하실 수 있습니다.

  만약 문제 항목 이외의 보기 다섯 개 항목과 해설 항목에도 html 태그를 삽입하려면 문제 항목의 에디터를 이용하면 됩니다. 일단 html 모드에서 내용을 입력시키고 텍스트 모드로 변환한뒤 그 내용을 클립보드에 복사해서 보기 항목이나 해설 항목에 붙여 넣으면 됩니다.

 

  지금까지 문제 입력/수정 페이지의 문제 입력 에디터 사용법에 대해 알아 보았습니다. 나머지 버튼들은 한번씩 해 보면 금방 알 수 있는 것들이라 설명을 생략합니다.