KR101880507B1 - Client terminal device that supports resizing of a figure embedded in a web document and operating method thereof - Google Patents

Client terminal device that supports resizing of a figure embedded in a web document and operating method thereof Download PDF

Info

Publication number
KR101880507B1
KR101880507B1 KR1020170051417A KR20170051417A KR101880507B1 KR 101880507 B1 KR101880507 B1 KR 101880507B1 KR 1020170051417 A KR1020170051417 A KR 1020170051417A KR 20170051417 A KR20170051417 A KR 20170051417A KR 101880507 B1 KR101880507 B1 KR 101880507B1
Authority
KR
South Korea
Prior art keywords
code
border
size
web document
markup language
Prior art date
Application number
KR1020170051417A
Other languages
Korean (ko)
Inventor
신기훈
Original Assignee
주식회사 한글과컴퓨터
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 주식회사 한글과컴퓨터 filed Critical 주식회사 한글과컴퓨터
Priority to KR1020170051417A priority Critical patent/KR101880507B1/en
Application granted granted Critical
Publication of KR101880507B1 publication Critical patent/KR101880507B1/en

Links

Images

Classifications

    • G06F17/24—

Landscapes

  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

Disclosed are a client terminal device supporting the sizing of a figure inserted into a web document and an operating method thereof. If an editing command related with sizing is applied to a scalable vector graphics (SVG) file type figure inserted into a web document, the size and insertion position of the figure are confirmed and the width of a border forming the edge of the figure is confirmed, and then, a code for changing only the size of the figure without changing the width of the border is generated to be inserted into a markup language code forming the web document, and thus, provided is a figure editing technology capable of enabling the width of the border to be maintained as original when the figure is sized over the web document.

Description

웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치 및 그 동작 방법{CLIENT TERMINAL DEVICE THAT SUPPORTS RESIZING OF A FIGURE EMBEDDED IN A WEB DOCUMENT AND OPERATING METHOD THEREOF}TECHNICAL FIELD [0001] The present invention relates to a client terminal apparatus for supporting size adjustment of a figure inserted in a web document, and a client terminal apparatus supporting the size adjustment of a figure inserted in a web document,

본 발명은 웹 문서에 삽입되어 있는 도형의 크기 조정을 지시하는 편집 명령을 처리하기 위한 기술들과 관련된다.The present invention relates to techniques for processing an edit command that instructs resizing of a graphic object embedded in a web document.

웹 문서는 브라우저를 통해서 볼 수 있는 문서로, HTML(Hypertext Markup Language)이나 XML(eXtensible Markup Language)과 같이, 마크업 언어(Markup Language)를 기반으로 작성된 문서를 의미한다.A Web document refers to a document that can be viewed through a browser and is created based on a markup language such as HTML (Hypertext Markup Language) or XML (eXtensible Markup Language).

브라우저에서는 웹 문서를 렌더링하여 화면으로 표시하기 위해서, 문서 객체 모델(Document Object Model)을 사용한다. 문서 객체 모델은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이고, 그래픽, 텍스트, 헤드라인, 스타일 등 웹의 모든 요소가 자바스크립트(JavaScript) 등과 같은 스크립트 언어에 의해 조정될 수 있도록 해준다.The browser uses the Document Object Model to render the web document and display it on the screen. The Document Object Model is an object-oriented model that represents a structured document and allows all elements of the Web, including graphics, text, headlines, and styles, to be manipulated by a scripting language such as JavaScript.

브라우저에서는 마크업 언어를 기반으로 작성된 웹 문서를 파싱(parsing)하여 문서 객체 모델을 생성한 후 이를 기초로 웹 문서를 렌더링하여 화면 상에 상기 웹 문서를 표시하게 된다.A browser parses a web document created based on a markup language to generate a document object model, and then renders the web document based on the generated document object model, thereby displaying the web document on the screen.

일반적으로 사용자가 웹 문서를 편집하기 위해서는 웹 문서를 구성하는 마크업 언어 코드를 직접 수정해야 했었다. 예컨대, 사용자가 HTML로 만들어진 웹 문서에 소정의 이미지를 삽입하고자 하는 경우, "embed src"라고 하는 코드를 활용해서, HTML 코드에 직접 관련 명령어를 삽입해야 하기 때문에 일반적인 사용자가 웹 문서를 편집하기에는 많은 어려움이 존재했었다.In general, in order for a user to edit a web document, he had to directly modify the markup language code that constitutes the web document. For example, when a user desires to insert a predetermined image into a web document made of HTML, a command related to the HTML code must be inserted using a code called "embed src " There was a difficulty.

이러한, 웹 문서 편집의 어려움을 덜어주기 위해, 최근에는 그래픽 유저 인터페이스를 통해 웹 문서를 사용자가 손쉽게 편집할 수 있도록 하는 편집 툴이 등장하고 있다.In order to alleviate the difficulty of editing a web document, an editing tool has recently emerged that allows a user to easily edit a web document through a graphical user interface.

웹 문서의 편집 툴에서는 웹 문서 상에 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식을 갖는 도형의 입력을 지원하는 경우가 있는데, 이러한 SVG 파일 형식의 도형이 웹 문서에 입력되는 경우, 일반적인 웹 문서 편집 툴들은 웹 문서 상에 SVG 파일 형식의 도형을 "embed src"라는 코드를 이용해서 삽입되도록 지원하고 있는 경우가 많다.The editing tool of the web document supports the input of a figure having a scalable vector graphics (SVG) file format on a web document. When such a graphic form of the SVG file format is inputted into a web document, Web document editing tools often support the insertion of SVG file types into Web documents using the code "embed src".

웹 문서 상에 SVG 파일 형식의 도형이 "embed src"라는 코드를 통해 삽입되게 되었을 때, 사용자가 웹 문서 상에 입력되어 있는 도형의 크기를 조정하게 되면, "embed src" 코드의 특성상 도형의 크기만 조정되는 것이 아니라, 상기 도형의 테두리를 구성하는 보더(border)의 너비(width)까지 한꺼번에 조정되기 때문에 사용자가 의도한 편집 명령이 상기 웹 문서 상에 정확히 반영되지 않을 경우가 많다.When the shape of the SVG file format is inserted into the web document through the code "embed src", when the user adjusts the size of the figure inputted on the web document, the size of the figure But the width of the border constituting the border of the figure is adjusted at a time, so that the edit command intended by the user is often not accurately reflected on the web document.

예컨대, 도 1의 도면부호 110에 도시된 바와 같이, 웹 문서 상에 도형(111)이 "embed src" 코드를 통해 삽입되어 있을 때, 사용자가 도형(111)의 크기를 확대시키는 편집 명령을 인가한 경우, 웹 문서에 삽입되어 있는 도형(111)은 도면부호 120에 도시된 바와 같이, 도형(111) 자체의 크기만 확대되는 것이 아니라, 도형의 테두리를 구성하는 보더(112)의 너비까지 함께 확대되게 된다.For example, as shown in reference numeral 110 in Fig. 1, when a figure 111 is inserted on a web document via an "embed src" code, the user inputs an editing command for enlarging the size of the figure 111 The figure 111 inserted in the web document is not enlarged only to the size of the figure 111 itself but extends to the width of the border 112 constituting the border of the figure .

일반적으로, 문서 편집에 있어서, 사용자가 도형의 크기를 조정한다는 것은 보더의 너비를 원래의 너비 상태로 유지하면서, 도형 자체의 크기만을 확대하는 것을 의미하는 경우가 많기 때문에, 웹 문서의 편집을 지원하는 툴에서 웹 문서 상에 삽입되어 있는 SVG 파일 형식의 도형에 대한 확대 또는 축소 명령이 인가되었을 때, 보더의 너비는 유지하면서, 도형 자체의 크기만을 조정할 수 있도록 지원하는 웹 문서 편집 기술에 대한 연구가 필요하다.Generally, in editing a document, a user adjusts the size of a graphic object because it often means enlarging only the size of the graphic object while maintaining the width of the border in its original width state. A web document editing technology that supports only the size of a graphic object itself while maintaining the width of a border when a command to enlarge or reduce an SVG file format inserted in a web document is applied .

본 발명은 웹 문서 상에 삽입되어 있는 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식의 도형에 대해 크기 조정과 연관된 편집 명령이 인가되면, 상기 도형의 삽입 위치와 크기를 확인하고, 상기 도형의 테두리를 구성하는 보더(border)의 너비(width)를 확인한 후 상기 보더의 너비는 변경되지 않도록 하면서, 상기 도형의 크기만 변경되도록 하는 코드를 생성하여 상기 웹 문서를 구성하는 마크업 언어 코드 상에 삽입함으로써, 상기 웹 문서 상에서 상기 도형의 크기가 조정될 때, 보더의 너비는 원래의 너비로 유지될 수 있도록 처리할 수 있는 도형 편집 기술을 제공하고자 한다.In the present invention, when an editing command associated with resizing is applied to a graphic form of a scalable vector graphics (SVG) file format inserted on a web document, the insertion position and the size of the graphic are confirmed, A code for changing only the size of the graphic object is generated while the width of the border is not changed after confirming the width of a border constituting the edge of the web page, So that the width of the border can be maintained at the original width when the size of the figure is adjusted on the web document.

본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치는 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식을 갖는 도형이 입력되어 있는 웹 문서 상에 사용자에 의해 상기 도형에 대한 크기 조정을 지시하는 편집 명령이 인가되면, 상기 편집 명령에 대응하여 상기 도형의 크기 조정에 따른 스케일(scale) 값을 확인하는 스케일 확인부, 상기 웹 문서에서 상기 도형이 삽입되어 있는 삽입 위치와 상기 도형의 크기를 확인하는 도형 확인부, 상기 웹 문서에서 상기 도형의 테두리를 구성하는 보더(border)의 너비(width)를 확인하는 보더 확인부 및 상기 스케일 값에 따라 상기 보더의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하고, 상기 스케일 값을 기초로 상기 도형의 크기만을 조정한 후 상기 크기 조정이 완료된 도형을 상기 웹 문서 상의 상기 삽입 위치 상에 배치하여 표시하는 도형 크기 조정 제어부를 포함한다.A client terminal device supporting size adjustment of a figure embedded in a web document according to an exemplary embodiment of the present invention includes a client terminal device for displaying the size of a figure on a web document in which a figure having a Scalable Vector Graphics (SVG) A scale confirmation unit for confirming a scale value according to the size adjustment of the figure corresponding to the edit instruction when an edit command instructing the size adjustment of the figure is applied, A border check unit for checking a width of a border constituting the border of the figure in the web document and a border check unit for checking the width of the border of the border, A command for instructing that the width adjustment should not be performed, adjusting only the size of the figure based on the scale value, The shape adjustment is completed and a shape sizing control unit for display arranged on the insertion position on the web.

