KR101341996B1 - N-screen layout system using semantic web tag of html 5 and method threof - Google Patents

N-screen layout system using semantic web tag of html 5 and method threof Download PDF

Info

Publication number
KR101341996B1
KR101341996B1 KR1020120143560A KR20120143560A KR101341996B1 KR 101341996 B1 KR101341996 B1 KR 101341996B1 KR 1020120143560 A KR1020120143560 A KR 1020120143560A KR 20120143560 A KR20120143560 A KR 20120143560A KR 101341996 B1 KR101341996 B1 KR 101341996B1
Authority
KR
South Korea
Prior art keywords
type
tag
display
area
layout
Prior art date
Application number
KR1020120143560A
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 KR1020120143560A priority Critical patent/KR101341996B1/en
Application granted granted Critical
Publication of KR101341996B1 publication Critical patent/KR101341996B1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04M—TELEPHONIC COMMUNICATION
    • H04M1/00—Substation equipment, e.g. for use by subscribers
    • H04M1/72—Mobile telephones; Cordless telephones, i.e. devices for establishing wireless links to base stations without route selection
    • H04M1/724—User interfaces specially adapted for cordless or mobile telephones
    • H04M1/72403—User interfaces specially adapted for cordless or mobile telephones with means for local support of applications that increase the functionality

Abstract

An N-screen layout system using semantic web tag of hyper-text markup language (HTML) 5 and a running method for the same are disclosed. The N-screen layout system comprises a semantic web tag analysis module for analyzing web contents including the semantic web tag of HTML 5; a user agent analysis module for analyzing the user agent of a device and subsequently analyzing the type of mobile web browser, an operating system (OS), and the type of device; a media type analysis module for analyzing the size and resolution of display, and the media type of the web contents; and an N-screen layout module which arranges a layout for the display based on the type of device, the OS, and the type of mobile web browser analyzed by the user agent analysis module and applies a cascading style sheet (CSS) 3 based on the media type analyzed by the media type analysis module. The screen layout system using semantic web tag of HTML 5 and the running method for the same are capable of arranging an N-screen layout for various devices by allowing developers to produce only a single source program using the semantic web tag of HTML 5. [Reference numerals] (110) Semantic web tag analyzing module;(120) User agent analyzing module;(130) Media type analyzing module;(140) N-screen layout configuring module;(200) Display

Description

ＨＴＭＬ 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 시스템 및 구현 방법{N-SCREEN LAYOUT SYSTEM USING SEMANTIC WEB TAG OF HTML 5 AND METHOD THREOF}N-SCREEN LAYOUT SYSTEM USING SEMANTIC WEB TAG OF HTML 5 AND METHOD THREOF}

본 발명은 엔-스크린 레이아웃 시스템 및 구현 방법에 관한 것으로서, 좀 더 구체적으로는 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 시스템 및 구현 방법에 관한 것이다.The present invention relates to an n-screen layout system and an implementation method, and more particularly, to an n-screen layout system and an implementation method using semantic web tags of HTML 5.

종래에는 스마트 폰, 태블릿 PC, TV, PC 등의 다양한 매체에서 동영상이나 스트리밍 웹 컨텐츠 등을 옮겨다니면서 볼 수 있는 엔-스크린(N-screeen) 기술이 활발하게 개발되고 있다.Background Art Conventionally, N-screeen technology, which can be viewed while moving video or streaming web content, etc. in various media such as smart phones, tablet PCs, TVs, PCs, etc., has been actively developed.

엔-스크린은 가정에서 직장으로 또는 직장에서 다른 곳으로 옮겨 다니더라도 하나의 컨텐츠를 이어서 볼 수 있도록 한다.N-Screen allows you to continue to view a piece of content even when you move from home to work or from work to work.

최근의 스마트 폰은 디스플레이의 크기가 점차 커져가는 추세이고, 스마트 폰, 태블릿 PC 등의 경계도 애매해 질 정도로 그 크기나 사양 등의 변화 속도가 매우 빠르다. 이처럼 빠르게 변화해 가는 하드웨어의 트렌드를 기존의 엔-스크린 기술이 따라 잡기는 매우 힘들다는 문제점이 있다.Recently, the size of the display is gradually increasing, and the change of size and specifications is very fast, such that the boundaries of smartphones and tablet PCs are vague. There is a problem that it is very difficult for existing N-screen technology to keep up with this rapidly changing hardware trend.

좀 더 설명하면, 기존의 엔-스크린 기술은 다양한 디바이스에 대해 디스플레이의 크기, 운영 체제, 해상도 등을 모두 최적화시켜야 한다. 예를 들어, 태블릿 PC에서는 한 화면에 모두 디스플레이 될 수 있는 웹 페이지도 스마트 폰에서는 여러 화면으로 분할하여 디스플레이되어야 하는 경우도 있다.More specifically, existing N-screen technology must optimize the display size, operating system, and resolution for various devices. For example, a web page, which can be displayed on one screen on a tablet PC, may also be displayed by dividing into multiple screens on a smartphone.

이에, 기존의 엔-스크린 개발자들은 각종 디바이스의 종류 및 사양에 따라 소스 프로그램을 제작하여야 하므로, 개발 시간이나 개발 비용, 개발 인력의 면에서 매우 비효율적이라는 문제점이 있다.Thus, the existing N-screen developers have to produce a source program according to the type and specification of the various devices, there is a problem that is very inefficient in terms of development time, development cost, development personnel.

또한, 각 플랫폼 별로 소스 프로그램을 수정해야 하므로, 유지 보수의 면에서도 매우 번거롭고 복잡해진다는 문제점이 있다.In addition, since the source program must be modified for each platform, there is a problem that it becomes very cumbersome and complicated in terms of maintenance.

본 발명의 목적은 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 시스템을 제공하는 데 있다.An object of the present invention is to provide an en-screen layout system using the semantic web tag of HTML 5.

본 발명의 다른 목적은 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 구현 방법을 제공하는 데 있다.Another object of the present invention is to provide a method for implementing n-screen layout using semantic web tags in HTML 5.

