- 미궁게임
전체미궁- 게시판
- 미궁 제작팁
문제 제작 에디터 사용 방법 보기
| 나모 웹에디터 등 다른 에디터를 이용하는 방법 | |||||||||||||||||||||||||
1. 나모 웹에디터 등에서 작성된 소스를 <body> 태그 안의 소스만 복사합니다. 2. 에디터의 HTML탭을 눌러서 복사한 내용을 붙여넣습니다.  3. Editor탭을 눌러서 적용된 내용을 확인합니다.  4. 전체 배경색은 에디터 위에 있는 [배경색]을 선택하여 바꿔주세요.  * 기존 이미지는 src 부분을 맞게 바꿔야 합니다. 해당 사항은 [이미지를 삽입하는 방법]을 확인해주세요. * HTML5부터 <font> 태그의 지원이 중단되어 저장한 후에는 <span> 태그로 변경되니 주의해주세요. |
|||||||||||||||||||||||||
| 이미지를 삽입하는 방법 | |||||||||||||||||||||||||
1. 에디터 오른쪽 상단의  을 누릅니다.2. [파일 선택]을 눌러서 업로드할 이미지 파일을 선택한 후 [확인] 버튼을 누릅니다.  3. 업로드한 이미지를 확인하고 가로세로 사이즈와 설명을 입력한 후 [에디터에 삽입하기]를 누릅니다.  4. 에디터에 업로드한 이미지가 삽입됩니다.  5. HTML탭을 눌러서 이미지의 소스를 확인할 수 있습니다. <img src="/labyrinth/upload/quest/0/image.png" title="힌트!" width="200" height="200" alt="힌트!">
* 업로드 이미지 확인에서 입력한 값이 설정되어 있습니다.* 가로 : width / 세로 : height / 설명 : title, alt * 업로드한 이미지의 주소는 src에 해당합니다. src에 다른 웹 이미지 주소를 입력해서 사용할 수도 있습니다. |
|||||||||||||||||||||||||
| 음악을 삽입하는 방법 | |||||||||||||||||||||||||
1. 에디터 오른쪽 상단의  을 누릅니다.2. [파일 선택]을 눌러서 업로드할 음악 파일을 선택한 후 [확인] 버튼을 누릅니다.  3. 에디터에 업로드한 음악이 삽입됩니다.  4. HTML탭을 눌러서 파일의 소스를 확인할 수 있습니다. <iframe src="/labyrinth/upload/quest/0/audio.mp3" width="" height="" frameborder="0" allow="autoplay 'none'"></iframe>
* width:가로사이즈, height:세로사이즈, frameborder:테두리사이즈* width, height을 0으로 설정하면 비표시되어 배경음악으로 사용 가능합니다. * allow="autoplay 'none'":자동재생 안됨 (allow="autoplay":자동재생) * 업로드한 파일의 주소는 src에 해당합니다. src에 다른 웹페이지에 업로드된 파일의 주소를 입력해서 사용할 수도 있습니다. * 브라우저에 따라 자동재생이 안될 수 있습니다. |
|||||||||||||||||||||||||
| 유튜브 영상을 삽입하는 방법 | |||||||||||||||||||||||||
|
1. 유튜브 동영상에 마우스 오른쪽 클릭을 하여 [<>소스코드복사]를 누르면 아래와 같은 코드가 복사됩니다. <iframe width="1280" height="720" src="https://www.youtube.com/embed/영상고유값" frameborder="0" allow="autoplay; encrypted-media;" allowfullscreen></iframe> 2. 모바일에서는 [공유 - 링크복사]를 선택하면 아래와 같은 링크가 복사됩니다. https://youtu.be/영상고유값
위 주소에서 [영상고유값]부분을 1번의 코드의 [영상고유값]부분에 넣으면 똑같이 사용할 수 있습니다.3. src의 [영상고유값]뒤에 매개변수를 추가하여 자동재생과 반복 등을 설정할 수 있습니다. src="https://www.youtube.com/embed/영상고유값?autoplay=1&amb;loop=1" 4. HTML 작성모드에 해당 내용을 입력하고 Editor탭을 눌러서 확인해주세요. * 브라우저에 따라 자동재생이 안될 수 있습니다. |
|||||||||||||||||||||||||
| 클릭으로 다음 페이지로 이동하는 방법 | |||||||||||||||||||||||||
|
사용자가 정답란에 입력을 하지 않고 링크를 클릭해서 다음페이지로 넘어가게 하는 방법입니다. 1. HTML탭을 눌러 아래와 같은 링크를 입력합니다. <a href="javascript:goNextPage('정답');">링크</a>
* [정답]부분에는 실제 정답을 써주세요. 예를 들어 정답이 사과라면 javascript:goNextPage('사과'); 라고 입력해야합니다.* 정답이 여러 개일 경우에는 하나만 써주세요. 예를 들어 정답이 사과,apple이라면 둘 중 하나만 선택해서 javascript:goNextPage('사과'); 라고 입력해야 합니다. * [링크]부분에 표시할 문구를 써주세요. img태그를 넣어서 이미지를 클릭하게 할 수도 있습니다. 2. 해당 사항은 미리보기를 통해 확인이 안 되니 오타가 나지 않게 잘 입력해주세요. [테스트] 미궁풀기를 통해 잘 넘어가는지 꼭 확인해주세요. |
|||||||||||||||||||||||||
| 클릭으로 특정 페이지로 이동하는 방법 | |||||||||||||||||||||||||
|
사용자가 링크를 클릭해서 특정 문제 페이지로 넘어가게 하는 방법입니다. 1. HTML탭을 눌러 아래와 같은 링크를 입력합니다. <a href="javascript:goPage('문제번호');">링크</a>
* [문제번호]부분에는 실제 문제번호를 써주세요.* 해당 문제의 이후의 문제는 지정 불가하며, 이전 문제만 가능합니다. * [링크]부분에 표시할 문구를 써주세요. img태그를 넣어서 이미지를 클릭하게 할 수도 있습니다. * 문제번호는 아래와 같이 이동하고자 하는 문제의 수정화면에서 확인가능합니다.  2. 해당사항은 미리보기를 통해 확인이 안 되니 오타가 나지 않게 잘 입력해주세요. [테스트] 미궁풀기를 통해 잘 넘어가는지 꼭 확인해주세요. |
|||||||||||||||||||||||||
| 플레이어 닉네임을 표시하는 방법 | |||||||||||||||||||||||||
|
HTML작성모드로 문자열 태그에 'laby-nickname' 속성을 넣으면 해당 태그의 문자열이 플레이어의 닉네임으로 치환되어 표시됩니다. 안녕 <span laby-nickname>철수</span>
* 회원 : 안녕 닉네임* 비회원 : 안녕 철수 |
|||||||||||||||||||||||||
| 플레이어의 히스토리에 따라 표시/비표시 | |||||||||||||||||||||||||
|
플레이어의 히스토리에 따라서 문제 내용을 표시할지 비표시할지 설정할 수 있습니다. 히스토리에 의해서 동작하기 때문에 이 기능을 사용한 미궁은 비회원은 제대로 플레이할 수 없습니다. 1. 에디터에 필요한 문제 내용을 모두 입력합니다. 2. HTML 작성모드로 히스토리에 따라 표시하고 싶은 부분을 아래의 문자열로 감싸줍니다. <!-- ONLY-VIEW-START -->히스토리에 따라 표시하고 싶은 부분<!-- ONLY-VIEW-END --> [1] 특정 문제번호를 모두 열람했을 때만 표시 <!-- ONLY-VIEW-START IN=[문제번호1,문제번호2] --> [2] 여러 개의 문제번호 중 하나라도 열람했을 때 표시 <!-- ONLY-VIEW-START INOR=[문제번호1,문제번호2] --> [3] 특정 문제번호를 모두 열람하지 않았을 때만 표시 <!-- ONLY-VIEW-START EX=[문제번호1,문제번호2] --> [4] 여러 개의 문제번호 중 하나라도 열람하지 않았을 때 표시 <!-- ONLY-VIEW-START EXOR=[문제번호1,문제번호2] --> [5] 특정 문제번호는 열람, 특정 문제번호는 열람하지 않았을 때 표시 <!-- ONLY-VIEW-START IN=[문제번호1] EX=[문제번호2] --> * IN계열과 EX계열은 함께 사용하여 설정할 수 있습니다. 예시표 (O:표시 / X:비표시)
3. 미리보기에는 경우에 따른 모든 문제 내용이 표시됩니다. 정확한 확인은 [테스트] 미궁풀기를 통해서 확인해주세요. |
|||||||||||||||||||||||||
| 배경 이미지를 적용하는 방법 | |||||||||||||||||||||||||
|
1. 웹에서 접근 가능한 이미지 파일의 주소가 필요합니다. 에디터의 [사진]을 눌러 직접 업로드하여 사용하거나([이미지를 삽입하는 방법] 참고) 다른 웹페이지에 업로드된 이미지 파일의 웹주소를 복사해주세요. 2. HTML 작성모드에 아래와 같이 style태그를 입력해주세요. <style>body {background: url("이미지 주소") no-repeat fixed 50% 50%;}</style>
* no-repeat : 이미지를 반복하지 않음 (repeat : 반복 / repeat-x : x축반복 / repeat-y : y축반복)* fixed : 움직이지 않음 (scroll : 스크롤 되지 않음 / local : 스크롤 됨) * 50% 50% : 배경 이미지의 x,y축 위치로 50% 50%는 중앙정렬 (각 x,y축에 %, px, left, right, top, bottom, center로 설정 가능) 3. Editor 탭을 눌러 배경 이미지를 확인해주세요. 배경 이미지가 어두운 색이면 [배경색]을 검은색으로 설정해주세요. 제목과 더라비린스 메뉴가 흰색으로 표시됩니다. 4. [미리보기]를 눌러서 배경이미지가 잘 나오는지 확인해주세요. |
|||||||||||||||||||||||||
| 무료 웹폰트를 적용하는 방법 | |||||||||||||||||||||||||
|
에디터의 폰트 이외에 다른 폰트를 사용하고 싶을 경우 무료 웹폰트를 적용해서 사용할 수 있습니다. 1. 무료 웹폰트의 import 정보와 폰트명을 알아야 합니다. 구글 폰트 (https://fonts.google.com/?subset=korean)를 예시로 들겠습니다. [1] 구글 폰트 사이트에서 사용하고 싶은 무료 웹폰트를 클릭해주세요. [2] 원하는 스타일을 선택하면 아래와 같은 화면이 나옵니다.  [3] Use on the web의 @import를 선택하여 <style>부터 </style>까지 모든 내용을 복사해주세요. [4] 하단의 font-family 구문도 복사해주세요. 폰트명에 해당합니다. 2. HTML 작성모드에 복사한 import정보를 넣어주세요.  3. 아래와 같이 style태그 사이에 class명을 지정해서 사용하거나 직접 style="font-family:~"을 사용해서 이용할 수 있습니다.  4. Editor탭을 눌러서 확인하거나 미리보기로 확인해주세요. 
|
|||||||||||||||||||||||||
| script 사용 불가 | |||||||||||||||||||||||||
|
<script> 태그는 사용할 수 없습니다. javascript의 function을 추가하고 싶으신 분은 관리자에게 문의해주세요. on이벤트는 아래의 이벤트 이외에는 사용할 수 없습니다. onclick, onfocusout, onmouseleave, onmouseover |