또한, 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 동작 방법은 SVG 파일 형식을 갖는 도형이 입력되어 있는 웹 문서 상에 사용자에 의해 상기 도형에 대한 크기 조정을 지시하는 편집 명령이 인가되면, 상기 편집 명령에 대응하여 상기 도형의 크기 조정에 따른 스케일 값을 확인하는 단계, 상기 웹 문서에서 상기 도형이 삽입되어 있는 삽입 위치와 상기 도형의 크기를 확인하는 단계, 상기 웹 문서에서 상기 도형의 테두리를 구성하는 보더의 너비를 확인하는 단계 및 상기 스케일 값에 따라 상기 보더의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하고, 상기 스케일 값을 기초로 상기 도형의 크기만을 조정한 후 상기 크기 조정이 완료된 도형을 상기 웹 문서 상의 상기 삽입 위치 상에 배치하여 표시하는 단계를 포함한다.In addition, an operation method of a client terminal device supporting size adjustment of a figure embedded in a web document according to an embodiment of the present invention includes: Checking a scale value according to the size adjustment of the figure corresponding to the edit instruction when an edit command instructing the size adjustment is inputted, checking the insertion position where the figure is inserted in the web document and the size of the figure Determining a width of a border constituting the border of the figure in the web document, and executing a command instructing that the width adjustment of the border is not performed according to the scale value, and based on the scale value, After adjusting only the size of the figure, the size-adjusted figure is placed on the insertion position on the web document Comprising the step of displaying over.

본 발명은 웹 문서 상에 삽입되어 있는 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식의 도형에 대해 크기 조정과 연관된 편집 명령이 인가되면, 상기 도형의 삽입 위치와 크기를 확인하고, 상기 도형의 테두리를 구성하는 보더(border)의 너비(width)를 확인한 후 상기 보더의 너비는 변경되지 않도록 하면서, 상기 도형의 크기만 변경되도록 하는 코드를 생성하여 상기 웹 문서를 구성하는 마크업 언어 코드 상에 삽입함으로써, 상기 웹 문서 상에서 상기 도형의 크기가 조정될 때, 보더의 너비는 원래의 너비로 유지될 수 있도록 처리할 수 있는 도형 편집 기술을 제공할 수 있다.In the present invention, when an editing command associated with resizing is applied to a graphic form of a scalable vector graphics (SVG) file format inserted on a web document, the insertion position and the size of the graphic are confirmed, A code for changing only the size of the graphic object is generated while the width of the border is not changed after confirming the width of a border constituting the edge of the web page, So that the width of the border can be maintained at the original width when the size of the figure is adjusted on the web document.

도 1은 웹 문서에 삽입되어 있는 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식의 도형에 대한 크기 조정이 발생하였을 때 처리되는 일반적인 화면의 일례를 도시한 도면이다.
도 2는 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 구조를 도시한 도면이다.
도 3 내지 도 4는 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 동작을 설명하기 위한 도면이다.
도 5는 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 동작 방법을 도시한 순서도이다.1 is a diagram illustrating an example of a general screen that is processed when a size adjustment of a graphic form of a scalable vector graphics (SVG) file format inserted in a web document occurs.
2 is a diagram illustrating a structure of a client terminal device supporting size adjustment of a figure embedded in a web document according to an embodiment of the present invention.
3 to 4 are views for explaining operations of a client terminal device supporting size adjustment of a figure embedded in a web document according to an embodiment of the present invention.
5 is a flowchart illustrating an operation method of a client terminal device supporting size adjustment of a figure embedded in a web document according to an exemplary embodiment of the present invention.

이하에서는 본 발명에 따른 실시예들을 첨부된 도면을 참조하여 상세하게 설명하기로 한다. 이러한 설명은 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다. 각 도면을 설명하면서 유사한 참조부호를 유사한 구성요소에 대해 사용하였으며, 다르게 정의되지 않는 한, 기술적이거나 과학적인 용어를 포함해서 본 명세서 상에서 사용되는 모든 용어들은 본 발명이 속하는 기술분야에서 통상의 지식을 가진 사람에 의해 일반적으로 이해되는 것과 동일한 의미를 가지고 있다.Hereinafter, embodiments according to the present invention will be described in detail with reference to the accompanying drawings. It is to be understood that the description is not intended to limit the invention to the specific embodiments, but includes all modifications, equivalents, and alternatives falling within the spirit and scope of the invention. Like reference numerals in the drawings are used for similar elements and, unless otherwise defined, all terms used in the specification, including technical and scientific terms, are to be construed in a manner that is familiar to those skilled in the art. It has the same meaning as commonly understood by those who have it.

도 2는 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 구조를 도시한 도면이다.2 is a diagram illustrating a structure of a client terminal device supporting size adjustment of a figure embedded in a web document according to an embodiment of the present invention.

도 2를 참조하면, 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치(210)는 스케일 확인부(211), 도형 확인부(212), 보더(border) 확인부(213) 및 도형 크기 조정 제어부(214)를 포함한다.Referring to FIG. 2, a client terminal 210 supporting size adjustment of a figure embedded in a web document according to an embodiment of the present invention includes a scale verification unit 211, a figure verification unit 212, a border ) Confirmation unit 213 and a figure size adjustment control unit 214. [

스케일 확인부(211)는 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식을 갖는 도형이 입력되어 있는 웹 문서 상에 사용자에 의해 상기 도형에 대한 크기 조정을 지시하는 편집 명령이 인가되면, 상기 편집 명령에 대응하여 상기 도형의 크기 조정에 따른 스케일(scale) 값을 확인한다.When an editing command for instructing a size adjustment of the graphic form is applied by the user on a web document to which a graphic having a scalable vector graphics (SVG) file format is input, And confirms a scale value according to the size adjustment of the figure in response to the edit command.

도형 확인부(212)는 상기 웹 문서에서 상기 도형이 삽입되어 있는 삽입 위치와 상기 도형의 크기를 확인한다.The figure check unit 212 checks the insertion position where the figure is inserted in the web document and the size of the figure.

보더 확인부(213)는 상기 웹 문서에서 상기 도형의 테두리를 구성하는 보더의 너비(width)를 확인한다.The border check unit 213 checks the width of the border constituting the border of the graphic object in the web document.

도형 크기 조정 제어부(214)는 상기 스케일 값에 따라 상기 보더의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하고, 상기 스케일 값을 기초로 상기 도형의 크기만을 조정한 후 상기 크기 조정이 완료된 도형을 상기 웹 문서 상의 상기 삽입 위치 상에 배치하여 표시한다.The figure size adjustment control unit 214 executes a command for instructing that the width adjustment of the border is not performed according to the scale value, adjusts the size of the figure on the basis of the scale value, And displays it on the inserted position on the web document.

이때, 본 발명의 일실시예에 따르면, 상기 웹 문서는 브라우저를 통해 상기 웹 문서가 표시되도록 하기 위한 명령을 지시하는 마크업 언어(Markup Language) 코드(code)로 구성되어 있고, 상기 마크업 언어 코드에는 상기 도형과 상기 보더를 모두 포함하는 크기에 대응하는 크기를 갖는 뷰 박스(viewbox) 내에, 상기 도형이 삽입되어 표시되도록 지시하는 도형 삽입 코드가 포함되어 있음과 동시에 상기 도형의 속성 정보(상기 도형의 속성 정보에는 상기 도형의 상기 웹 문서 상에서의 삽입 위치와 상기 도형의 크기에 대한 정보가 포함되어 있음) 및 상기 보더의 속성 정보(상기 보더의 속성 정보에는 상기 보더의 너비에 대한 정보가 포함되어 있음)가 정의되어 있을 수 있다.According to an embodiment of the present invention, the web document is configured with a markup language code for instructing a command for displaying the web document through a browser, and the markup language The code includes a figure embedding code for instructing the figure to be inserted and displayed in a view box having a size corresponding to the size including both the figure and the border, The attribute information of the figure includes information on the insertion position of the figure on the web document and the size of the figure) and attribute information of the border (the information on the width of the border includes the information on the attribute of the border ) May be defined.

이때, 도형 확인부(212)는 상기 마크업 언어 코드에 정의되어 있는 상기 도형의 속성 정보를 참조하여 상기 웹 문서에서 상기 도형의 삽입 위치를 표시하기 위한 시작점을 지시하는 시작 좌표 값과 상기 시작 좌표 값으로부터 상기 도형의 모양을 지시하는 패스(path) 정보를 확인한 후 상기 시작 좌표 값과 상기 패스 정보에 기초하여 상기 삽입 위치와 상기 도형의 크기를 확인할 수 있고, 보더 확인부(213)는 상기 마크업 언어 코드에 정의되어 있는 상기 보더의 속성 정보를 참조하여 상기 보더의 너비를 확인할 수 있다.At this time, the figure check unit 212 refers to the attribute information of the figure defined in the markup language code, and calculates a starting coordinate value indicating a starting point for displaying the insertion position of the figure in the web document, The border check unit 213 can check the insertion position and the size of the figure based on the starting coordinate value and the path information after confirming the path information indicating the shape of the figure from the value, The width of the border can be confirmed by referring to the attribute information of the border defined in the up language code.

이때, 본 발명의 일실시예에 따르면, 도형 크기 조정 제어부(214)는 제1 코드 추가부(215), 제2 코드 추가부(216) 및 렌더링부(217)를 포함할 수 있다.According to an embodiment of the present invention, the graphics size adjustment control unit 214 may include a first code adding unit 215, a second code adding unit 216, and a rendering unit 217.

제1 코드 추가부(215)는 상기 스케일 값에 따라 상기 도형의 크기가 조정되도록 지시함과 동시에 상기 크기 조정이 완료된 도형의 상기 웹 문서 상에서의 삽입 위치를 표시하기 위한 시작점이 상기 시작 좌표 값이 되도록 지시하는 명령을 실행하기 위한 제1 코드를 생성하여 상기 제1 코드를 상기 마크업 언어 코드 상에 정의되어 있는 상기 도형의 속성 정보를 지시하는 코드에 추가한다.The first code adding unit 215 instructs the size of the figure to be adjusted according to the scale value and at the same time the starting point for displaying the insertion position on the web document of the size- The first code is added to a code indicating attribute information of the figure defined on the markup language code.

제2 코드 추가부(216)는 상기 스케일 값에 따라 상기 보더의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하기 위한 제2 코드를 생성하여 상기 제2 코드를 상기 마크업 언어 코드에 정의되어 있는 상기 보더의 속성 정보를 지시하는 코드에 추가한다.The second code adding unit 216 generates a second code for executing a command for instructing that the width adjustment of the border is not performed according to the scale value and outputs the second code to the markup language code To the code indicating the attribute information of the border.

렌더링부(217)는 상기 마크업 언어 코드 상에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 상기 마크업 언어 코드에 정의되어 있는 상기 도형의 속성 정보와 상기 보더의 속성 정보를 참조하여 상기 웹 문서 상에 상기 크기 조정이 완료된 도형을 렌더링하여 표시한다.When the addition of the first code and the second code is completed on the markup language code, the rendering unit 217 refers to the attribute information of the figure and the attribute information of the border defined in the markup language code And displays the rendered figure on the web document.