상술한 본 발명의 목적에 따른 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 시스템은, HTML 5(hyper-text markup language 5)의 시맨틱 웹 태그(semantic web tag)로 구성된 웹 컨텐츠를 분석하는 시맨틱 웹 태그 분석 모듈; 디바이스의 유저 에이전트(user agent)를 분석하여 상기 디바이스의 종류, OS(operating system) 및 모바일용 웹 브라우져의 종류를 분석하는 유저 에이전트 분석 모듈; 상기 디스플레이의 사이즈, 해상도 및 웹 컨텐츠의 미디어 타입(media-type)을 분석하는 미디어 타입 분석 모듈; 상기 유저 에이전트 분석 모듈에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져의 종류에 따라 상기 디스플레이의 레이아웃을 구성하고, 상기 미디어 타입 분석 모듈에서 분석된 디스플레이의 사이즈, 해상도 및 미디어 타입에 따라 CSS 3(cascading style sheet 3)를 적용하는 엔-스크린 레이아웃 구성 모듈을 포함하도록 구성될 수 있다.The N-screen layout system using the semantic web tag of HTML 5 according to the object of the present invention described above is a semantic analysis of web content composed of a semantic web tag of HTML 5 (hyper-text markup language 5). A web tag analysis module; A user agent analysis module for analyzing a user agent of a device to analyze the type of the device, an operating system (OS), and a web browser for a mobile device; A media type analysis module for analyzing a size, resolution, and media type of the web content; Configure the layout of the display according to the type of device analyzed by the user agent analysis module, the operating system and the type of mobile web browser, and the size, resolution and media of the display analyzed by the media type analysis module. Depending on the type, it may be configured to include an n-screen layout configuration module that applies cascading style sheet 3 (CSS 3).

여기에서, 상기 엔-스크린 레이아웃 구성 모듈은, 상기 분석된 디바이스의 종류가 스마트 폰인 경우에는 나브(NAV) 태그의 영역 및 섹션(SECTION) 태그의 영역을 상기 디스플레이 상에 모두 레이아웃을 구성하되, 상기 나브 태그 및 섹션 태그의 타입 속성(type attribute)이 각각 프래그먼트(FRAGMENT)이면 디스플레이 영역으로 구성하고 다이얼로그(DIALOG)이면 대화 영역으로 구성할 수 있다.Here, when the type of the analyzed device is a smart phone, the N-screen layout configuration module configures a layout of both an area of a NAV tag and an area of a SECTION tag on the display. If the type attribute of the NAB tag and the section tag are each a fragment, the display area may be configured, and if the dialog is DIALOG, the dialog area may be configured.

또한, 상기 엔-스크린 레이아웃 구성 모듈은, 상기 분석된 디바이스의 종류가 태블릿 PC인 경우에는 나브 태그의 영역은 상기 디스플레이의 좌측 영역에 레이아웃을 구성하고 섹션 영역은 상기 디스플레이의 우측 영역에 레이아웃을 구성하되, 상기 나브 태그가 없는 경우에는 상기 섹션 영역을 상기 디스플레이 전체 영역에 레이아웃을 구성할 수 있다.In addition, the N-screen layout configuration module, when the type of the analyzed device is a tablet PC, the area of the nab tag configures the layout in the left area of the display and the section area configures the layout in the right area of the display. If there is no nab tag, the section area may be configured in the entire display area.

한편, 상기 엔-스크린 레이아웃 구성 모듈은, 상기 디바이스가 스마트 폰인 경우에는 상기 나브 태그의 트랜지션 속성(transition attribute)에 따라 상기 디스플레이에 출력되는 컨텐츠를 상하좌우로 전환하고, 상기 디바이스가 태블릿 PC인 경우에는 상기 나브 태그의 트랜지션 속성을 고려하지 않도록 구성될 수 있다.Meanwhile, when the device is a smart phone, the N-screen layout configuration module switches the content output on the display up, down, left, and right according to the transition attribute of the NAB tag, and when the device is a tablet PC. May be configured not to consider the transition attribute of the NAB tag.

상술한 본 발명의 다른 목적에 따른 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 구현 방법은, 시맨틱 웹 태그 분석 모듈이 HTML 5(hyper-text markup language 5)의 시맨틱 웹 태그(semantic web tag)로 구성된 웹 컨텐츠를 분석하는 단계; 유저 에이전트 분석 모듈이 디바이스의 유저 에이전트(user agent)를 분석하여 상기 디바이스의 종류, OS(operating system) 및 모바일용 웹 브라우져의 종류를 분석하는 단계; 미디어 타입 분석 모듈이 디스플레이의 사이즈, 해상도 및 상기 웹 컨텐츠의 미디어 타입(media-type)을 분석하는 단계; 엔-스크린 레이아웃 구성 모듈이 상기 유저 에이전트 분석 모듈에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져의 종류에 따라 상기 디스플레이의 레이아웃을 구성하는 단계; 상기 엔-스크린 레이아웃 구성 모듈이 상기 미디어 타입 분석 모듈에서 분석된 디스플레이의 사이즈, 해상도 및 미디어 타입에 따라 CSS 3(cascading style sheet 3)를 적용하는 단계를 포함하도록 구성될 수 있다.According to another aspect of the present invention, a method for implementing an N-screen layout using a semantic web tag of HTML 5 includes a semantic web tag of a semantic web tag analysis module 5 (hyper-text markup language 5). Analyzing the web content; Analyzing, by a user agent analysis module, a user agent of a device to analyze the type of the device, an operating system (OS), and a type of web browser for mobile; Analyzing, by a media type analysis module, the size, resolution, and media-type of the web content of the display; Configuring, by the N-screen layout configuration module, the layout of the display according to the type of device analyzed by the user agent analysis module, an operating system, and a type of mobile web browser; The N-screen layout configuration module may be configured to include applying a cascading style sheet 3 (CSS 3) according to the size, resolution, and media type of the display analyzed by the media type analysis module.

이때, 상기 엔-스크린 레이아웃 구성 모듈이 상기 유저 에이전트 분석 모듈에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져의 종류에 따라 상기 디스플레이의 레이아웃을 구성하는 단계는, 상기 분석된 디바이스의 종류가 스마트 폰인 경우에는 나브(NAV) 태그의 영역 및 섹션(SECTION) 태그의 영역을 상기 디스플레이 상에 모두 레이아웃을 구성하되, 상기 나브 태그 및 섹션 태그의 타입 속성(type attribute)이 각각 프래그먼트(FRAGMENT)이면 디스플레이 영역으로 구성하고 다이얼로그(DIALOG)이면 대화 영역으로 구성할 수 있다.In this case, the N-screen layout configuration module configures the layout of the display according to the type of device analyzed by the user agent analysis module, an operating system, and a type of mobile web browser. If the device type is a smart phone, a layout of both the area of the NAV tag and the area of the SECTION tag is configured on the display, and the type attribute of the NAB tag and the section tag are respectively fragments. If it is (FRAGMENT), it can be configured as a display area, and if it is a dialog (DIALOG), it can be configured as a dialog area.

