미궁 제작팁 게시판은 미궁 제작에 관련된 질문이나 팁을 공유하는 게시판입니다.
미궁을 제작하면서 궁금했던 점이나 에디터의 이용방법, HTML관련 지식등 궁금한 점이 있다면 자유롭게 질문글을 올려주세요.
또한 많은분들께 도움이 될 수 있도록 자신이 미궁을 제작하면서 느낀 제작팁이 있다면 게시해주세요.
감사합니다.
※기본적인 문제 제작 에디터의 사용방법은 아래를 확인해주세요.
( 문제제작 페이지의 에디터 하단의 [에디터 사용 방법]과 해당 게시판(미궁 제작팁) 상단의 [문제 제작 에디터 사용 방법 보기]를 클릭하셔도 확인할 수 있습니다 )
| 나모 웹에디터 등 다른 에디터를 이용하는 방법 |
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:비표시)
| 1,2 미열람 | 1만 열람 | 2만 열람 | 1,2 모두 열람 | | IN=[1,2] | X | X | X | O | | INOR=[1,2] | X | O | O | O | | EX=[1,2] | O | X | X | X | | EXOR=[1,2] | O | O | 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 |
전체미궁