이때, 본 발명의 일실시예에 따르면, 도형 크기 조정 제어부(214)는 도형 삽입 코드 수정부(218)를 더 포함할 수 있다.In this case, according to an embodiment of the present invention, the figure size adjustment control unit 214 may further include a figure embed code correction unit 218.

도형 삽입 코드 수정부(218)는 상기 뷰 박스의 크기가 상기 크기 조정이 완료된 도형의 크기와 상기 보더의 너비를 모두 포함하는 크기에 대응되는 크기로 수정되도록 지시하는 수정 도형 삽입 코드를 생성한 후 상기 마크업 언어 코드에 포함되어 있는 상기 도형 삽입 코드를 상기 수정 도형 삽입 코드로 변경한다.The figure embedding code correcting unit 218 generates a corrected figure embedding code for instructing the size of the view box to be corrected to a size corresponding to the size including both the size of the figure whose size has been adjusted and the width of the border And changes the figure insertion code included in the markup language code to the modified figure insertion code.

이때, 렌더링부(217)는 상기 마크업 언어 코드 상에서 상기 수정 도형 삽입 코드로의 변경이 완료됨과 동시에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 상기 수정 도형 삽입 코드를 참조하여 상기 뷰 박스의 크기를 조정하고, 상기 마크업 언어 코드에 정의되어 있는 상기 도형의 속성 정보와 상기 보더의 속성 정보를 참조하여 상기 크기 조정이 완료된 뷰 박스 내에 상기 크기 조정이 완료된 도형이 삽입되어 표시되도록 랜더링을 수행함으로써, 상기 웹 문서 상에 상기 크기 조정이 완료된 도형을 표시할 수 있다.At this time, the rendering unit 217 completes the modification to the modified graphic form embedding code on the markup language code, and when the addition of the first code and the second code is completed, The size of the view box is adjusted and the size-adjusted figure is inserted into the size-adjusted view box by referring to the attribute information of the figure defined in the markup language code and the attribute information of the border By performing the rendering, the scaled geometry can be displayed on the web document.

또한, 본 발명의 일실시예에 따르면, 렌더링부(217)는 상기 마크업 언어 코드 상에서 상기 수정 도형 삽입 코드로의 변경이 완료됨과 동시에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 상기 브라우저를 통해 상기 마크업 언어 코드를 파싱하여, 상기 웹 문서에 대한 문서 객체 모델(Document Object Model)을 생성한 후 상기 문서 객체 모델에 기초하여 상기 크기 조정이 완료된 뷰 박스 내에 상기 크기 조정이 완료된 도형이 삽입되어 표시되도록 랜더링을 수행할 수 있다.In addition, according to an embodiment of the present invention, when rendering of the markup language code is completed and the addition of the first code and the second code is completed, Parsing the markup language code through the browser to generate a document object model for the web document, and based on the document object model, Rendering can be performed so that a figure is inserted and displayed.

이하에서는 도 3 내지 도 4를 참조하여, 본 발명에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치(210)의 동작에 대해 예를 들어 상세히 설명하기로 한다.Hereinafter, the operation of the client terminal device 210 supporting the size adjustment of a figure embedded in a web document according to the present invention will be described in detail with reference to FIG. 3 to FIG.

도 3 내지 도 4는 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치(210)의 동작을 설명하기 위한 도면이다.FIGS. 3 and 4 are views for explaining the operation of the client terminal device 210 supporting size adjustment of a figure embedded in a web document according to an embodiment of the present invention.

우선, 도 3의 도면부호 310에 도시된 바와 같이, 웹 문서 상에 SVG 파일 형식을 갖는 도형(311)이 삽입되어 있고, 도형(311)에는 도면부호 312에 표시한 바와 같은 보더(312)가 존재한다고 가정하자. 이때, 상기 도형(311)과 보더(312)는 도면부호 313으로 표시한 바와 같이, 상기 웹 문서 상에서 도형(311)과 보더(312)를 모두 포함하는 크기에 대응하는 크기를 갖는 뷰 박스(313) 내에 포함되어 삽입되어 있을 수 있다.First, a figure 311 having an SVG file format is inserted on a web document as shown in reference numeral 310 in FIG. 3, and a border 312 shown in reference numeral 312 is inserted in the figure 311 Suppose there is. The figure 311 and the border 312 may include a view box 313 having a size corresponding to the size including both the figure 311 and the border 312 on the web document, And may be inserted and included in the memory card.

이때, 상기 웹 문서를 구성하는 마크업 언어 코드에는 도 4의 도면부호 410에 도시된 바와 같이, 상기 웹 문서 상에서 뷰 박스(313) 내에 상기 도형(311)과 보더(312)를 표시하기 위한 코드를 포함하고 있을 수 있는데, 구체적으로 상기 마크업 언어 코드에는 도면부호 411에 도시된 바와 같이, "span class"라는 코드를 통해서 도형(311)과 보더(312)가 모두 포함될 수 있도록 하는 뷰 박스(313)가 정의되어 있을 수 있고, "embed src"라는 코드를 통해 SVG 파일 형식을 갖는 도형(311)이 뷰 박스(313) 내에 삽입될 수 있도록 정의되어 있을 수 있다.At this time, the markup language code constituting the web document includes a code for displaying the figure 311 and the border 312 in the view box 313 on the web document, Specifically, as shown in reference numeral 411, the markup language code includes a view box (not shown) for allowing both the figure 311 and the border 312 to be included through a code called "span class " 313) may be defined, and a figure 311 having an SVG file format may be defined to be inserted into the view box 313 through a code "embed src".

그리고, 상기 마크업 언어 코드에는 도면부호 412에 도시된 바와 같이, 도형(311)의 상기 웹 문서 상에서의 삽입 위치와 도형(311)의 크기와 연관된 속성 정보를 정의하는 코드가 포함되어 있을 수 있고, 도면부호 413에 도시된 바와 같이, 보더(312)의 너비와 연관된 속성 정보를 정의하는 코드가 포함되어 있을 수 있다.The markup language code may include a code for defining attribute information associated with the insertion position of the graphic object 311 on the web document and the size of the graphic object 311, , Code defining the attribute information associated with the width of the border 312, as shown at 413, may be included.