또한, 상기 엔-스크린 레이아웃 구성 모듈이 상기 유저 에이전트 분석 모듈에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져의 종류에 따라 상기 디스플레이의 레이아웃을 구성하는 단계는, 상기 분석된 디바이스의 종류가 태블릿 PC인 경우에는 나브 태그의 영역은 상기 디스플레이의 좌측 영역에 레이아웃을 구성하고 섹션 영역은 상기 디스플레이의 우측 영역에 레이아웃을 구성하되, 상기 나브 태그가 없는 경우에는 상기 섹션 영역을 상기 디스플레이 전체 영역에 레이아웃을 구성할 수 있다.The configuring of the layout of the display according to the type of device analyzed by the user agent analysis module, an operating system, and a type of mobile web browser may be performed by the N-screen layout configuration module. If the device type is a tablet PC, the area of the nav tag constitutes a layout in the left area of the display, and the section area configures the layout in the right area of the display. You can configure the layout over the entire display area.

한편, 상기 엔-스크린 레이아웃 구성 모듈이 상기 유저 에이전트 분석 모듈에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져의 종류에 따라 상기 디스플레이의 레이아웃을 구성하는 단계는, 상기 디바이스가 스마트 폰인 경우에는 상기 나브 태그의 트랜지션 속성(transition attribute)에 따라 상기 디스플레이에 출력되는 컨텐츠를 상하좌우로 전환하고, 상기 디바이스가 태블릿 PC인 경우에는 상기 나브 태그의 트랜지션 속성을 고려하지 않도록 구성될 수 있다.The N-screen layout configuration module configures the layout of the display according to the type of device analyzed by the user agent analysis module, an operating system, and a type of mobile web browser. In the case of a smart phone, the content output on the display may be switched up, down, left, and right according to the transition attribute of the nav tag, and when the device is a tablet PC, the transition attribute of the nav tag may not be considered. have.

상기와 같은 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 시스템 및 구현 방법에 의하면, HTML 5의 시맨틱 웹 태그를 이용함으로써, 개발자들은 하나의 소스 프로그램만 생성하고 이에 따른 다양한 디바이스의 엔-스크린 레이아웃을 구현할 수 있는 효과가 있다.According to the semantic web tag and the method of implementation using the semantic web tag of HTML 5 as described above, by using the semantic web tag of HTML 5, developers create only one source program and accordingly en-screen layout of various devices There is an effect that can be implemented.

이에, 개발 인력이 줄어들고 개발 시간은 물론 개발 비용도 절감되는 효과가 있다. 특히, 다양한 디바이스의 출시 속도에 불구하고 소스 프로그램의 간단한 수정만으로도 다양한 디바이스의 엔-스크린 효과를 구현할 수 있는 장점이 있다.Therefore, the development manpower is reduced, and development time as well as development costs are reduced. In particular, despite the speed of release of various devices, there is an advantage that a simple modification of the source program can implement the n-screen effect of various devices.

그러므로, 개발자들의 유지/보수 비용도 줄어드는 효과가 있다.Therefore, the maintenance cost of developers is also reduced.

도 1은 본 발명의 일 실시예에 따른 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 시스템의 블록 구성도이다.
도 2는 본 발명의 일 실시예에 따른 HTML 5의 시맨틱 웹 태그의 구성도이다.
도 3a 및 도 3b는 본 발명의 일 실시예에 따른 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 화면의 예시도이다.
도 4는 본 발명의 일 실시예에 따른 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 구현 방법의 흐름도이다.1 is a block diagram of an N-screen layout system using semantic web tags of HTML 5 according to an embodiment of the present invention.
2 is a block diagram of a semantic web tag of HTML 5 according to an embodiment of the present invention.
3A and 3B are exemplary views of an N-screen layout screen using the semantic web tag of HTML 5 according to an embodiment of the present invention.
4 is a flowchart illustrating a method of implementing an n-screen layout using semantic web tags of HTML 5 according to an embodiment of the present invention.

본 발명은 다양한 변경을 가할 수 있고 여러 가지 실시예를 가질 수 있는 바, 특정 실시 예들을 도면에 예시하고 발명을 실시하기 위한 구체적인 내용에 상세하게 설명하고자 한다.While the invention is susceptible to various modifications and alternative forms, specific embodiments thereof are shown by way of example in the drawings and will herein be described in detail to the concrete inventive concept.

그러나, 이는 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다.It should be understood, however, that the invention is not intended to be limited to the particular embodiments, but includes all modifications, equivalents, and alternatives falling within the spirit and scope of the invention.

각 도면을 설명하면서 유사한 참조부호를 유사한 구성요소에 대해 사용하였다.Like reference numerals are used for like elements in describing each drawing.

제1, 제2, A, B 등의 용어는 다양한 구성요소들을 설명하는데 사용될 수 있지만, 상기 구성요소들은 상기 용어들에 의해 한정되어서는 안 된다. 상기 용어들은 하나의 구성요소를 다른 구성요소로부터 구별하는 목적으로만 사용된다.The terms first, second, A, B, etc. may be used to describe various elements, but the elements should not be limited by the terms. The terms are used only for the purpose of distinguishing one component from another.

예를 들어, 본 발명의 권리 범위를 벗어나지 않으면서 제1 구성요소는 제2 구성요소로 명명될 수 있고, 유사하게 제2 구성요소도 제1 구성요소로 명명될 수 있다. 및/또는 이라는 용어는 복수의 관련된 기재된 항목들의 조합 또는 복수의 관련된 기재된 항목들 중의 어느 항목을 포함한다.For example, without departing from the scope of the present invention, the first component may be referred to as a second component, and similarly, the second component may also be referred to as a first component. And / or < / RTI > includes any combination of a plurality of related listed items or any of a plurality of related listed items.

