스윙 기능 도움말

HTML에디터페이지 제작방법

344 views 2017년 4월 17일 2018년 1월 16일 root 2

에디터페이지 제목

해당 도움말 포스팅에서는 사용자페이지 제작 도구 중 하나인 HTML 에디터 페이지 제작방법에 대해서 알려드리겠습니다.

HTML 에디터페이지는 기존 사용자페이지처럼 사용자가 직접 페이지를 제작할 수 있는 메뉴인데요.

마치 블로그나 카페에 포스팅을 입력하듯이 글과 이미지를 자유롭게 배치하여 제작할 수 있습니다.

웹링크, 동영상, 텍스트 효과 등을 적용할 수 있기 때문에 사용자가 원하는 스타일대로 자유롭게 만들 수 있는 점이 가장 큰 특징입니다.

그럼 해당 포스팅에서는 HTML 에디터페이지 제작방법과 앱에 적용하는 방법에 대해서 알려드리겠습니다.



▶ 에디터페이지 제작방법 영상으로 확인하기


 

1.HTML 에디터 페이지 불러오기

  • 에디터페이지는 앱제작페이지- 페이지메뉴 단계에서 확인할 수 있습니다. 

에디터페이지1

앱제작 3단계 페이지메뉴에서 1)사용자페이지 메뉴를 선택한 뒤 2)불러오기 버튼을 눌러주세요.

3)사용자페이지 메뉴 창에서 HTML 에디터페이지 추가/관리’ 를 선택하시면 에디터 페이지 제작도구 사이트가 열립니다.

 

HTML에디터페이지추가

위의 이미지처럼 HTML에디터 페이지 제작도구 사이트가 열리구요.

해당 화면에서 페이지 작업을 한 뒤 [저장] 버튼을 누르면 사용자페이지 목록에 반영됩니다.


2. 에디터 페이지 제작하기

에디터페이지3

에디터페이지 제작도구 사이트에서 사용자가 원하는 스타일로 작업이 가능합니다.

이미지를 첨부 및 동영상, 움짤 이미지 등의 첨부가 모두 가능합니다.

그리고 텍스트 꾸미기가 가능하기 때문에 글씨폰트, 색상 등의 옵션을 지정할 수 있구요.

상단에 제작도구 옵션bar 메뉴를 통해서 다양한 스타일을 적용할 수 있습니다.

밑에서 에디터페이지를 적용한 활용예시를 소개해드릴테니 확인해주세요 ^^


 

3. HTML 에디터페이지 앱에 적용하기
  • 에디터 페이지 제작이 완료 된 후, 앱에 에디터페이지를 적용해보겠습니다. 

에디터페이지2

앱제작 메뉴 – 3단계 페이지 메뉴 단계로 다시 이동해주세요.

1) 새메뉴추가 버튼을 누른 뒤 2) 해당 메뉴 이름을 입력합니다.

3) 사용자페이지 버튼을 누른 뒤 4) 불러오기 버튼을 선택합니다.

5) 사용자페이지 목록에 만들어놓은 HTML에디터 페이지를 확인할 수 있구요.

해당 페이지를 선택한 뒤 [적용] 버튼을 눌러주세요

6) 다시 [적용]을 누르고, 7) [저장]을 누르면 앱 적용이 완료됩니다.


 

4. 에디터페이지 앱적용 화면

1) 웹페이지 스타일

에디터페이지4

이미지를 적용해서 웹페이지 스타일로 적용했구요.

이미지에는 웹링크(사이트 URL)을 적용해서 이미지 선택시 연동해놓은 사이트로 이동하게끔 설정했습니다.

 

에디터페이지5

동영상도 보여질 수 있도록 함께 등록했습니다.

 

*움짤로 에디터페이지 적용내용을 확인해주세요 ^^

에디터앱적용1메가

 

2) 블로그 스타일 

에디터페이지6

두 번째는 블로그 포스팅 스타일로 작업했는데요.

텍스트를 입력하고 이미지를 등록하여서 하나의 포스팅 글처럼 제작했습니다.

 

에디터페이지7

움짤이미지 .gif 파일도 첨부할 수 있으니 이미지와 더불어 자유롭게 이용해주시면 됩니다.

 

*움짤로 에디터페이지 적용내용을 확인해주세요 ^^

에디터앱적용2 1메가


 

Was this helpful?