이때, 상기 마크업 언어 코드에 정의되어 있는 도형(311)의 속성 정보에는 도면부호 421에 도시된 바와 같이, 상기 웹 문서에서 도형(311)의 삽입 위치를 표시하기 위한 시작점을 지시하는 시작 좌표 값이 포함되어 있을 수 있고, 도면부호 422에 도시된 바와 같이, 상기 시작 좌표 값으로부터 도형(311)의 모양을 지시하는 패스(path) 정보가 포함되어 있을 수 있다.At this time, in the attribute information of the figure 311 defined in the markup language code, as shown in reference numeral 421, a starting coordinate value indicating a starting point for displaying the insertion position of the figure 311 in the web document And path information indicating the shape of the graphic object 311 may be included in the starting coordinate value as shown in reference numeral 422. [

그리고, 상기 마크업 언어 코드에 정의되어 있는 보더(312)의 속성 정보에는 도면부호 423에 도시된 바와 같이, 보더(312)의 너비에 대한 정보가 포함되어 있을 수 있다.The attribute information of the border 312 defined in the markup language code may include information about the width of the border 312, as indicated by reference numeral 423.

이러한 상황 하에서, 사용자에 의해 도면부호 320에 도시된 바와 같이, 도형(311)의 크기가 확대되도록 하는 편집 명령이 인가된 경우, 스케일 확인부(211)는 상기 편집 명령에 대응하여 도형(311)의 크기 확대에 따른 스케일 값을 확인할 수 있다.Under such a situation, when an editing command for enlarging the size of the graphic object 311 is applied by the user as shown in the figure 320, the scale confirmation unit 211 displays the graphic object 311 corresponding to the editing command, It is possible to confirm the scale value according to the enlargement of the size.

그리고, 도형 확인부(212)는 상기 도면부호 410에 표시된 바와 같은 상기 마크업 언어 코드에 정의되어 있는 도형(311)의 속성 정보를 참조하여 상기 웹 문서에서 도형(311)의 삽입 위치를 표시하기 위한 시작점을 지시하는 시작 좌표 값과 상기 시작 좌표 값으로부터 상기 도형의 모양을 지시하는 패스 정보를 확인한 후 상기 시작 좌표 값과 상기 패스 정보에 기초하여 상기 삽입 위치와 도형(311)의 크기를 확인할 수 있다.The figure check unit 212 refers to the attribute information of the figure 311 defined in the markup language code as indicated by reference numeral 410 and displays the insertion position of the figure 311 in the web document And the path information indicating the shape of the graphic object from the starting coordinate value. Then, based on the starting coordinate value and the path information, the size of the graphic object 311 can be determined based on the starting coordinate value and the path information have.

또한, 보더 확인부(213)는 상기 마크업 언어 코드에 정의되어 있는 보더(312)의 속성 정보를 참조하여 보더(312)의 너비를 확인할 수 있다.The border check unit 213 can check the width of the border 312 by referring to the attribute information of the border 312 defined in the markup language code.

그 이후, 제1 코드 추가부(215)는 상기 스케일 값에 따라 도형(311)의 크기가 확대되도록 지시함과 동시에 상기 크기 조정이 완료된 도형(311)의 상기 웹 문서 상에서의 삽입 위치를 표시하기 위한 시작점이 상기 시작 좌표 값이 되도록 지시하는 명령을 실행하기 위한 제1 코드를 생성하여 상기 제1 코드를 상기 마크업 언어 코드 상에 정의되어 있는 도형(311)의 속성 정보를 지시하는 코드에 추가할 수 있다.Thereafter, the first code adding unit 215 instructs the size of the graphic object 311 to be enlarged according to the scale value, and at the same time, displays the insertion position of the size-adjusted graphic object 311 on the web document And the first code is added to the code indicating the attribute information of the figure 311 defined on the markup language code by generating a first code for executing a command instructing that the starting point for the figure 311 be the starting coordinate value can do.

관련해서, 제1 코드 추가부(215)는 하기의 표 1과 같이 상기 제1 코드를 생성하여 상기 마크업 언어 코드 상에 정의되어 있는 도형(311)의 속성 정보를 지시하는 코드에 추가하도록 하는 명령문를 생성해서 실행할 수 있다.In this regard, the first code adding unit 215 generates the first code and adds it to the code indicating the attribute information of the figure 311 defined on the markup language code, as shown in Table 1 below You can create and execute a statement.

var transformStr = "scale(" + newScaleX + "," + newScaleY + ") translate(" + newTransX + "," + newTransY + ")";
$shapeSvg.find('g').find('g').attr("transform", transformStr);var transformStr = "scale (" + newScaleX + "," + newScaleY + ") translate (" + newTransX + "," + newTransY + ")";
$ shapeSvg.find ('g'). find ('g'). attr ("transform", transformStr);

즉, 제1 코드 추가부(215)는 상기 표 1에서 나타낸 바와 같은 명령문을 실행함으로써, 도형(311)의 크기가 상기 스케일 값에 따라 확대되도록 지시하면서, 크기가 확대된 도형(311)의 상기 웹 문서 상에서의 삽입 위치와 연관된 시작 좌표 값이 원래 도형(311)의 시작 좌표 값이 되도록(즉, 도형(311)의 크기가 확대되더라도 상기 웹 문서 상에서 크기가 확대되기 전과 동일한 위치에 존재하도록) 지시하는 명령을 실행하기 위한 제1 코드를 생성한 후 상기 제1 코드를 도 4의 도면부호 412에서 표시한 도형(311)의 속성 정보를 지시하는 코드에 추가 및 수정할 수 있다.That is, the first code addition unit 215 instructs the size of the graphic object 311 to be enlarged according to the scale value by executing a command as shown in Table 1, So that the starting coordinate value associated with the insertion position on the web document is the starting coordinate value of the original graphic object 311 (i.e., even if the size of the graphic object 311 is enlarged, it is present at the same position as before the size is enlarged on the web document) The first code can be added to and modified from the code indicating the attribute information of the figure 311 indicated by the reference numeral 412 in Fig. 4 after generating the first code for executing the instruction to instruct.

그리고, 제2 코드 추가부(216)는 상기 스케일 값에 따라 보더(312)의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하기 위한 제2 코드를 생성하여 상기 제2 코드를 상기 마크업 언어 코드에 정의되어 있는 보더(312)의 속성 정보를 지시하는 코드에 추가할 수 있다.The second code adding unit 216 generates a second code for executing a command instructing that the width adjustment of the border 312 is not performed according to the scale value and outputs the second code to the markup language code To the code indicating the attribute information of the border 312 defined in the attribute information.

이때, 본 발명의 일실시예에 따르면, 제2 코드 추가부(216)는 상기 스케일 값에 따라 보더(312)의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하기 위한 상기 제2 코드로 "non-scaling-stroke" 코드를 생성한 후 상기 생성된 "non-scaling-stroke" 코드를 상기 마크업 언어 코드에 정의되어 있는 보더(312)의 속성 정보를 지시하는 코드에 추가할 수 있다.In this case, according to an embodiment of the present invention, the second code adder 216 adds "non " to the second code for executing a command instructing not to perform the width adjustment of the border 312 according to the scale value quot; non-scaling-stroke "code to the code indicating the attribute information of the border 312 defined in the markup language code.

관련해서, 제2 코드 추가부(216)는 하기의 표 2와 같이 상기 제2 코드를 생성하여 상기 마크업 언어 코드 상에 정의되어 있는 보더(312)의 속성 정보를 지시하는 코드에 추가하도록 하는 명령문을 생성해서 실행할 수 있다.In this regard, the second code adding unit 216 generates the second code and adds it to the code indicating the attribute information of the border 312 defined on the markup language code, as shown in Table 2 below You can create and execute a statement.

$shapeSvg.find('g').find('path').attr("vector-effect", "non-scaling-stroke");$ shapeSvg.find ('g'). find ('path'). attr ("vector-effect", "non-scaling-stroke");

즉, 제2 코드 추가부(216)는 상기 표 2에서 나타낸 바와 같은 명령문을 실행함으로써, 보더(312)의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하기 위한 상기 제2 코드로 "non-scaling-stroke"를 생성한 후 상기 제2 코드를 도 4의 도면부호 413에서 표시한 보더(312)의 속성 정보를 지시하는 코드에 추가할 수 있다.That is, the second code adding unit 216 performs a non-scaling (non-scaling) operation on the second code for executing a command instructing that the width adjustment of the border 312 is not performed by executing a command as shown in Table 2 above. quot; -stroke ", the second code may be added to the code indicating the attribute information of the border 312 indicated by reference numeral 413 in Fig.

그리고, 도형 삽입 코드 수정부(218)는 뷰 박스(313)의 크기가 상기 크기 조정이 완료된 도형(311)의 크기와 보더(312)의 너비를 모두 포함하는 크기에 대응되는 크기로 수정되도록 지시하는 수정 도형 삽입 코드를 생성한 후 상기 마크업 언어 코드에 포함되어 있는 상기 도형 삽입 코드를 상기 수정 도형 삽입 코드로 변경할 수 있다.The figure embedding code corrector 218 corrects the size of the view box 313 to a size corresponding to the size including both the size of the figure 311 that has been resized and the width of the border 312 The graphic form embedding code included in the markup language code can be changed to the modified graphic form embedding code.

관련해서, 도형 삽입 코드 수정부(218)는 하기의 표 3과 같은 명령문을 실행함으로써, 뷰 박스(313)의 크기가 상기 크기 조정이 완료된 도형(311)의 크기와 보더(312)의 너비를 모두 포함하는 크기에 대응되는 크기로 수정되도록 지시하는 상기 수정 도형 삽입 코드를 생성한 후 상기 마크업 언어 코드 상에 정의되어 있는 뷰 박스(313)에 대한 도형 삽입 코드를 상기 수정 도형 삽입 코드로 변경할 수 있다.In this regard, the figure embedding code correcting unit 218 executes a statement as shown in Table 3 below so that the size of the view box 313 corresponds to the size of the figure 311 and the width of the border 312 The graphic form inserting code for the view box 313 defined on the markup language code is changed to the modified graphic form inserting code .

$shapeSvg.find('g').find('path').removeAttr("vector-effect");
$shapeEmbed.css('width', (newEmbedWidth) + 'px');
$shapeEmbed.css('height', (newEmbedHeight) + 'px');
$shapeSpan.css('width', (newEmbedWidth) + 'px');
$shapeSpan.css('height', (newEmbedHeight) + 'px');
var viewBoxStr = "0 0 " + (newEmbedWidth) + " " + (newEmbedHeight);
$shapeSvg.find('svg').get(0).setAttribute("viewBox", viewBoxStr);$ shapeSvg.find ('g'). find ('path'). removeAttr ("vector-effect");
$ shapeEmbed.css ('width', (newEmbedWidth) + 'px');
$ shapeEmbed.css ('height', (newEmbedHeight) + 'px');
$ shapeSpan.css ('width', (newEmbedWidth) + 'px');
$ shapeSpan.css ('height', (newEmbedHeight) + 'px');
var viewBoxStr = "0 0" + (newEmbedWidth) + "" + (newEmbedHeight);
$ shapeSvg.find ('svg'). get (0) .setAttribute ("viewBox", viewBoxStr);

이렇게, 제1 코드 추가부(215), 제2 코드 추가부(216) 및 도형 삽입 코드 수정부(218)에 의해 상기 마크업 언어 코드 상에서 상기 수정 도형 삽입 코드로의 변경이 완료됨과 동시에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 렌더링부(217)는 상기 마크업 언어 코드에 정의되어 있는 상기 도형(311)의 속성 정보와 상기 보더(312)의 속성 정보를 참조하여 도 3의 도면부호 320에 도시된 바와 같이, 상기 크기 조정이 완료된 뷰 박스(313) 내에 상기 크기 조정이 완료된 도형(311)이 삽입되어 표시되도록 랜더링을 수행함으로써, 상기 웹 문서 상에 상기 크기 조정이 완료된 도형(311)을 표시할 수 있다.In this way, the first code addition unit 215, the second code addition unit 216, and the graphic form insertion code correction unit 218 complete the change to the modified graphic form insertion code on the markup language code, 1 code and the second code are completed, the rendering unit 217 refers to the attribute information of the figure 311 defined in the markup language code and the attribute information of the border 312, The user may perform rendering such that the size-adjusted figure 311 is inserted and displayed in the size-adjusted view box 313, as shown in the reference numeral 320 of FIG. A figure 311 can be displayed.

이때, 렌더링부(217)는 상기 브라우저를 통해 상기 마크업 언어 코드를 파싱하여, 상기 웹 문서에 대한 문서 객체 모델을 생성한 후 상기 문서 객체 모델에 기초하여 도 3의 도면부호 320에 도시된 바와 같이, 상기 크기 조정이 완료된 뷰 박스(313) 내에 상기 크기 조정이 완료된 도형(311)이 삽입되어 표시되도록 랜더링을 수행할 수 있다.At this time, the rendering unit 217 parses the markup language code through the browser, generates a document object model for the web document, and generates a document object model based on the document object model, Likewise, rendering can be performed so that the figure 311 having been subjected to the size adjustment is inserted and displayed in the view box 313 in which the size adjustment is completed.

이렇게, 본 발명에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치(210)는 웹 문서 상에 삽입되어 있는 SVG 파일 형식의 도형에 대해 크기 조정과 연관된 편집 명령이 인가되면, 상기 도형의 삽입 위치와 크기를 확인하고, 상기 도형의 테두리를 구성하는 보더의 너비를 확인한 후 상기 보더의 너비는 변경되지 않도록 하면서, 상기 도형의 크기만 변경되도록 하는 코드를 생성하여 상기 웹 문서를 구성하는 마크업 언어 코드 상에 삽입함으로써, 상기 웹 문서 상에서 상기 도형의 크기가 조정될 때, 보더의 너비는 원래의 너비로 유지될 수 있도록 지원할 수 있다.In this way, the client terminal device 210 supporting the size adjustment of the figure inserted in the web document according to the present invention, when the edit command related to the size adjustment is applied to the figure of the SVG file format inserted on the web document, A code for changing only the size of the figure while checking the insertion position and size of the figure and checking the width of the border constituting the border of the figure and making the width of the border not to be changed, , The width of the border can be maintained at the original width when the size of the figure is adjusted on the web document.

이상, 사용자에 의해 웹 문서 상에 삽입되어 있는 도형에 대해 크기 조정이 발생할 때, 보더의 너비는 유지되면서, 도형의 크기만이 조정되는 실시예에 대해 설명하였지만, 본 발명의 다른 실시예에 따르면, 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치(210)는 사용자에 의해 보더에 대한 크기 조정을 지시하는 편집 명령이 인가되는 경우, 상기 도형의 크기 조정이 수행되지 않도록 함과 동시에 보더의 크기만 조정되도록 하는 코드를 생성하여 상기 웹 문서를 구성하는 마크업 언어 코드 상에 삽입함으로써, 오로지 보더의 크기만 조정되도록 하는 기능을 제공할 수도 있다.In the above description, when the size adjustment is performed on a figure inserted on the web document by the user, the width of the border is maintained and only the size of the figure is adjusted. However, according to another embodiment of the present invention , The client terminal device 210 that supports the adjustment of the size of the figure inserted in the web document is configured such that when an editing command instructing the size adjustment to the border is applied by the user, the size adjustment of the figure is not performed A code for adjusting only the size of the border may be generated and inserted into the markup language code constituting the web document so that only the size of the border is adjusted.

도 5는 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 동작 방법을 도시한 순서도이다.5 is a flowchart illustrating an operation method of a client terminal device supporting size adjustment of a figure embedded in a web document according to an exemplary embodiment of the present invention.

단계(S510)에서는 SVG 파일 형식을 갖는 도형이 입력되어 있는 웹 문서 상에 사용자에 의해 상기 도형에 대한 크기 조정을 지시하는 편집 명령이 인가되면, 상기 편집 명령에 대응하여 상기 도형의 크기 조정에 따른 스케일 값을 확인한다.In step S510, when an editing instruction for instructing the size adjustment of the graphic is given by the user on a web document to which the graphic having the SVG file format is inputted, Check the scale value.

단계(S520)에서는 상기 웹 문서에서 상기 도형이 삽입되어 있는 삽입 위치와 상기 도형의 크기를 확인한다.In step S520, the insertion position where the graphic object is inserted in the web document and the size of the graphic object are checked.

단계(S530)에서는 상기 웹 문서에서 상기 도형의 테두리를 구성하는 보더의 너비를 확인한다.In step S530, the width of the border constituting the border of the figure is checked in the web document.

단계(S540)에서는 상기 스케일 값에 따라 상기 보더의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하고, 상기 스케일 값을 기초로 상기 도형의 크기만을 조정한 후 상기 크기 조정이 완료된 도형을 상기 웹 문서 상의 상기 삽입 위치 상에 배치하여 표시한다.In step S540, a command to instruct the width adjustment of the border is not performed according to the scale value, only the size of the figure is adjusted on the basis of the scale value, and the figure- On the inserting position.

이때, 본 발명의 일실시예에 따르면, 상기 웹 문서는 브라우저를 통해 상기 웹 문서가 표시되도록 하기 위한 명령을 지시하는 마크업 언어 코드로 구성되어 있고, 상기 마크업 언어 코드에는 상기 도형과 상기 보더를 모두 포함하는 크기에 대응하는 크기를 갖는 뷰 박스 내에 상기 도형이 삽입되어 표시되도록 지시하는 도형 삽입 코드가 포함되어 있음과 동시에 상기 도형의 속성 정보(상기 도형의 속성 정보에는 상기 도형의 상기 웹 문서 상에서의 삽입 위치와 상기 도형의 크기에 대한 정보가 포함되어 있음) 및 상기 보더의 속성 정보(상기 보더의 속성 정보에는 상기 보더의 너비에 대한 정보가 포함되어 있음)가 정의되어 있을 수 있다.According to an embodiment of the present invention, the web document is composed of a markup language code that indicates a command for displaying the web document through a browser, and the markup language code includes the figure, And a shape inserting code for instructing the figure to be inserted and displayed in a view box having a size corresponding to a size including all of the shape information of the figure, And the attribute information of the border (the information on the width of the border is included in the attribute information of the border) may be defined.

이때, 단계(S520)에서는 상기 마크업 언어 코드에 정의되어 있는 상기 도형의 속성 정보를 참조하여 상기 웹 문서에서 상기 도형의 삽입 위치를 표시하기 위한 시작점을 지시하는 시작 좌표 값과 상기 시작 좌표 값으로부터 상기 도형의 모양을 지시하는 패스 정보를 확인한 후 상기 시작 좌표 값과 상기 패스 정보에 기초하여 상기 삽입 위치와 상기 도형의 크기를 확인할 수 있고, 단계(S530)에서는 상기 마크업 언어 코드에 정의되어 있는 상기 보더의 속성 정보를 참조하여 상기 보더의 너비를 확인할 수 있다.At this time, in step S520, a starting coordinate value indicating a starting point for displaying the insertion position of the graphic object in the web document is determined from the starting coordinate value by referring to the attribute information of the graphic object defined in the markup language code After checking the path information indicating the shape of the graphic object, the insertion position and the size of the graphic object can be confirmed based on the starting coordinate value and the path information. In step S530, The width of the border can be confirmed by referring to the attribute information of the border.

또한, 본 발명의 일실시예에 따르면, 단계(S540)에서는 상기 스케일 값에 따라 상기 도형의 크기가 조정되도록 지시함과 동시에 상기 크기 조정이 완료된 도형의 상기 웹 문서 상에서의 삽입 위치를 표시하기 위한 시작점이 상기 시작 좌표 값이 되도록 지시하는 명령을 실행하기 위한 제1 코드를 생성하여 상기 제1 코드를 상기 마크업 언어 코드 상에 정의되어 있는 상기 도형의 속성 정보를 지시하는 코드에 추가하는 단계, 상기 스케일 값에 따라 상기 보더의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하기 위한 제2 코드를 생성하여 상기 제2 코드를 상기 마크업 언어 코드에 정의되어 있는 상기 보더의 속성 정보를 지시하는 코드에 추가하는 단계 및 상기 마크업 언어 코드 상에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 상기 마크업 언어 코드에 정의되어 있는 상기 도형의 속성 정보와 상기 보더의 속성 정보를 참조하여 상기 웹 문서 상에 상기 크기 조정이 완료된 도형을 렌더링하여 표시하는 단계를 포함할 수 있다.According to an embodiment of the present invention, in step S540, the size of the figure is adjusted according to the scale value, and at the same time, Generating a first code for executing a command indicating that the starting point is the starting coordinate value and adding the first code to a code indicating attribute information of the figure defined on the markup language code, Generating a second code for executing a command instructing that the width adjustment of the border is not performed according to the scale value, and transmitting the second code to a code indicating attribute information of the border defined in the markup language code And when the addition of the first code and the second code on the markup language code is completed, Attribute information of the word shapes, defined in the code with reference to attribute information of the border by which the sizing is complete on the Web document may include the step of displaying and rendering the shape.

이때, 단계(S540)에서는 상기 뷰 박스의 크기가 상기 크기 조정이 완료된 도형의 크기와 상기 보더의 너비를 모두 포함하는 크기에 대응되는 크기로 수정되도록 지시하는 수정 도형 삽입 코드를 생성한 후 상기 마크업 언어 코드에 포함되어 있는 상기 도형 삽입 코드를 상기 수정 도형 삽입 코드로 변경하는 단계를 더 포함할 수 있다.At this time, in step S540, the modified figure insertion code is generated to instruct the size of the view box to be corrected to a size corresponding to the size including both the size of the figure-adjusted figure and the width of the border, Up language code into the modified figure insertion code.

이때, 상기 렌더링하여 표시하는 단계는 상기 마크업 언어 코드 상에서 상기 수정 도형 삽입 코드로의 변경이 완료됨과 동시에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 상기 수정 도형 삽입 코드를 참조하여 상기 뷰 박스의 크기를 조정하고, 상기 마크업 언어 코드에 정의되어 있는 상기 도형의 속성 정보와 상기 보더의 속성 정보를 참조하여 상기 크기 조정이 완료된 뷰 박스 내에 상기 크기 조정이 완료된 도형이 삽입되어 표시되도록 랜더링을 수행함으로써, 상기 웹 문서 상에 상기 크기 조정이 완료된 도형을 표시할 수 있다.At this time, the step of rendering and displaying may include the step of, when the modification of the markup language code to the modified graphic form embedment code is completed and the addition of the first code and the second code are completed, The size of the view box is adjusted, and the resized figure is inserted into the resized view box by referring to the attribute information of the figure defined in the markup language code and the attribute information of the border, So that the size-adjusted figure can be displayed on the web document.

또한, 본 발명의 일실시예에 따르면, 상기 렌더링하여 표시하는 단계는 상기 마크업 언어 코드 상에서 상기 수정 도형 삽입 코드로의 변경이 완료됨과 동시에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 상기 브라우저를 통해 상기 마크업 언어 코드를 파싱하여, 상기 웹 문서에 대한 문서 객체 모델을 생성한 후 상기 문서 객체 모델에 기초하여 상기 크기 조정이 완료된 뷰 박스 내에 상기 크기 조정이 완료된 도형이 삽입되어 표시되도록 랜더링을 수행할 수 있다.In addition, according to an embodiment of the present invention, the rendering and displaying may be performed by changing the markup language code to the modified graphic insertion code and completing the addition of the first code and the second code , Parses the markup language code through the browser to create a document object model for the web document, and inserts the resized figure into the resized view box based on the document object model Rendering can be performed.

이상, 도 5를 참조하여 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 동작 방법에 대해 설명하였다. 여기서, 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 동작 방법은 도 2 내지 도 4를 이용하여 설명한 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치(210)의 동작에 대한 구성과 대응될 수 있으므로, 이에 대한 보다 상세한 설명은 생략하기로 한다.The operation of the client terminal device supporting the size adjustment of the figure embedded in the web document according to the embodiment of the present invention has been described above with reference to FIG. Herein, the operation method of the client terminal device supporting the size adjustment of the figure embedded in the web document according to the embodiment of the present invention supports the size adjustment of the figure embedded in the web document described with reference to Figs. 2 to 4 The operation of the client terminal device 210 can be corresponded to the configuration of the client terminal device 210, so that a detailed description thereof will be omitted.

본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 동작 방법은 컴퓨터와의 결합을 통해 실행시키기 위한 저장매체에 저장된 컴퓨터 프로그램으로 구현될 수 있다.A method of operating a client terminal device supporting size adjustment of a figure embedded in a web document according to an exemplary embodiment of the present invention may be implemented by a computer program stored in a storage medium for execution through a combination with a computer.

또한, 본 발명의 일실시예에 따른 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 동작 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 본 발명을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다. The operation method of the client terminal device supporting the size adjustment of the figure embedded in the web document according to the embodiment of the present invention may be implemented in the form of a program command which can be executed through various computer means, . The computer-readable medium may include program instructions, data files, data structures, and the like, alone or in combination. The program instructions recorded on the medium may be those specially designed and constructed for the present invention or may be available to those skilled in the art of computer software. Examples of computer-readable media include magnetic media such as hard disks, floppy disks and magnetic tape; optical media such as CD-ROMs and DVDs; magnetic media such as floppy disks; Magneto-optical media, and hardware devices specifically configured to store and execute program instructions such as ROM, RAM, flash memory, and the like. Examples of program instructions include machine language code such as those produced by a compiler, as well as high-level language code that can be executed by a computer using an interpreter or the like.

이상과 같이 본 발명에서는 구체적인 구성 요소 등과 같은 특정 사항들과 한정된 실시예 및 도면에 의해 설명되었으나 이는 본 발명의 보다 전반적인 이해를 돕기 위해서 제공된 것일 뿐, 본 발명은 상기의 실시예에 한정되는 것은 아니며, 본 발명이 속하는 분야에서 통상적인 지식을 가진 자라면 이러한 기재로부터 다양한 수정 및 변형이 가능하다. As described above, the present invention has been described with reference to particular embodiments, such as specific elements, and specific embodiments and drawings. However, it should be understood that the present invention is not limited to the above- And various modifications and changes may be made thereto by those skilled in the art to which the present invention pertains.

따라서, 본 발명의 사상은 설명된 실시예에 국한되어 정해져서는 아니되며, 후술하는 특허청구범위뿐 아니라 이 특허청구범위와 균등하거나 등가적 변형이 있는 모든 것들은 본 발명 사상의 범주에 속한다고 할 것이다.Accordingly, the spirit of the present invention should not be construed as being limited to the embodiments described, and all of the equivalents or equivalents of the claims, as well as the following claims, belong to the scope of the present invention .

210: 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치
211: 스케일 확인부 212: 도형 확인부
213: 보더(border) 확인부 214: 도형 크기 조정 제어부
215: 제1 코드 추가부 216: 제2 코드 추가부
217: 렌더링부 218: 도형 삽입 코드 수정부210: a client terminal device supporting size adjustment of a figure inserted in a web document
211: Scale verification unit 212:
213: border confirmation unit 214: graphic size adjustment control unit
215: first code adding unit 216: second code adding unit
217: Rendering unit 218: Graphic embedding code correcting unit

Claims (12)

스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식을 갖는 도형이 입력되어 있는 웹 문서 상에 사용자에 의해 상기 도형에 대한 크기 조정을 지시하는 편집 명령이 인가되면, 상기 편집 명령에 대응하여 상기 도형의 크기 조정에 따른 스케일(scale) 값을 확인하는 스케일 확인부;
상기 웹 문서에서 상기 도형이 삽입되어 있는 삽입 위치와 상기 도형의 크기를 확인하는 도형 확인부;
상기 웹 문서에서 상기 도형의 테두리를 구성하는 보더(border)의 너비(width)를 확인하는 보더 확인부; 및
상기 스케일 값에 따라 상기 보더의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하고, 상기 스케일 값을 기초로 상기 도형의 크기만을 조정한 후 상기 크기 조정이 완료된 도형을 상기 웹 문서 상의 상기 삽입 위치 상에 배치하여 표시하는 도형 크기 조정 제어부
를 포함하고,
상기 웹 문서는 브라우저를 통해 상기 웹 문서가 표시되도록 하기 위한 명령을 지시하는 마크업 언어(Markup Language) 코드(code)로 구성되어 있고,
상기 마크업 언어 코드에는 상기 도형과 상기 보더를 모두 포함하는 크기에 대응하는 크기를 갖는 뷰 박스(viewbox) 내에, 상기 도형이 삽입되어 표시되도록 지시하는 도형 삽입 코드가 포함되어 있음과 동시에 상기 도형의 속성 정보 - 상기 도형의 속성 정보에는 상기 도형의 상기 웹 문서 상에서의 삽입 위치와 상기 도형의 크기에 대한 정보가 포함되어 있음 - 및 상기 보더의 속성 정보 - 상기 보더의 속성 정보에는 상기 보더의 너비에 대한 정보가 포함되어 있음 - 가 정의되어 있으며,
상기 도형 확인부는
상기 마크업 언어 코드에 정의되어 있는 상기 도형의 속성 정보를 참조하여 상기 웹 문서에서 상기 도형의 삽입 위치를 표시하기 위한 시작점을 지시하는 시작 좌표 값과 상기 시작 좌표 값으로부터 상기 도형의 모양을 지시하는 패스(path) 정보를 확인한 후 상기 시작 좌표 값과 상기 패스 정보에 기초하여 상기 삽입 위치와 상기 도형의 크기를 확인하고,
상기 보더 확인부는
상기 마크업 언어 코드에 정의되어 있는 상기 보더의 속성 정보를 참조하여 상기 보더의 너비를 확인하고,
상기 도형 크기 조정 제어부는
상기 스케일 값에 따라 상기 도형의 크기가 조정되도록 지시함과 동시에 상기 크기 조정이 완료된 도형의 상기 웹 문서 상에서의 삽입 위치를 표시하기 위한 시작점이 상기 시작 좌표 값이 되도록 지시하는 명령을 실행하기 위한 제1 코드를 생성하여 상기 제1 코드를 상기 마크업 언어 코드 상에 정의되어 있는 상기 도형의 속성 정보를 지시하는 코드에 추가하는 제1 코드 추가부;
상기 스케일 값에 따라 상기 보더의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하기 위한 제2 코드 - 상기 제2 코드는 "non-scaling-stroke" 코드임 - 를 생성하여 상기 제2 코드를 상기 마크업 언어 코드에 정의되어 있는 상기 보더의 속성 정보를 지시하는 코드에 추가하는 제2 코드 추가부;
상기 뷰 박스의 크기가 상기 크기 조정이 완료된 도형의 크기와 상기 보더의 너비를 모두 포함하는 크기에 대응되는 크기로 수정되도록 지시하는 수정 도형 삽입 코드를 생성한 후 상기 마크업 언어 코드에 포함되어 있는 상기 도형 삽입 코드를 상기 수정 도형 삽입 코드로 변경하는 도형 삽입 코드 수정부; 및
상기 마크업 언어 코드 상에서 상기 수정 도형 삽입 코드로의 변경이 완료됨과 동시에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 상기 수정 도형 삽입 코드를 참조하여 상기 뷰 박스의 크기를 조정하고, 상기 마크업 언어 코드에 정의되어 있는 상기 도형의 속성 정보와 상기 보더의 속성 정보를 참조하여 상기 크기 조정이 완료된 뷰 박스 내에 상기 크기 조정이 완료된 도형이 삽입되어 표시되도록 랜더링을 수행함으로써, 상기 웹 문서 상에 상기 크기 조정이 완료된 도형을 표시하는 렌더링부
를 포함하고,
상기 렌더링부는
상기 마크업 언어 코드 상에서 상기 수정 도형 삽입 코드로의 변경이 완료됨과 동시에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 상기 브라우저를 통해 상기 마크업 언어 코드를 파싱하여, 상기 웹 문서에 대한 문서 객체 모델(Document Object Model)을 생성한 후 상기 문서 객체 모델에 기초하여 상기 크기 조정이 완료된 뷰 박스 내에 상기 크기 조정이 완료된 도형이 삽입되어 표시되도록 랜더링을 수행하는 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치.When an editing instruction for instructing a size adjustment of the graphic object is applied by a user on a web document to which a graphic object having a scalable vector graphics (SVG) file format is input, A scale confirmation unit for confirming a scale value according to the size adjustment of the scale;
A figure verifying unit for verifying the insertion position where the figure is inserted and the size of the figure in the web document;
A border check unit for checking a width of a border constituting a border of the figure in the web document; And
And a controller for executing a command for instructing that the width adjustment of the border is not performed according to the scale value, adjusting only the size of the figure on the basis of the scale value, And the figure size adjustment control unit
Lt; / RTI >
Wherein the web document is composed of a markup language code for instructing to display the web document through a browser,
Wherein the markup language code includes a figure insertion code for indicating the figure to be inserted and displayed in a viewbox having a size corresponding to a size including both the figure and the border, The attribute information of the figure includes information on the insertion position of the figure on the web document and the size of the figure, and attribute information of the border, and attribute information of the border includes information on the width of the border - Information is included,
The figure checking unit
A start coordinate value indicating a starting point for displaying the insertion position of the graphic object in the web document by referring to the attribute information of the graphic object defined in the markup language code and a shape of the graphic object from the starting coordinate value Checking the insertion position and the size of the figure based on the starting coordinate value and the path information after confirming the path information,
The border check unit
The width of the border is checked with reference to the attribute information of the border defined in the markup language code,
The figure size adjustment control unit
Instructing the size of the figure to be adjusted according to the scale value and instructing that the starting point for displaying the insertion position on the web document of the resized figure is the starting coordinate value A first code adder for generating a first code and adding the first code to a code indicating attribute information of the figure defined on the markup language code;
A second code for executing a command instructing that the width adjustment of the border is not performed according to the scale value, the second code being a "non-scaling-stroke" code, To a code indicating attribute information of the border defined in the language code;
And a modified figure embedding code for instructing the size of the view box to be corrected to a size corresponding to a size including both the size of the resized figure and the width of the border, A graphic embedment code modifying unit for modifying the graphic embedment code into the graphic form embedding code; And
And when the addition of the first code and the second code is completed, the size of the view box is adjusted with reference to the modified graphic insertion code, By referring to the attribute information of the figure defined in the markup language code and the attribute information of the border, rendering is performed so that the resized figure is inserted and displayed in the resized view box, A rendering unit for displaying the figure on which the size adjustment is completed,
Lt; / RTI >
The rendering unit
When the addition of the first code and the second code is completed, the markup language code is parsed through the browser, and the markup language code is parsed into the web document A document object model for creating a document object model, and then, based on the document object model, a graphic object that is rendered in the view box in which the resized figure is inserted and displayed in the resized view box, A client terminal device that supports resizing. 삭제delete 삭제delete 삭제delete 삭제delete 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식을 갖는 도형이 입력되어 있는 웹 문서 상에 사용자에 의해 상기 도형에 대한 크기 조정을 지시하는 편집 명령이 인가되면, 상기 편집 명령에 대응하여 상기 도형의 크기 조정에 따른 스케일(scale) 값을 확인하는 단계;
상기 웹 문서에서 상기 도형이 삽입되어 있는 삽입 위치와 상기 도형의 크기를 확인하는 단계;
상기 웹 문서에서 상기 도형의 테두리를 구성하는 보더(border)의 너비(width)를 확인하는 단계; 및
상기 스케일 값에 따라 상기 보더의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하고, 상기 스케일 값을 기초로 상기 도형의 크기만을 조정한 후 상기 크기 조정이 완료된 도형을 상기 웹 문서 상의 상기 삽입 위치 상에 배치하여 표시하는 단계
를 포함하고,
상기 웹 문서는 브라우저를 통해 상기 웹 문서가 표시되도록 하기 위한 명령을 지시하는 마크업 언어(Markup Language) 코드(code)로 구성되어 있고,
상기 마크업 언어 코드에는 상기 도형과 상기 보더를 모두 포함하는 크기에 대응하는 크기를 갖는 뷰 박스(viewbox) 내에 상기 도형이 삽입되어 표시되도록 지시하는 도형 삽입 코드가 포함되어 있음과 동시에 상기 도형의 속성 정보 - 상기 도형의 속성 정보에는 상기 도형의 상기 웹 문서 상에서의 삽입 위치와 상기 도형의 크기에 대한 정보가 포함되어 있음 - 및 상기 보더의 속성 정보 - 상기 보더의 속성 정보에는 상기 보더의 너비에 대한 정보가 포함되어 있음 - 가 정의되어 있으며,
상기 도형의 크기를 확인하는 단계는
상기 마크업 언어 코드에 정의되어 있는 상기 도형의 속성 정보를 참조하여 상기 웹 문서에서 상기 도형의 삽입 위치를 표시하기 위한 시작점을 지시하는 시작 좌표 값과 상기 시작 좌표 값으로부터 상기 도형의 모양을 지시하는 패스(path) 정보를 확인한 후 상기 시작 좌표 값과 상기 패스 정보에 기초하여 상기 삽입 위치와 상기 도형의 크기를 확인하고,
상기 보더의 너비를 확인하는 단계는
상기 마크업 언어 코드에 정의되어 있는 상기 보더의 속성 정보를 참조하여 상기 보더의 너비를 확인하고,
상기 배치하여 표시하는 단계는
상기 스케일 값에 따라 상기 도형의 크기가 조정되도록 지시함과 동시에 상기 크기 조정이 완료된 도형의 상기 웹 문서 상에서의 삽입 위치를 표시하기 위한 시작점이 상기 시작 좌표 값이 되도록 지시하는 명령을 실행하기 위한 제1 코드를 생성하여 상기 제1 코드를 상기 마크업 언어 코드 상에 정의되어 있는 상기 도형의 속성 정보를 지시하는 코드에 추가하는 단계;
상기 스케일 값에 따라 상기 보더의 너비 조정이 수행되지 않도록 지시하는 명령을 실행하기 위한 제2 코드 - 상기 제2 코드는 "non-scaling-stroke" 코드임 - 를 생성하여 상기 제2 코드를 상기 마크업 언어 코드에 정의되어 있는 상기 보더의 속성 정보를 지시하는 코드에 추가하는 단계;
상기 뷰 박스의 크기가 상기 크기 조정이 완료된 도형의 크기와 상기 보더의 너비를 모두 포함하는 크기에 대응되는 크기로 수정되도록 지시하는 수정 도형 삽입 코드를 생성한 후 상기 마크업 언어 코드에 포함되어 있는 상기 도형 삽입 코드를 상기 수정 도형 삽입 코드로 변경하는 단계; 및
상기 마크업 언어 코드 상에서 상기 수정 도형 삽입 코드로의 변경이 완료됨과 동시에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 상기 수정 도형 삽입 코드를 참조하여 상기 뷰 박스의 크기를 조정하고, 상기 마크업 언어 코드에 정의되어 있는 상기 도형의 속성 정보와 상기 보더의 속성 정보를 참조하여 상기 크기 조정이 완료된 뷰 박스 내에 상기 크기 조정이 완료된 도형이 삽입되어 표시되도록 랜더링을 수행함으로써, 상기 웹 문서 상에 상기 크기 조정이 완료된 도형을 표시하는 단계
를 포함하고,
상기 크기 조정이 완료된 도형을 표시하는 단계는
상기 마크업 언어 코드 상에서 상기 수정 도형 삽입 코드로의 변경이 완료됨과 동시에 상기 제1 코드와 상기 제2 코드의 추가가 완료되면, 상기 브라우저를 통해 상기 마크업 언어 코드를 파싱하여, 상기 웹 문서에 대한 문서 객체 모델(Document Object Model)을 생성한 후 상기 문서 객체 모델에 기초하여 상기 크기 조정이 완료된 뷰 박스 내에 상기 크기 조정이 완료된 도형이 삽입되어 표시되도록 랜더링을 수행하는 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치의 동작 방법.When an editing instruction for instructing a size adjustment of the graphic object is applied by a user on a web document to which a graphic object having a scalable vector graphics (SVG) file format is input, Confirming a scale value in accordance with the size adjustment;
Confirming the insertion position where the figure is inserted and the size of the figure in the web document;
Confirming a width of a border constituting a border of the graphic object in the web document; And
And a controller for executing a command for instructing that the width adjustment of the border is not performed according to the scale value, adjusting only the size of the figure on the basis of the scale value, And displaying
Lt; / RTI >
Wherein the web document is composed of a markup language code for instructing to display the web document through a browser,
Wherein the markup language code includes a figure embedding code for indicating the figure to be inserted and displayed in a view box having a size corresponding to a size including both the figure and the border, Information on the shape of the figure is included in the attribute information of the figure, information on the insertion position of the figure on the web document and the size of the figure are included, and attribute information of the border, Information is included - is defined,
The step of checking the size of the figure
A start coordinate value indicating a starting point for displaying the insertion position of the graphic object in the web document by referring to the attribute information of the graphic object defined in the markup language code and a shape of the graphic object from the starting coordinate value Checking the insertion position and the size of the figure based on the starting coordinate value and the path information after confirming the path information,
The step of verifying the width of the border
The width of the border is checked with reference to the attribute information of the border defined in the markup language code,
The step of arranging and displaying
Instructing the size of the figure to be adjusted according to the scale value and instructing that the starting point for displaying the insertion position on the web document of the resized figure is the starting coordinate value 1 code and adding the first code to a code indicating attribute information of the figure defined on the markup language code;
A second code for executing a command instructing that the width adjustment of the border is not performed according to the scale value, the second code being a "non-scaling-stroke" code, To the code indicating the attribute information of the border defined in the up language code;
And a modified figure embedding code for instructing the size of the view box to be corrected to a size corresponding to a size including both the size of the resized figure and the width of the border, Changing the figure embedding code to the modified graphic embedding code; And
And when the addition of the first code and the second code is completed, the size of the view box is adjusted with reference to the modified graphic insertion code, By referring to the attribute information of the figure defined in the markup language code and the attribute information of the border, rendering is performed so that the resized figure is inserted and displayed in the resized view box, A step of displaying the scaled geometry on the screen
Lt; / RTI >
The step of displaying the resized figure
When the addition of the first code and the second code is completed, the markup language code is parsed through the browser, and the markup language code is parsed into the web document A document object model for creating a document object model, and then, based on the document object model, a graphic object that is rendered in the view box in which the resized figure is inserted and displayed in the resized view box, A method of operating a client terminal device that supports resizing. 삭제delete 삭제delete 삭제delete 삭제delete 제6항의 방법을 컴퓨터로 하여금 수행하도록 하는 프로그램을 기록한 컴퓨터 판독 가능 기록 매체.A computer-readable recording medium storing a program for causing a computer to perform the method of claim 6. 제6항의 방법을 컴퓨터와의 결합을 통해 실행시키기 위한 저장매체에 저장된 컴퓨터 프로그램.A computer program stored in a storage medium for executing the method of claim 6 through a combination with a computer.
KR1020170051417A 2017-04-21 2017-04-21 Client terminal device that supports resizing of a figure embedded in a web document and operating method thereof KR101880507B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020170051417A KR101880507B1 (en) 2017-04-21 2017-04-21 Client terminal device that supports resizing of a figure embedded in a web document and operating method thereof

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020170051417A KR101880507B1 (en) 2017-04-21 2017-04-21 Client terminal device that supports resizing of a figure embedded in a web document and operating method thereof

Publications (1)

Publication Number Publication Date
KR101880507B1 true KR101880507B1 (en) 2018-07-20

Family

ID=63103423

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020170051417A KR101880507B1 (en) 2017-04-21 2017-04-21 Client terminal device that supports resizing of a figure embedded in a web document and operating method thereof

Country Status (1)

Country Link
KR (1) KR101880507B1 (en)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112115485A (en) * 2019-06-04 2020-12-22 珠海金山办公软件有限公司 Method and device for protecting width and height of graph in document, electronic equipment and storage medium
CN112380821A (en) * 2020-11-17 2021-02-19 北京字跳网络技术有限公司 Graphic display method and device and electronic equipment

Citations (43)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH0554151A (en) * 1991-08-22 1993-03-05 Brother Ind Ltd Stereoscopic graphic processor
US6317137B1 (en) * 1998-12-01 2001-11-13 Silicon Graphics, Inc. Multi-threaded texture modulation for axis-aligned volume rendering
US6647410B1 (en) * 1999-11-05 2003-11-11 Reuters Limited Method, apparatus and program for delivery and display of information from dynamic and static data sources
JP2004046858A (en) * 2002-06-28 2004-02-12 Microsoft Corp Method for resolving document object collision
KR20040016357A (en) * 2002-10-23 2004-02-21 (주) 윌로우소프트 image loading method for game system
KR20040046171A (en) * 2002-11-26 2004-06-05 한국전자통신연구원 Parsing system and method of Multi-document based on elements
KR20040090867A (en) * 2003-04-18 2004-10-27 (주)아이펜텍 Method for Generating XSL Style Sheet by Using Gravity Layer Rules
JP2005057671A (en) * 2003-08-07 2005-03-03 Dainippon Screen Mfg Co Ltd Document processor, printing system, and method for adding object to document, and program
KR20060002735A (en) * 2003-03-27 2006-01-09 마이크로소프트 코포레이션 Markup language and object model for vector graphics
WO2006046666A1 (en) * 2004-10-27 2006-05-04 Justsystems Corporation Document processing device and document processing method
KR20060046307A (en) * 2004-06-01 2006-05-17 마이크로소프트 코포레이션 Method and apparatus for viewing and interacting with a spreadsheet from within a web browser
US20060200755A1 (en) * 2005-03-04 2006-09-07 Microsoft Corporation Method and system for resolving conflicts in attribute operations in a collaborative editing environment
JP2006523346A (en) * 2003-04-03 2006-10-12 ウェブ・バインダリー・リミテッド・ライアビリティ・カンパニー A system for producing online content printed from websites on demand
KR20070086669A (en) * 2004-11-26 2007-08-27 필립 케이. 친 A method of displaying data in a table
KR20080111450A (en) * 2006-03-15 2008-12-23 마이크로소프트 코포레이션 Efficient encoding of alternative graphic sets
KR20090056504A (en) * 2007-11-30 2009-06-03 주식회사 케이티 Proxy, terminal, method for processing the document object model events for modalities
KR20100011296A (en) * 2008-07-24 2010-02-03 삼성전자주식회사 Method and apparatus for reconstructing a web page
US20100325529A1 (en) * 2009-06-19 2010-12-23 Microsoft Corporation Resizing an Editable Area in a Web Page
KR20120003122A (en) * 2010-07-02 2012-01-10 에스케이플래닛 주식회사 Apparatus and method for processing image based on pre loading, and apparatus and method for processing image based on asynchronous loading
KR20120039514A (en) * 2009-03-23 2012-04-25 워크웨이 테크놀로지스 유에스 엘엘씨 System and method for merging edits for a conversation in a hosted conversation system
KR101161564B1 (en) * 2011-11-08 2012-07-03 주식회사 한글과컴퓨터 Terminal device and object color conversion method of the terminal device
US20130007582A1 (en) * 2011-06-30 2013-01-03 Konica Minolta Laboratory U.S.A., Inc. System and method for producing outer shadows and reflections
KR20130021482A (en) * 2011-08-23 2013-03-06 주식회사 인프라웨어 Method of editing html tables by cell unit
KR20130022485A (en) * 2011-08-24 2013-03-07 연세대학교 산학협력단 A method for providing web-page and a computer-readable recording medium recording program for implementing the method
US20130138733A1 (en) * 2011-11-25 2013-05-30 Matthias Heinrich Universal collaboration adapter for web editors
KR20130059866A (en) * 2011-11-29 2013-06-07 변규홍 Apparatus and method for converting web document
US20130246901A1 (en) * 2012-03-19 2013-09-19 Litera Technologies, LLC. System and method for synchronizing bi-directional document management
KR101328047B1 (en) * 2012-01-02 2013-11-13 네이버 주식회사 Apparatus, method and computer readable recording medium for improving loading speed of images in a webpage having a plurality of images
KR20130143614A (en) * 2010-12-23 2013-12-31 마이크로소프트 코포레이션 Techniques for electronic aggregation of information
KR20140003788A (en) * 2012-06-28 2014-01-10 (주) 사이냅소프트 Html conversion apparatus and method thereof
KR20140020435A (en) * 2012-08-08 2014-02-19 한국과학기술정보연구원 System and method for implementing real-time animation using multi-thread
US20140053050A1 (en) * 2011-04-27 2014-02-20 Fuji Film Corporation Document file display device and method
KR20140039509A (en) * 2012-09-24 2014-04-02 에스케이플래닛 주식회사 System and method for providing contextual user-interface based on mark-up language
KR20140147093A (en) * 2012-03-30 2014-12-29 마이크로소프트 코포레이션 Tracking co-authoring conflicts using document comments
KR101485788B1 (en) * 2014-03-28 2015-01-26 주식회사 한글과컴퓨터 Screen division rendering based electronic document display apparatus and method
KR101504719B1 (en) * 2010-03-24 2015-03-23 뉴로우, 인코포레이티드 System and method for coordinating simultaneous edits of shared digital data
US20150199319A1 (en) * 2006-08-16 2015-07-16 Google Inc. Real-Time Document Sharing and Editing
KR20150083718A (en) * 2014-01-10 2015-07-20 삼성전자주식회사 Apparatus and Method for displaying texts in electronic device
KR20150091527A (en) * 2008-06-25 2015-08-11 마이크로소프트 테크놀로지 라이센싱, 엘엘씨 Structured coauthoring
US20160139768A1 (en) * 2010-04-12 2016-05-19 Google Inc. Collaborative cursors in a hosted word processor
KR20160084448A (en) * 2013-11-11 2016-07-13 아마존 테크놀로지스, 인크. Document management and collaboration system
KR101647765B1 (en) * 2015-03-20 2016-08-12 (주)솔트웍스 System for unitied management of documents
KR101701110B1 (en) * 2016-03-11 2017-02-13 주식회사 인프라웨어 Method and apparatus for sharing common editing documents

Patent Citations (43)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH0554151A (en) * 1991-08-22 1993-03-05 Brother Ind Ltd Stereoscopic graphic processor
US6317137B1 (en) * 1998-12-01 2001-11-13 Silicon Graphics, Inc. Multi-threaded texture modulation for axis-aligned volume rendering
US6647410B1 (en) * 1999-11-05 2003-11-11 Reuters Limited Method, apparatus and program for delivery and display of information from dynamic and static data sources
JP2004046858A (en) * 2002-06-28 2004-02-12 Microsoft Corp Method for resolving document object collision
KR20040016357A (en) * 2002-10-23 2004-02-21 (주) 윌로우소프트 image loading method for game system
KR20040046171A (en) * 2002-11-26 2004-06-05 한국전자통신연구원 Parsing system and method of Multi-document based on elements
KR20060002735A (en) * 2003-03-27 2006-01-09 마이크로소프트 코포레이션 Markup language and object model for vector graphics
JP2006523346A (en) * 2003-04-03 2006-10-12 ウェブ・バインダリー・リミテッド・ライアビリティ・カンパニー A system for producing online content printed from websites on demand
KR20040090867A (en) * 2003-04-18 2004-10-27 (주)아이펜텍 Method for Generating XSL Style Sheet by Using Gravity Layer Rules
JP2005057671A (en) * 2003-08-07 2005-03-03 Dainippon Screen Mfg Co Ltd Document processor, printing system, and method for adding object to document, and program
KR20060046307A (en) * 2004-06-01 2006-05-17 마이크로소프트 코포레이션 Method and apparatus for viewing and interacting with a spreadsheet from within a web browser
WO2006046666A1 (en) * 2004-10-27 2006-05-04 Justsystems Corporation Document processing device and document processing method
KR20070086669A (en) * 2004-11-26 2007-08-27 필립 케이. 친 A method of displaying data in a table
US20060200755A1 (en) * 2005-03-04 2006-09-07 Microsoft Corporation Method and system for resolving conflicts in attribute operations in a collaborative editing environment
KR20080111450A (en) * 2006-03-15 2008-12-23 마이크로소프트 코포레이션 Efficient encoding of alternative graphic sets
US20150199319A1 (en) * 2006-08-16 2015-07-16 Google Inc. Real-Time Document Sharing and Editing
KR20090056504A (en) * 2007-11-30 2009-06-03 주식회사 케이티 Proxy, terminal, method for processing the document object model events for modalities
KR20150091527A (en) * 2008-06-25 2015-08-11 마이크로소프트 테크놀로지 라이센싱, 엘엘씨 Structured coauthoring
KR20100011296A (en) * 2008-07-24 2010-02-03 삼성전자주식회사 Method and apparatus for reconstructing a web page
KR20120039514A (en) * 2009-03-23 2012-04-25 워크웨이 테크놀로지스 유에스 엘엘씨 System and method for merging edits for a conversation in a hosted conversation system
US20100325529A1 (en) * 2009-06-19 2010-12-23 Microsoft Corporation Resizing an Editable Area in a Web Page
KR101504719B1 (en) * 2010-03-24 2015-03-23 뉴로우, 인코포레이티드 System and method for coordinating simultaneous edits of shared digital data
US20160139768A1 (en) * 2010-04-12 2016-05-19 Google Inc. Collaborative cursors in a hosted word processor
KR20120003122A (en) * 2010-07-02 2012-01-10 에스케이플래닛 주식회사 Apparatus and method for processing image based on pre loading, and apparatus and method for processing image based on asynchronous loading
KR20130143614A (en) * 2010-12-23 2013-12-31 마이크로소프트 코포레이션 Techniques for electronic aggregation of information
US20140053050A1 (en) * 2011-04-27 2014-02-20 Fuji Film Corporation Document file display device and method
US20130007582A1 (en) * 2011-06-30 2013-01-03 Konica Minolta Laboratory U.S.A., Inc. System and method for producing outer shadows and reflections
KR20130021482A (en) * 2011-08-23 2013-03-06 주식회사 인프라웨어 Method of editing html tables by cell unit
KR20130022485A (en) * 2011-08-24 2013-03-07 연세대학교 산학협력단 A method for providing web-page and a computer-readable recording medium recording program for implementing the method
KR101161564B1 (en) * 2011-11-08 2012-07-03 주식회사 한글과컴퓨터 Terminal device and object color conversion method of the terminal device
US20130138733A1 (en) * 2011-11-25 2013-05-30 Matthias Heinrich Universal collaboration adapter for web editors
KR20130059866A (en) * 2011-11-29 2013-06-07 변규홍 Apparatus and method for converting web document
KR101328047B1 (en) * 2012-01-02 2013-11-13 네이버 주식회사 Apparatus, method and computer readable recording medium for improving loading speed of images in a webpage having a plurality of images
US20130246901A1 (en) * 2012-03-19 2013-09-19 Litera Technologies, LLC. System and method for synchronizing bi-directional document management
KR20140147093A (en) * 2012-03-30 2014-12-29 마이크로소프트 코포레이션 Tracking co-authoring conflicts using document comments
KR20140003788A (en) * 2012-06-28 2014-01-10 (주) 사이냅소프트 Html conversion apparatus and method thereof
KR20140020435A (en) * 2012-08-08 2014-02-19 한국과학기술정보연구원 System and method for implementing real-time animation using multi-thread
KR20140039509A (en) * 2012-09-24 2014-04-02 에스케이플래닛 주식회사 System and method for providing contextual user-interface based on mark-up language
KR20160084448A (en) * 2013-11-11 2016-07-13 아마존 테크놀로지스, 인크. Document management and collaboration system
KR20150083718A (en) * 2014-01-10 2015-07-20 삼성전자주식회사 Apparatus and Method for displaying texts in electronic device
KR101485788B1 (en) * 2014-03-28 2015-01-26 주식회사 한글과컴퓨터 Screen division rendering based electronic document display apparatus and method
KR101647765B1 (en) * 2015-03-20 2016-08-12 (주)솔트웍스 System for unitied management of documents
KR101701110B1 (en) * 2016-03-11 2017-02-13 주식회사 인프라웨어 Method and apparatus for sharing common editing documents

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
Peter Weverka, PowerPoint 2007 ALL-IN-ONE DESK REFERENCE, Wiley Publishing, Inc. (2007) *
SVG에서 non-scaling-stroke 사용에 관한 질의1, https://stackoverflow.com/questions/40065297/svg-with-non-scaling-stroke-ignores-viewbox-and-uses-its-viewport 1부. *
SVG에서 non-scaling-stroke 사용에 관한 질의2, https://stackoverflow.com, 1부. *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112115485A (en) * 2019-06-04 2020-12-22 珠海金山办公软件有限公司 Method and device for protecting width and height of graph in document, electronic equipment and storage medium
CN112380821A (en) * 2020-11-17 2021-02-19 北京字跳网络技术有限公司 Graphic display method and device and electronic equipment
CN112380821B (en) * 2020-11-17 2024-05-28 北京字跳网络技术有限公司 Graphic display method and device and electronic equipment

Similar Documents

Publication Publication Date Title
JP4733415B2 (en) Electronic document display apparatus and method, and computer program
US7516402B2 (en) Presentation of large objects on small displays
US9697190B2 (en) Integrating image renditions and page layout
US9047261B2 (en) Document editing method
KR101809457B1 (en) Client terminal device supporting editing of a web document and operating method thereof
CN105447096A (en) Web page generation method and apparatus
US8645823B1 (en) Converting static websites to resolution independent websites in a web development environment
US20090319887A1 (en) Fit and fill techniques for pictures
US20110221764A1 (en) Laying out and cropping images in pre-defined layouts
JP5005005B2 (en) Visualization program, visualization method, and visualization apparatus for visualizing content reading order
KR101880507B1 (en) Client terminal device that supports resizing of a figure embedded in a web document and operating method thereof
KR101768899B1 (en) Electronic document editing device capable of inserting memo in paragraph and operating method thereof
KR101809460B1 (en) Client terminal device capable of pasting external content to a web document according to a style attribute supported by the web document editing tool and operating method thereof
JP2020086422A (en) Method and system for editing font using svg format and computer-readable recording medium
KR101498533B1 (en) Component separate display based electronic document display device and method
KR101494653B1 (en) Control command auto complete based electronic document editing apparatus and method
KR102649627B1 (en) An automatic image placement and execution method using the DTP program, an adobe indesign
WO2014050562A1 (en) Sequence correction device for paragraph region, as well as method for controlling operation thereof and program for controlling operation thereof
KR101991297B1 (en) Web-based document editing support apparatus for customizing document editing interface and operating method thereof
KR102298752B1 (en) Method for authoring electronic document, Apparatus for authoring electronic document and Computer program for the same
CN113672837A (en) Webpage watermark adding method and device
KR101652853B1 (en) Electronic document editing device and method for partial resizing of the image object
US20070177215A1 (en) Text rendering contrast
KR101809459B1 (en) Web document conversion support apparatus that can maintain decorating effect applied to original image and operating method thereof
KR20220127478A (en) Electronic terminal device for generating object guide frame on the page of a presentation document, and the opreating method thereof

Legal Events

Date Code Title Description
J301 Trial decision

Free format text: TRIAL NUMBER: 2018101000568; TRIAL DECISION FOR APPEAL AGAINST DECISION TO DECLINE REFUSAL REQUESTED 20180208

Effective date: 20180618

S901 Examination by remand of revocation
GRNO Decision to grant (after opposition)
GRNT Written decision to grant