HTML METHOD OF PERFORMING SYNCHRONIZATION BETWEEN HTML EXECUTION SCREEN AND EDIT SCREEN USING A TAG AND PROGRAM IMPLEMENTING THE SAME

Disclosed are a method of synchronizing an HTML execution screen and an editing screen by using an identification tag and a program therefor. According to various embodiments of the present invention, the method of enabling a WYSIWYG-based web editor program to synchronize an editing screen and an execution screen includes the following steps of: generating a source code, and then, generating a base document object model (DOM) through the source code, and granting an identification tag to each component existing in the base DOM; generating a view DOM by applying JavaScript or CSS to the base DOM and generating an editing screen as a first layer by using the view DOM; locating a second layer overlapping at least one part of the first layer on the editing screen and receiving input information of a user through the second layer; specifying information of a first component indicated by the input information of the user in the view DOM and specifying a second component in the base DOM matched with the first component by using an identification tag granted to the first component; and modifying information of the second component specified in the base DOM in accordance with the input information of the user. Therefore, the method is capable of obtaining intuitiveness in website development. 인식표를 사용하여 HTML 실행 화면과 편집화면의 동기화를 수행하는 방법 및 이를 구현하는 프로그램이 개시된다. 본 발명의 다양한 실시예에 따른 화면 동기화 수행 방법 및 이를 구현하는 프로그램은 위지윅(WYSIWYG) 기반 웹 에디터 프로그램이 편집 화면과 실행 화면을 동기화시키는 방법에 있어서, 소스 코드를 생성한 후, 상기 소스 코드를 통해 베이스 돔(DOM: Document Object Model)을 생성하며, 상기 베이스 돔 내에 존재하는 컴포넌트 별 인식표를 부여하는 단계; 상기 베이스 돔에 자바스크립트 또는 CSS를 적용하여 뷰 돔(View DOM)을 생성하고, 상기 뷰 돔을 이용하여 편집 화면을 제1 레이어의 형태로 생성하는 단계; 상기 편집 화면 상에서 상기 제1 레이어와 영역의 적어도 일부가 겹치는 제2 레이어를 위치시키고, 상기 제2 레이어를 통해 사용자의 입력 정보를 수신하는 단계; 상기 사용자의 입력 정보가 가리키는 제1 컴포넌트의 정보를 상기 뷰 돔 내에서 특정하고, 제1 컴포넌트에 부여된 인식표를 이용하여 제1 컴포넌트와 매칭되는 상기 베이스 돔 내의 제2 컴포넌트를 특정하는 단계; 및 상기 사용자의 입력 정보에 따라 상기 베이스 돔 내에서 특정된 제2 컴포넌트의 정보를 수정하는 단계를 포함하는, 웹 에디터 프로그램의 화면 동기화 수행 방법을 제공한다.