어떤 구성요소가 다른 구성요소에 "연결되어" 있다거나 "접속되어" 있다고 언급된 때에는, 그 다른 구성요소에 직접적으로 연결되어 있거나 또는 접속되어 있을 수도 있지만, 중간에 다른 구성요소가 존재할 수도 있다고 이해되어야 할 것이다.When a component is referred to as being "connected" or "connected" to another component, it may be directly connected to or connected to that other component, but it may be understood that other components may be present in between. Should be.

반면에, 어떤 구성요소가 다른 구성요소에 "직접 연결되어" 있다거나 "직접 접속되어" 있다고 언급된 때에는, 중간에 다른 구성요소가 존재하지 않는 것으로 이해되어야 할 것이다.On the other hand, when an element is referred to as being "directly connected" or "directly connected" to another element, it should be understood that there are no other elements in between.

본 출원에서 사용한 용어는 단지 특정한 실시예를 설명하기 위해 사용된 것으로, 본 발명을 한정하려는 의도가 아니다. 단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다.The terminology used herein is for the purpose of describing particular example embodiments only and is not intended to be limiting of the present invention. Singular expressions include plural expressions unless the context clearly indicates otherwise.

본 출원에서, "포함하다" 또는 "가지다" 등의 용어는 명세서상에 기재된 특징, 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것이 존재함을 지정하려는 것이지, 하나 또는 그 이상의 다른 특징들이나 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.In this application, the terms "comprise" or "have" are intended to indicate that there is a feature, number, step, operation, component, part, or combination thereof described in the specification, and one or more other features. It is to be understood that the present invention does not exclude the possibility of the presence or the addition of numbers, steps, operations, components, components, or a combination thereof.

다르게 정의되지 않는 한, 기술적이거나 과학적인 용어를 포함해서 여기서 사용되는 모든 용어들은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에 의해 일반적으로 이해되는 것과 동일한 의미를 가지고 있다.Unless defined otherwise, all terms used herein, including technical or scientific terms, have the same meaning as commonly understood by one of ordinary skill in the art to which this invention belongs.

일반적으로 사용되는 사전에 정의되어 있는 것과 같은 용어들은 관련 기술의 문맥 상 가지는 의미와 일치하는 의미를 가지는 것으로 해석되어야 하며, 본 출원에서 명백하게 정의하지 않는 한, 이상적이거나 과도하게 형식적인 의미로 해석되지 않는다.Terms such as those defined in commonly used dictionaries are to be interpreted as having a meaning consistent with the contextual meaning of the related art and are to be interpreted as either ideal or overly formal in the sense of the present application Do not.

이하, 본 발명에 따른 바람직한 실시예를 첨부된 도면을 참조하여 상세하게 설명한다.Hereinafter, preferred embodiments according to the present invention will be described in detail with reference to the accompanying drawings.

도 1은 본 발명의 일 실시예에 따른 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 시스템의 블록 구성도이다.1 is a block diagram of an N-screen layout system using semantic web tags of HTML 5 according to an embodiment of the present invention.

도 1을 참조하면, 본 발명의 일 실시예에 따른 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 시스템(100)(이하, '엔-스크린 레이아웃 시스템'이라 함)는 시맨틱 웹 태그 분석 모듈(110), 유저 에이전트 분석 모듈(120), 미디어 타입 분석 모듈(130), 엔-스크린 레이아웃 구성 모듈(140)을 포함하도록 구성될 수 있다.Referring to FIG. 1, the N-screen layout system 100 (hereinafter, referred to as an 'en-screen layout system') using the semantic web tag of HTML 5 according to an embodiment of the present invention is a semantic web tag analysis module ( 110, the user agent analysis module 120, the media type analysis module 130, and the N-screen layout configuration module 140.

엔-스크린 레이아웃 시스템(100)은 HTML 5의 시맨틱 웹 태그를 이용하여 스마트 폰이나 태블릿 PC 등 각종 디바이스의 화면 레이아웃을 최적화하여 구성함으로써, 기존에 디바이스 별로 제작하던 엔-스크린 소스 프로그램을 하나만 제작하면 된다. 새로운 디바이스가 출시되면 해당 디바이스에 대해서만 소스 프로그램을 수정/추가하면 되므로, 유지/보수 비용이나 시간이 현저하게 절감되고, 적은 수의 개발 인력으로도 개발이 가능해진다. 이하, 세부적인 구성에 대하여 설명한다.The N-screen layout system 100 uses HTML 5 semantic web tags to optimize screen layouts of various devices such as smartphones and tablet PCs, thereby creating only one N-screen source program previously produced for each device. do. When a new device is released, the source program needs to be modified / added only to that device, which significantly reduces maintenance costs and time, and enables development with a small number of development personnel. Hereinafter, the detailed configuration will be described.

시맨틱 웹 태그 분석 모듈(110)은 HTML 5(hyper-text markup language 5)의 시맨틱 웹 태그(semantic web tag)로 구성된 웹 컨텐츠를 분석하도록 구성될 수 있다. 기본적으로 시맨틱 웹 태그는 나브(NAV) 태그, 섹션(SECTION) 태그 등이 있고, 나브 태그와 섹션 태그는 헤더(HEADER), 아티클(article), 푸터(footer)로 구성된다. HTML 5의 시맨틱 웹 태그에 따라 분석한다.The semantic web tag analysis module 110 may be configured to analyze web content composed of semantic web tags of hyper-text markup language 5 (HTML 5). By default, semantic web tags include NAV tags and SECTION tags. Nav tags and section tags consist of a header, an article, and a footer. Analyze based on HTML 5 semantic web tags.

유저 에이전트 분석 모듈(120)은 디바이스의 유저 에이전트(user agent)를 분석하여 디바이스의 종류, OS(operating system) 및 모바일용 웹 브라우져의 종류를 분석하도록 구성될 수 있다. 유저 에이전트는 디바이스가 아이폰인지 삼성의 갤럭시 스마트 폰인지 등에 대한 정보를 갖고 있으며, 그 디바이스에서 운영되는 운영 체제가 iOS인지 안드로이드 운영체제인지에 대한 정보를 갖고 있으며, 모바일용 웹 브라우져가 태블릿 PC용 웹 라우져인지 스마트 폰의 웹 브라우져인지에 대한 정보를 갖고 있다. 주로 소프트웨어 모듈에 대한 정보를 포함하고 있다. 유저 에이전트 분석 모듈(120)은 이러한 정보를 미리 감지하여 화면 레이아웃을 구성하는 데 이용되도록 한다.The user agent analysis module 120 may be configured to analyze a user agent of a device to analyze a type of device, an operating system (OS), and a type of web browser for mobile. The user agent has information about whether the device is an iPhone or Samsung's Galaxy smartphone, etc. It has information about whether the operating system running on the device is iOS or Android operating system, and the mobile web browser is a web browser for tablet PC. It has information about whether it is a jersey or a web browser on your smartphone. It mainly contains information about software modules. The user agent analysis module 120 detects this information in advance so that it can be used to construct the screen layout.

미디어 타입 분석 모듈(130)은 웹 컨텐츠의 미디어 타입(media-type)을 분석하도록 구성될 수 있다. 또한, 미디어 타입 분석 모듈(130)은 디스플레이(200)의 사이즈나 해상도에 대한 정보를 분석할 수 있다. 미디어 타입 분석 모듈(130)에서 분석되는 미디어 타입은 화면 레이아웃에서 어떠한 디자인으로 출력할 지에 대해 이용될 수 있다.The media type analysis module 130 may be configured to analyze a media-type of web content. In addition, the media type analysis module 130 may analyze information about the size or resolution of the display 200. The media type analyzed by the media type analysis module 130 may be used for what design to output in the screen layout.

엔-스크린 레이아웃 구성 모듈(140)은 유저 에이전트 분석 모듈(120)에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져에 따라 디스플레이(200)의 레이아웃을 구성하고, 미디어 타입 분석 모듈(130)에서 분석된 디스플레이(200)의 사이즈나 해상도 그리고 미디어 타입에 따라 CSS 3(cascading style sheet 3)를 적용하도록 구성될 수 있다.The N-screen layout configuration module 140 configures the layout of the display 200 according to the device type, operating system, and mobile web browser analyzed by the user agent analysis module 120, and analyzes the media type. Cascading style sheet 3 (CSS 3) may be applied according to the size or resolution of the display 200 analyzed by the module 130 and the media type.

예를 들어, 디스플레이(200)가 작으면 각 섹션 태그를 하나의 화면에 디스플레이할 수 있지만, 디스플레이(200)가 크면 여러 개의 섹션 태그와 나브 태그가 함께 하나의 화면에 디스플레이 될 수 있도록 구성될 수 있다.For example, if the display 200 is small, each section tag may be displayed on one screen, but if the display 200 is large, several section tags and nav tags may be displayed together on one screen. have.

그리고 미디어 타입에 따라 다양한 CSS 3가 적용되도록 함으로써, 디스플레이(DISPLAY), 포지션(POSITION), 플로우트(FLOAT) 등의 프라퍼티(PROPERTY)를 활용해서 위치를 설정하거나 기타 다른 스타일 프라퍼티(STYLE PROPERTY)를 적용시켜 화면 레이아웃뿐만 아니라 디자인까지 적용시킬 수 있다. 또한, CSS 3를 활용하여 애니메이션 효과나 페이지 변환도 할 수 있다.By allowing various CSS 3s to be applied according to the media type, the location can be set by using properties such as DISPLAY, POSITION, and FLOAT, or other style properties can be applied. You can apply not only screen layout but also design. You can also use CSS 3 to animate or page-change.

한편, 엔-스크린 레이아웃 구성 모듈(140)은 유저 에이전트 분석 모듈(120)에서 분석된 디바이스의 종류가 스마트 폰인 경우에는 나브(NAV) 태그의 영역 및 섹션(SECTION) 태그의 영역을 디스플레이(200) 상에 모두 레이아웃을 구성할 수 있다.Meanwhile, when the type of device analyzed by the user agent analysis module 120 is a smart phone, the N-screen layout configuration module 140 displays the area of the NAV tag and the area of the SECTION tag 200. The layout can be configured on all of them.

여기에서, 엔-스크린 레이아웃 구성 모듈(140)은 나브 태그 및 섹션 태그의 타입 속성(type attribute)이 각각 프래그먼트(FRAGMENT)이면 디스플레이 영역으로 구성하고 다이얼로그(DIALOG)이면 대화 영역으로 구성할 수 있다.Herein, the N-screen layout configuration module 140 may be configured as a display area when the type attribute of the NAB tag and the section tag are each a fragment, and may be configured as a dialog area when the dialog is DIALOG.

한편, 엔-스크린 레이아웃 구성 모듈(140)은 유저 에이전트 분석 모듈(120)에서 분석된 디바이스의 종류가 태블릿 PC인 경우에는 나브 태그의 영역은 디스플레이(200)의 좌측 영역에 레이아웃을 구성하고 섹션 영역은 디스플레이(200)의 우측 영역에 레이아웃을 구성할 수 있다.Meanwhile, when the device type analyzed by the user agent analysis module 120 is a tablet PC, the N-screen layout configuration module 140 configures a layout in the left area of the display 200 and the section area of the nav tag. The layout may be configured in the right area of the display 200.

이때, 엔-스크린 레이아웃 구성 모듈(140)은 나브 태그가 없는 경우에는 섹션 영역을 디스플레이(200)의 전체 영역에 레이아웃을 구성할 수 있다.In this case, when there is no nav tag, the N-screen layout configuration module 140 may configure a section area on the entire area of the display 200.

다른 한편, 엔-스크린 레이아웃 구성 모듈(140)은 디바이스가 스마트 폰인 경우에는 나브 태그의 트랜지션 속성(transition attribute)에 따라 디스플레이(200)에 출력되는 컨텐츠를 상하좌우로 전환하고, 디바이스가 태블릿 PC인 경우에는 나브 태그의 트랜지션 속성을 고려하지 않도록 구성될 수 있다. 태블릿 PC와 같이 큰 화면에서는 한 번에 디스플레이가 가능하므로, 상하좌우 전환을 할 필요가 없기 때문이다.On the other hand, when the device is a smartphone, the N-screen layout configuration module 140 switches the content output to the display 200 up, down, left, and right according to the transition attribute of the Nav tag, and the device is a tablet PC. In this case, it may be configured not to consider the transition attribute of the NAB tag. This is because a large screen like a tablet PC can be displayed at a time, so there is no need to switch up, down, left, and right.

도 2는 본 발명의 일 실시예에 따른 HTML 5의 시맨틱 웹 태그의 구성도이다.2 is a block diagram of a semantic web tag of HTML 5 according to an embodiment of the present invention.

도 2에서 보듯이, HTML 5의 시맨틱 웹 태그는 크게 나브 태그와 섹션 태그로 구성되고, 나브 태그와 섹션 태그는 각각 헤더, 아티클, 푸터로 구성된다. 섹션 태그는 나브 태그의 아티클에 포함될 수 있다.As shown in FIG. 2, the semantic web tag of HTML 5 is largely composed of nav tags and section tags, and the nav tags and section tags are composed of headers, articles, and footers, respectively. Section tags can be included in articles in nav tags.

도 3a 및 도 3b는 본 발명의 일 실시예에 따른 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 화면의 예시도이다.3A and 3B are exemplary views of an N-screen layout screen using the semantic web tag of HTML 5 according to an embodiment of the present invention.

도 3a는 스마트 폰의 화면을 예시한 것으로서, 디스플레이의 크기가 작으므로 한 화면에 나브 태그, 섹션 1 태그, 섹션 2 태그가 각각 하나씩 디스플레이되도록 구성된다. 그리고 태블릿 PC의 경우에는 디스플레이의 크기가 크므로, 첫 화면에는 나브 태그, 섹션 1 태그가 디스플레이되고, 두번째 화면에는 섹션 2 태그가 디스플레이되도록 구성될 수 있다.3A illustrates an example of a screen of a smartphone. Since the display is small in size, one NAB tag, one section 1 tag, and one section 2 tag are displayed on one screen. In the case of a tablet PC, since the size of the display is large, a nav tag and a section 1 tag may be displayed on the first screen, and a section 2 tag may be displayed on the second screen.

도 4는 본 발명의 일 실시예에 따른 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 구현 방법의 흐름도이다.4 is a flowchart illustrating a method of implementing an n-screen layout using semantic web tags of HTML 5 according to an embodiment of the present invention.

도 4를 참조하면, 시맨틱 웹 태그 분석 모듈(110)이 HTML 5(hyper-text markup language 5)의 시맨틱 웹 태그(semantic web tag)로 구성된 웹 컨텐츠를 분석한다(S110).Referring to FIG. 4, the semantic web tag analysis module 110 analyzes web content composed of a semantic web tag of hyper-text markup language 5 (S110).

다음으로, 유저 에이전트 분석 모듈(120)이 디바이스의 유저 에이전트(user agent)를 분석하여 디바이스의 종류, OS(operating system) 및 모바일용 웹 브라우져의 종류를 분석한다(S120).Next, the user agent analysis module 120 analyzes a user agent of the device to analyze the type of device, an operating system (OS), and the type of mobile web browser (S120).

다음으로, 미디어 타입 분석 모듈(130)이 디스플레이(200)의 사이즈, 해상도, 웹 컨텐츠의 미디어 타입(media-type)을 분석한다(S130).Next, the media type analysis module 130 analyzes the size, resolution, and media-type of the web content of the display 200 (S130).

다음으로, 엔-스크린 레이아웃 구성 모듈(140)이 유저 에이전트 분석 모듈(120)에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져의 종류에 따라 디스플레이(200)의 레이아웃을 구성한다(S140).Next, the N-screen layout configuration module 140 configures the layout of the display 200 according to the type of device analyzed by the user agent analysis module 120, the operating system, and the type of web browser for mobile. (S140).

여기에서, 엔-스크린 레이아웃 구성 모듈(140)은 앞서 분석된 디바이스의 종류가 스마트 폰인 경우에는 나브(NAV) 태그의 영역 및 섹션(SECTION) 태그의 영역을 디스플레이(200) 상에 모두 레이아웃을 구성한다. 이때, 엔-스크린 레이아웃 구성 모듈(140)은 나브 태그 및 섹션 태그의 타입 속성(type attribute)이 각각 프래그먼트(FRAGMENT)이면 디스플레이 영역으로 구성하고 다이얼로그(DIALOG)이면 대화 영역으로 구성한다.Here, the N-screen layout configuration module 140 configures the layout of both the area of the NAV tag and the area of the SECTION tag on the display 200 when the type of the device analyzed above is a smartphone. do. In this case, the N-screen layout configuration module 140 configures the display area when the type attribute of the NAB tag and the section tag are each a fragment, and configures the dialog area when the dialog is DIALOG.

한편, 엔-스크린 레이아웃 구성 모듈(140)은 앞서 분석된 디바이스의 종류가 태블릿 PC인 경우에는 나브 태그의 영역은 디스플레이(200)의 좌측 영역에 레이아웃을 구성하고 섹션 영역은 디스플레이(200)의 우측 영역에 레이아웃을 구성한다. 이때, 엔-스크린 레이아웃 구성 모듈(140)은 나브 태그가 없는 경우에는 섹션 영역을 디스플레이(200)의 전체 영역에 레이아웃을 구성한다.Meanwhile, when the type of the device analyzed above is the tablet PC, the N-screen layout configuration module 140 configures the layout of the Nav tag in the left region of the display 200 and the section region of the N-screen layout configuration module 140 on the right side of the display 200. Configure the layout in the area. In this case, when there is no NAB tag, the N-screen layout configuration module 140 configures the section area on the entire area of the display 200.

다른 한편, 엔-스크린 레이아웃 구성 모듈(140)은 디바이스가 스마트 폰인 경우에는 나브 태그의 트랜지션 속성(transition attribute)에 따라 디스플레이(200)에 출력되는 컨텐츠를 상하좌우로 전환하고, 디바이스가 태블릿 PC인 경우에는 나브 태그의 트랜지션 속성을 고려하지 않도록 구성된다.On the other hand, when the device is a smartphone, the N-screen layout configuration module 140 switches the content output to the display 200 up, down, left, and right according to the transition attribute of the Nav tag, and the device is a tablet PC. In this case, the transition attribute of the NAB tag is not considered.

다음으로, 엔-스크린 레이아웃 구성 모듈(140)이 미디어 타입 분석 모듈(130)에서 분석된 디스플레이(200)의 사이즈나 해상도와 미디어 타입에 따라 CSS 3(cascading style sheet 3)를 적용한다(S150). 그리고 레이아웃 및 적용된 CSS 3에 따라 디스플레이(200)에 출력된다.Next, the N-screen layout configuration module 140 applies cascading style sheet 3 (CSS 3) according to the size or resolution and the media type of the display 200 analyzed by the media type analysis module 130 (S150). . The display 200 is output to the display 200 according to the layout and the applied CSS 3.

이상 실시예를 참조하여 설명하였지만, 해당 기술 분야의 숙련된 당업자는 하기의 특허청구범위에 기재된 본 발명의 사상 및 영역으로부터 벗어나지 않는 범위 내에서 본 발명을 다양하게 수정 및 변경시킬 수 있음을 이해할 수 있을 것이다.It will be apparent to those skilled in the art that various modifications and variations can be made in the present invention without departing from the spirit or scope of the invention as defined in the following claims. There will be.

Claims (4)

HTML 5(hyper-text markup language 5)의 시맨틱 웹 태그(semantic web tag)로 구성된 웹 컨텐츠를 분석하는 시맨틱 웹 태그 분석 모듈;
디바이스의 유저 에이전트(user agent)를 분석하여 상기 디바이스의 종류, OS(operating system) 및 모바일용 웹 브라우져의 종류를 분석하는 유저 에이전트 분석 모듈;
디스플레이의 사이즈, 해상도 및 상기 웹 컨텐츠의 미디어 타입(media-type)을 분석하는 미디어 타입 분석 모듈;
상기 유저 에이전트 분석 모듈에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져의 종류에 따라 상기 디스플레이의 레이아웃을 구성하고, 상기 미디어 타입 분석 모듈에서 분석된 디스플레이의 사이즈, 해상도 및 미디어 타입에 따라 CSS 3(cascading style sheet 3)를 적용하는 엔-스크린 레이아웃 구성 모듈을 포함하고,
상기 엔-스크린 레이아웃 구성 모듈은,
상기 분석된 디바이스의 종류가 스마트 폰인 경우에는 나브(NAV) 태그의 영역 및 섹션(SECTION) 태그의 영역을 상기 디스플레이 상에 모두 레이아웃을 구성하되, 상기 나브 태그 및 섹션 태그의 타입 속성(type attribute)이 각각 프래그먼트(FRAGMENT)이면 디스플레이 영역으로 구성하고 다이얼로그(DIALOG)이면 대화 영역으로 구성하고,
상기 분석된 디바이스의 종류가 태블릿 PC인 경우에는 나브 태그의 영역은 상기 디스플레이의 좌측 영역에 레이아웃을 구성하고 섹션 영역은 상기 디스플레이의 우측 영역에 레이아웃을 구성하되, 상기 나브 태그가 없는 경우에는 상기 섹션 영역을 상기 디스플레이 전체 영역에 레이아웃을 구성하는 것을 특징으로 하는 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 시스템.A semantic web tag analysis module for analyzing web content composed of semantic web tags of hyper-text markup language 5 (HTML 5);
A user agent analysis module for analyzing a user agent of a device to analyze the type of the device, an operating system (OS), and a web browser for a mobile device;
A media type analysis module for analyzing a size, a resolution of a display, and a media-type of the web content;
Configure the layout of the display according to the type of device analyzed by the user agent analysis module, the operating system and the type of mobile web browser, and the size, resolution and media of the display analyzed by the media type analysis module. Includes an n-screen layout configuration module that applies cascading style sheet 3 (CSS 3) depending on the type.
The N-screen layout configuration module,
If the type of the analyzed device is a smart phone, a layout of both an area of a NAV tag and an area of a SECTION tag is configured on the display, but a type attribute of the NAB tag and a section tag is used. Each of them consists of a display area if it is a fragment, and a dialog area if it is a dialog.
If the type of the analyzed device is a tablet PC, the area of the nav tag constitutes a layout in the left area of the display, and the section area configures the layout in the right area of the display. An N-screen layout system using HTML 5 semantic web tag, characterized in that the layout is configured in the entire area of the display. 제1항에 있어서, 상기 엔-스크린 레이아웃 구성 모듈은,
상기 디바이스가 스마트 폰인 경우에는 상기 나브 태그의 트랜지션 속성(transition attribute)에 따라 상기 디스플레이에 출력되는 컨텐츠를 상하좌우로 전환하고, 상기 디바이스가 태블릿 PC인 경우에는 상기 나브 태그의 트랜지션 속성을 고려하지 않는 것을 특징으로 하는 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 시스템.The method of claim 1, wherein the N-screen layout configuration module,
When the device is a smart phone, the content output on the display is switched up, down, left, and right according to the transition attribute of the NAB tag, and when the device is a tablet PC, the transition attribute of the NAB tag is not considered. N-screen layout system using the semantic web tag of HTML 5. 시맨틱 웹 태그 분석 모듈이 HTML 5(hyper-text markup language 5)의 시맨틱 웹 태그(semantic web tag)로 구성된 웹 컨텐츠를 분석하는 단계;
유저 에이전트 분석 모듈이 디바이스의 유저 에이전트(user agent)를 분석하여 상기 디바이스의 종류, OS(operating system) 및 모바일용 웹 브라우져의 종류를 분석하는 단계;
미디어 타입 분석 모듈이 디스플레이의 사이즈, 해상도 및 상기 웹 컨텐츠의 미디어 타입(media-type)을 분석하는 단계;
엔-스크린 레이아웃 구성 모듈이 상기 유저 에이전트 분석 모듈에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져의 종류에 따라 상기 디스플레이의 레이아웃을 구성하는 단계;
상기 엔-스크린 레이아웃 구성 모듈이 상기 미디어 타입 분석 모듈에서 분석된 미디어 타입에 따라 CSS 3(cascading style sheet 3)를 적용하는 단계를 포함하고,
상기 엔-스크린 레이아웃 구성 모듈이 상기 유저 에이전트 분석 모듈에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져의 종류에 따라 상기 디스플레이의 레이아웃을 구성하는 단계는,
상기 분석된 디바이스의 종류가 스마트 폰인 경우에는 나브(NAV) 태그의 영역 및 섹션(SECTION) 태그의 영역을 상기 디스플레이 상에 모두 레이아웃을 구성하되, 상기 나브 태그 및 섹션 태그의 타입 속성(type attribute)이 각각 프래그먼트(FRAGMENT)이면 디스플레이 영역으로 구성하고 다이얼로그(DIALOG)이면 대화 영역으로 구성하고,
상기 분석된 디바이스의 종류가 태블릿 PC인 경우에는 나브 태그의 영역은 상기 디스플레이의 좌측 영역에 레이아웃을 구성하고 섹션 영역은 상기 디스플레이의 우측 영역에 레이아웃을 구성하되, 상기 나브 태그가 없는 경우에는 상기 섹션 영역을 상기 디스플레이 전체 영역에 레이아웃을 구성하는 것을 특징으로 하는 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 구현 방법.The semantic web tag analysis module analyzing web content composed of semantic web tags of hyper-text markup language 5 (HTML 5);
Analyzing, by a user agent analysis module, a user agent of a device to analyze the type of the device, an operating system (OS), and a type of web browser for mobile;
Analyzing, by a media type analysis module, the size, resolution, and media-type of the web content of the display;
Configuring, by the N-screen layout configuration module, the layout of the display according to the type of device analyzed by the user agent analysis module, an operating system, and a type of mobile web browser;
Applying, by the N-screen layout configuration module, cascading style sheet 3 (CSS 3) according to the media type analyzed by the media type analysis module;
The N-screen layout configuration module may configure the layout of the display according to the type of device analyzed by the user agent analysis module, an operating system, and a type of mobile web browser.
If the type of the analyzed device is a smart phone, a layout of both an area of a NAV tag and an area of a SECTION tag is configured on the display, but a type attribute of the NAB tag and a section tag is used. Each of them consists of a display area if it is a fragment, and a dialog area if it is a dialog.
If the type of the analyzed device is a tablet PC, the area of the nav tag constitutes a layout in the left area of the display, and the section area configures the layout in the right area of the display. A method of implementing an n-screen layout using semantic web tags of HTML 5, wherein a layout is configured on the entire display area. 제3항에 있어서, 상기 엔-스크린 레이아웃 구성 모듈이 상기 유저 에이전트 분석 모듈에서 분석된 디바이스의 종류, 운영 체제(operating system) 및 모바일용 웹 브라우져의 종류에 따라 상기 디스플레이의 레이아웃을 구성하는 단계는,
상기 디바이스가 스마트 폰인 경우에는 상기 나브 태그의 트랜지션 속성(transition attribute)에 따라 상기 디스플레이에 출력되는 컨텐츠를 상하좌우로 전환하고, 상기 디바이스가 태블릿 PC인 경우에는 상기 나브 태그의 트랜지션 속성을 고려하지 않는 것을 특징으로 하는 HTML 5의 시맨틱 웹 태그를 이용한 엔-스크린 레이아웃 구현 방법.The method of claim 3, wherein the N-screen layout configuration module configures the layout of the display according to the type of device analyzed by the user agent analysis module, an operating system, and a type of mobile web browser. ,
When the device is a smart phone, the content output on the display is switched up, down, left, and right according to the transition attribute of the NAB tag, and when the device is a tablet PC, the transition attribute of the NAB tag is not considered. A method of implementing an n-screen layout using semantic web tags of HTML 5, characterized in that.
KR1020120143560A 2012-12-11 2012-12-11 N-screen layout system using semantic web tag of html 5 and method threof KR101341996B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020120143560A KR101341996B1 (en) 2012-12-11 2012-12-11 N-screen layout system using semantic web tag of html 5 and method threof

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020120143560A KR101341996B1 (en) 2012-12-11 2012-12-11 N-screen layout system using semantic web tag of html 5 and method threof

Publications (1)

Publication Number Publication Date
KR101341996B1 true KR101341996B1 (en) 2013-12-16

Family

ID=49988419

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020120143560A KR101341996B1 (en) 2012-12-11 2012-12-11 N-screen layout system using semantic web tag of html 5 and method threof

Country Status (1)

Country Link
KR (1) KR101341996B1 (en)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20150071083A (en) * 2013-12-17 2015-06-26 에스케이플래닛 주식회사 System and method for advertisement display, and apparatus applied to the same
CN111814429A (en) * 2020-07-30 2020-10-23 深圳壹账通智能科技有限公司 Article typesetting method and device, terminal equipment and storage medium

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20150071083A (en) * 2013-12-17 2015-06-26 에스케이플래닛 주식회사 System and method for advertisement display, and apparatus applied to the same
KR102210824B1 (en) * 2013-12-17 2021-02-01 에스케이플래닛 주식회사 System and method for advertisement display, and apparatus applied to the same
CN111814429A (en) * 2020-07-30 2020-10-23 深圳壹账通智能科技有限公司 Article typesetting method and device, terminal equipment and storage medium

Similar Documents

Publication Publication Date Title
KR102436987B1 (en) Method and terminal device for extracting web page content
CN106156066B (en) Page switching method, device and client
KR101065644B1 (en) A method and a device for browsing information feeds
US9247199B2 (en) Method of providing information-of-users' interest when video call is made, and electronic apparatus thereof
KR102368044B1 (en) User terminal device and method for controlling the user terminal device thereof
KR20140144104A (en) Electronic apparatus and Method for providing service thereof
KR20140030299A (en) Techniques for zooming in and out with dynamic content
CN105488051B (en) Webpage processing method and device
US20150312508A1 (en) User terminal device, method for controlling user terminal device and multimedia system thereof
US10089006B2 (en) Display apparatus and the method thereof
US20160334952A1 (en) Terminal and method for sorting pages of user interface
US20140157190A1 (en) Grid display device and grid display method in mobile terminal
CN103986832A (en) Screen lock interface implementation method for smart phone
CN103049193A (en) Method and device for implementing webpage turning by keys
US20170177208A1 (en) Systems and wearable devices and methods for operating a computer
Roudaki et al. A classification of web browsing on mobile devices
US10108388B2 (en) Display apparatus and controlling method thereof
CN103970839A (en) Method for controlling webpage browsing through voice
CN110275704A (en) Page data processing method and device, storage medium and electronic equipment
US11069019B2 (en) Multi-threaded asynchronous frame processing
KR20150142347A (en) User terminal device, and Method for controlling for User terminal device, and multimedia system thereof
KR101341996B1 (en) N-screen layout system using semantic web tag of html 5 and method threof
CN105359104A (en) Synchronization points for state information
KR20140057038A (en) Display apparatus and method for displaying list thereof
KR20160134355A (en) Display apparatus and Method for controlling display apparatus thereof

Legal Events

Date Code Title Description
A201 Request for examination
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20160926

Year of fee payment: 4

FPAY Annual fee payment

Payment date: 20171121

Year of fee payment: 5

FPAY Annual fee payment

Payment date: 20181101

Year of fee payment: 6