KR101090673B1 - Method for displaying webpage, and computer readable record medium for the same - Google Patents
Method for displaying webpage, and computer readable record medium for the same Download PDFInfo
- Publication number
- KR101090673B1 KR101090673B1 KR1020100028023A KR20100028023A KR101090673B1 KR 101090673 B1 KR101090673 B1 KR 101090673B1 KR 1020100028023 A KR1020100028023 A KR 1020100028023A KR 20100028023 A KR20100028023 A KR 20100028023A KR 101090673 B1 KR101090673 B1 KR 101090673B1
- Authority
- KR
- South Korea
- Prior art keywords
- main block
- display area
- screen display
- screen
- boundary
- Prior art date
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]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
- G06F3/04855—Interaction with scrollbars
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Abstract
본 발명은 웹페이지 표시 기술에 관한 것이다. 본 발명에 따른 웹페이지 표시 방법은, 복수 개의 블럭으로 이루어진 웹페이지의 일부를 표시하는 제 1 화면 표시 영역(310)에 대하여 화면이동 터치 조작을 감지하는 제 1 단계; 화면이동 터치 조작에 따른 이동량을 산출하는 제 2 단계; 위 산출된 이동량에 따라 웹페이지에서 표시 영역을 이동시킨 이후의 제 2 화면 표시 영역(320)을 검출하는 제 3 단계; 웹페이지의 블럭들 중에서 제 2 화면 표시 영역(320) 내의 메인블럭을 검출하는 제 4 단계; 메인블럭의 경계면과 제 2 화면 표시 영역(320)의 외곽라인 간의 이격거리를 산출하는 제 5 단계; 메인블럭의 경계면과 제 2 화면 표시 영역(320)의 외곽라인을 맞추도록 이동량을 재설정하여 디스플레이 화면을 조정하는 제 6 단계;를 포함한다. 본 발명에 따르면, 웹페이지 내에서 사용자의 스크롤 입력에 따라 메인으로 디스플레이되는 메인블럭의 컨텐츠나 구성의 단절 없이 웹페이지 표시 장치의 표시 화면에 디스플레이할 수 있다.The present invention relates to a web page display technology. According to an aspect of the present invention, there is provided a web page display method comprising: a first step of detecting a screen touch operation on a first screen display area (310) displaying a portion of a web page composed of a plurality of blocks; Calculating a movement amount according to the screen movement touch operation; A third step of detecting the second screen display area 320 after moving the display area on the web page according to the calculated movement amount; Detecting a main block in the second screen display area 320 among the blocks of the web page; Calculating a separation distance between a boundary of the main block and an outer line of the second screen display area 320; And a sixth step of adjusting the display screen by resetting the movement amount so as to align the boundary of the main block with the outer line of the second screen display area 320. According to the present invention, it is possible to display on the display screen of the web page display device without disconnecting the content or configuration of the main block displayed as the main in response to the user's scroll input in the web page.
Description
본 발명은 사용자가 웹페이지를 스크롤하는 경우 컨텐츠의 내용이나 구성을 반영하여 웹페이지를 표시하는 기술에 관한 것이다.
The present invention relates to a technology for displaying a web page by reflecting the content or configuration of the content when the user scrolls the web page.
휴대 단말기는 음성/영상 통화 기능, 정보 입출력 기능, 데이터 저장 기능 등을 하나 이상 갖춘 휴대용 기기이다.The portable terminal is a portable device having one or more voice / video call functions, information input / output functions, and data storage functions.
이러한 휴대 단말기는 그 기능이 다양화됨에 따라 사진 동영상의 촬영, 음악 동영상 파일의 재생, 게임, 방송 수신, 무선 인터넷 등과 같은 복잡한 기능을 갖추게 되었으며, 종합 멀티미디어 기기로 구현되고 있다.As the functions of the portable terminals are diversified, the portable terminals have complicated functions such as photographing video clips, playing music video files, playing games, receiving broadcasts, wireless Internet, and the like.
그런데, 휴대 단말기가 무선 인터넷 기능을 제공함에 따라 화면에 웹페이지를 디스플레이 하지만, 표시 영역의 한계로 웹페이지의 일부만이 디스플레이되는 문제가 있다. 유선 단말기를 통해 웹페이지를 디스플레이하는 경우에도 표시 영역의 한계로 웹페이지의 일부만이 디스플레이되는 경우가 있다.By the way, although the mobile terminal displays the web page on the screen as it provides the wireless Internet function, only a part of the web page is displayed due to the limitation of the display area. Even when the webpage is displayed through the wired terminal, only a part of the webpage may be displayed due to the limitation of the display area.
즉, 웹페이지 내에서 사용자가 스크롤을 수행하는 경우, 표시 단말기가 컨텐츠 내용이나 구성에 관계없이 이동량을 결정하여 진행함으로써 화면에 표시되는 컨텐츠가 적절한 위치에 표시되지 않는 문제점이 있다.
That is, when the user scrolls in the web page, the display terminal determines the amount of movement regardless of the content content or configuration, and thus the content displayed on the screen is not displayed at an appropriate position.
본 발명의 목적은 웹페이지 표시할 때, 메인블럭이 화면 외곽으로부터 임계 거리 내에 진입하면 메인블럭의 이동 종료지점을 화면 외곽으로 조정하여 표시함으로써 웹페이지를 스크롤 할 때 사용자가 원하는 위치에 자동으로 정지하도록 하는 웹페이지 표시 기술을 제공하는 것이다.
An object of the present invention, when displaying the web page, if the main block enters within the threshold distance from the outside of the screen by adjusting the movement end point of the main block to the outside of the screen to automatically stop at the desired position when scrolling the web page It is to provide web page display technology.
본 발명에 따른 웹페이지 표시 방법은, 웹페이지 내에 스크롤 입력이 감지되면 스크롤 입력에 따른 이동량을 산출하는 단계; 그 산출된 이동량에 따른 화면 표시 영역과 표시 영역 내에 메인으로 디스플레이되는 메인블럭을 검출하는 단계; 이동량에 따른 이동시, 메인블럭이 화면 외곽으로부터 기설정된 임계 거리 내에 진입하는지 확인하는 단계; 임계 거리 내에 진입한 경우, 메인블럭의 이동 종료지점을 화면 외곽으로 조정하는 단계; 조정에 따라 메인블럭의 블럭 경계가 화면 외곽에 위치하도록 표시하는 단계를 포함한다.According to an aspect of the present invention, there is provided a web page displaying method comprising: calculating a movement amount according to a scroll input when a scroll input is detected in a web page; Detecting a screen display area according to the calculated movement amount and a main block displayed mainly in the display area; Checking whether the main block enters within a predetermined threshold distance from the outside of the screen during the movement according to the movement amount; Adjusting a moving end point of the main block to the outside of the screen when entering the threshold distance; And displaying the block boundary of the main block at the outside of the screen according to the adjustment.
본 발명에 따른 웹페이지 표시 장치는, 웹페이지 내에 스크롤 입력이 감지되면 스크롤 입력에 따른 이동량을 산출하는 센서부; 그 산출된 이동량에 따른 화면 표시 영역과 표시 영역 내에 메인으로 디스플레이되는 메인블럭을 검출하고, 이동량에 따른 이동시, 메인블럭이 화면 외곽으로부터 기설정된 임계 거리 내에 진입하는지 확인하여, 임계 거리 내인 경우 메인블럭의 이동 종료지점을 화면 외곽으로 조정하는 제어부; 메인블럭의 이동 종료지점 조정에 따라 메인블럭의 블럭 경계가 화면 외곽에 위치하도록 표시하는 표시부를 포함한다.
According to an aspect of the present invention, there is provided a web page display apparatus comprising: a sensor unit configured to calculate a movement amount according to a scroll input when a scroll input is detected in a web page; Detects the main display displayed on the screen display area and the display area according to the calculated movement amount, and when moving according to the movement amount, checks whether the main block enters within a predetermined threshold distance from the outside of the screen, and if the main block is within the threshold distance, the main block. A control unit for adjusting a moving end point of the screen to the outside of the screen; The display unit may be configured to display the block boundary of the main block at the outside of the screen according to the adjustment of the movement end point of the main block.
본 발명에 따르면, 웹페이지 내에서 스크롤에 따라 메인으로 디스플레이되는 메인블럭을 컨텐츠나 구성의 단절 없이 웹페이지 표시 장치(예: 휴대 단말기)의 표시 화면에 디스플레이할 수 있다.According to the present invention, the main block displayed as the main page according to the scroll in the web page can be displayed on the display screen of the web page display device (for example, the mobile terminal) without disconnecting the content or the configuration.
이에 따라, 메인블럭의 컨텐츠나 구성의 화면 정렬을 위해 잦은 플릭킹을 수행하는 불편을 감소시켜 사용자에게 편리함을 제공할 수 있다.
Accordingly, it is possible to provide convenience to the user by reducing the inconvenience of performing frequent flicking for screen alignment of the contents or configuration of the main block.
[도 1]은 본 발명에 따른 웹페이지 표시 장치의 실시예를 나타낸 블럭도.
[도 2]는 웹페이지의 구성 실시예를 나타낸 도면.
[도 3]은 웹페이지 내에서 플리킹에 의한 이동량 산출을 나타낸 도면.
[도 4]는 메인블럭을 화면 표시 영역의 외곽으로 맞춘 모습을 나타낸 도면.
[도 5]는 웹페이지 내에서 사용자의 가로스크롤에 의한 이동량 산출에 따른 화면 표시 영역을 나타낸 도면.
[도 6]은 가로스크롤에 따른 메인블럭의 이동 종료지점을 화면 외곽으로 조정한 화면 표시 영역을 나타낸 도면.
[도 7]은 웹페이지 내에서 사용자의 세로스크롤에 의한 이동량 산출에 따른 화면 표시 영역을 나타낸 도면.
[도 8]은 세로스크롤에 따른 메인블럭의 이동 종료지점을 화면 외곽으로 조정한 화면 표시 영역을 나타낸 도면.
[도 9]는 웹페이지 내에 스크롤 입력을 나타낸 도면.
[도 10]은 본 발명의 화면 자동맞춤 기능이 적용된 웹페이지를 나타낸 도면.
[도 11]은 본 발명에 따른 웹페이지 표시 방법을 나타낸 순서도.1 is a block diagram showing an embodiment of a web page display device according to the present invention;
2 is a diagram showing an embodiment of a configuration of a web page.
3 is a diagram illustrating a calculation of a movement amount by flicking in a web page.
4 is a view showing a state in which the main block is aligned to the outside of the screen display area.
FIG. 5 is a diagram illustrating a screen display area according to a movement amount calculated by a horizontal scroll of a user in a web page. FIG.
FIG. 6 is a diagram illustrating a screen display area in which a moving end point of a main block according to horizontal scrolling is adjusted to the outside of the screen; FIG.
FIG. 7 is a diagram illustrating a screen display area according to a movement amount calculated by a vertical scroll of a user in a web page. FIG.
FIG. 8 is a diagram illustrating a screen display area in which a movement end point of a main block according to vertical scrolling is adjusted to the outside of the screen; FIG.
9 illustrates scroll input within a web page.
10 is a view showing a web page to which the screen alignment function of the present invention is applied.
11 is a flowchart showing a web page display method according to the present invention.
이하에서는 도면을 참조하여 본 발명을 보다 상세하게 설명한다.Hereinafter, with reference to the drawings will be described the present invention in more detail.
[도 1]은 본 발명에 따른 웹페이지 표시 장치를 나타내고, [도 2]는 본 발명에서 참조하는 웹페이지 구성을 나타낸다.1 shows a web page display apparatus according to the present invention, and FIG. 2 shows a web page configuration referred to in the present invention.
[도 1]을 참조하면, 웹페이지 표시 장치(100)는 예컨대 휴대폰, 스마트폰, 피엠피(PMP), 전자책(E-Book) 단말기 등과 같은 휴대 단말기로 구비될 수 있으며, 무선통신부(102), 표시부(104), 입력부(106), 센서부(108), 제어부(110), 저장부(112), 전원공급부(114)를 포함할 수 있다. 웹페이지 표시 장치(100)는 휴대 단말기에 한정되지 않으며 네비게이션과 같이 표시부가 터치 스크린으로 구비되는 단말기에 모두 적용될 수 있다.Referring to FIG. 1, the webpage display apparatus 100 may be provided as a mobile terminal such as a mobile phone, a smart phone, a PMP, an e-book terminal, and the like, and the
무선통신부(102)는 이동통신망을 통해 무선 신호를 송수신하는 이동통신 모듈, 무선 인터넷 접속을 위한 무선 인터넷 모듈을 포함할 수 있다.The
표시부(104)는 웹페이지 표시 장치에서 처리되는 정보를 표시 출력한다. 예를 들어 웹페이지 표시 장치가 휴대 단말기이면 통화 모드에서 통화 관련 UI나 GUI를 표시한다. 휴대 단말기가 화상 통화 모드나 촬영 모드이면, 촬영되거나 수신된 영상을 각각 또는 동시에 표시할 수 있다. 표시부(104)는 액정 디스플레이, 박막 트랜지스터 액정 디스플레이, 유기 발광 다이오드, 플렉시블 디스플레이, 3차원 디스플레이 중 적어도 하나를 포함할 수 있다.The
표시부(104)는 휴대 단말기가 무선 인터넷에 접속할 때 화면 크기 제한으로 모바일 웹페이지의 일부 영역만 표시할 수 있다. 웹페이지(200)는 [도 2]에 도시된 바와 같이 복수의 블럭(202 내지 216)으로 구성될 수 있으며, 각 블럭은 상응하는 컨텐츠를 표시할 수 있다.The
표시부(104)는 웹페이지(200) 내 스크롤 입력에 의해 산출된 이동량에 따른 화면 표시 영역에서 메인으로 디스플레이되는 메인블럭의 블럭 경계가 화면 외곽에 위치하도록 표시할 수 있다.The
입력부(106)는 사용자가 단말기의 동작 제어를 위하여 입력하는 키 입력 데이터를 발생시킨다. 입력부(106)는 키 패드, 돔 스위치, 터치 패드 등으로 구성될 수 있다. 특히, 터치 패드는 표시부(104)와 상호 레이어 구조를 이루는 터치 스크린으로 구현될 수 있다.The
센서부(108)는 웹페이지 내에 플릭킹(flicking)이나 스크롤바에 의해 스크롤 입력이 감지되면, 이에 따른 이동량을 산출할 수 있다.When a scroll input is detected by flicking or scroll bars in the web page, the
제어부(110)는 휴대 단말기의 전반적인 동작을 제어하며, 예컨대 음성 통화, 데이터 통신, 화상 통화 등을 위한 제어 및 처리를 수행할 수 있다.The
제어부(110)는 그 산출된 이동량에 따른 화면 표시 영역과 표시 영역 내에 메인으로 디스플레이되는 메인블럭을 검출하고, 이동량에 따른 이동시, 메인블럭이 화면 외곽으로부터 기설정된 임계 거리 내에 진입하는지 확인하여, 임계 거리 내인 경우 메인블럭의 이동 종료지점을 화면 외곽으로 조정한다.The
이때, 메인블럭의 이동 방향이 위쪽인 경우, 메인블럭의 이동 종료지점을 화면 외곽의 테두리로 조정할 수 있다. 또한, 이동 방향이 아래쪽인 경우, 메인블럭의 이동 종료지점을 화면 외곽의 하단 테두리로 조정할 수 있다.In this case, when the moving direction of the main block is upward, the moving end point of the main block may be adjusted to the outside border of the screen. In addition, when the movement direction is downward, the movement end point of the main block may be adjusted to the lower edge of the outside of the screen.
이동 방향이 왼쪽인 경우, 메인 블록의 이동 종료지점을 화면 외곽의 좌측 테두리로 조정할 수 있다. 또한, 이동 방향이 오른쪽인 경우, 메인블럭의 이동 종료지점을 화면 외곽의 우측 테두리로 조정할 수 있다.If the movement direction is left, the movement end point of the main block may be adjusted to the left edge of the outside of the screen. In addition, when the movement direction is right, the movement end point of the main block may be adjusted to the right edge of the outside of the screen.
이동 방향이 대각선인 경우, 메인블럭의 이동 종료지점을 화면 외곽의 상단 또는 하단 테두리로 제 1 조정하고 우측 테두리 또는 좌측 테두리로 제 2 조정할 수 있다. 또한, 이동 방향이 대각선인 경우, 메인블럭의 제 1 인접 블럭과 제 2 인접 블럭의 교차점인 포인트 지점으로부터 메인블럭까지의 거리를 산출하여, 산출 거리에 따라 메인블럭의 이동 종료 시점을 조정할 수 있다.When the moving direction is diagonal, the moving end point of the main block may be first adjusted to the upper or lower border of the outside of the screen and secondly to the right or left border. In addition, when the moving direction is diagonal, the distance from the point of the intersection of the first adjacent block and the second adjacent block of the main block to the main block may be calculated, and the end point of the movement of the main block may be adjusted according to the calculated distance. .
가로스크롤인 경우, 메인블럭의 좌측면이 화면 외곽의 좌측 테두리로부터 기설정된 임계 거리 내에 진입하는지 확인하여, 임계 거리 내 진입한 경우, 메인블럭의 좌측면이 화면 외곽의 좌측 테두리에 위치하도록 조정할 수 있다.In case of horizontal scroll, check whether the left side of the main block is within the preset threshold distance from the left edge of the outside of the screen, and when entering within the threshold distance, the left side of the main block can be adjusted to be located at the left edge of the outside of the screen. have.
세로스크롤인 경우, 메인블럭의 상단이 화면 외곽의 상측 테두리로부터 기설정된 임계 거리 내에 진입하는지 확인하여, 임계 거리 내 진입한 경우, 메인블럭의 상단이 화면 외곽의 상측 테두리에 위치하도록 조정할 수 있다.In the case of vertical scroll, the upper end of the main block may be adjusted to be within a predetermined threshold distance from the upper edge of the outer edge of the screen.
저장부(112)는 제어부(110)의 처리 및 제어 프로그램이 저장될 수 있고 입출력되는 데이터를 임시 저장할 수 있다. 또한, 메인블럭과 화면 외곽과의 거리에 대해 미리 설정된 임계 거리를 저장할 수 있다.The
전원공급부(114)는 제어부(110)의 제어에 의해 외부의 전원, 내부의 전원을 인가받아 각 구성요소들의 동작에 필요한 전원을 공급할 수 있다.
The
[도 3]은 웹페이지 내에서 사용자의 플릭킹에 의한 이동량 산출에 따른 화면 표시 영역을 나타내고, [도 4]는 메인블럭을 화면 표시 영역의 외곽으로 조정한 모습을 나타낸다.FIG. 3 illustrates a screen display area according to calculation of a movement amount by a user's flicking in a web page, and FIG. 4 illustrates a state in which the main block is adjusted to the outside of the screen display area.
[도 3]을 참조하면 웹페이지(300)는 웹페이지 표시 장치(예: 휴대 단말기)의 화면에 표시되는 화면 표시 영역(310, 320)과 화면에 표시되지 않는 화면 히든 영역(330)으로 분류될 수 있다.Referring to FIG. 3, the
제 1 화면 표시 영역(310)은 초기 위치에서 컨텐츠를 표시한다. 사용자가 플릭킹을 수행하면, 웹페이지 표시 장치는 플릭킹에 따른 이동량을 산출하고, 이동량에 따른 제 2 화면 표시 영역(320)을 검출한다. 그리고, 웹페이지(300)를 구성하는 복수의 블럭 중에서([도 2] 참조) 제 2 화면 표시 영역(320) 내에 메인으로 디스플레이되는 메인블럭을 검출할 수 있다.The first
또한, 플릭킹에 따른 이동시, 메인블럭 이동 방향으로의 인접 블럭(예: 제 1 인접 블럭, 제 2 인접 블럭)이 화면 외곽으로부터 기설정된 임계 거리 내에 진입하는지 또는 화면 외곽이 인접 블럭의 임계 거리(예: L1threshold, L2threshold) 내에 진입하는지 확인하여, 임계 거리 내인 경우 메인블럭의 이동 종료지점을 인접 블럭과의 경계 지점으로 조정할 수 있다.In addition, when the flicking moves, adjacent blocks (eg, the first adjacent block and the second adjacent block) in the main block moving direction enter within a predetermined threshold distance from the outside of the screen, or the outside of the screen includes a threshold distance of the adjacent blocks ( For example, L1 threshold and L2 threshold ) can be checked, and if it is within the threshold distance, the moving end point of the main block can be adjusted to the boundary point with the adjacent block.
이에 따라, 화면 표시 영역(420)은 메인블럭의 블럭 경계가 화면 표시 영역의 외곽에 위치하도록 표시할 수 있다([도 4] 참조).
Accordingly, the screen display area 420 may display the block boundary of the main block to be located outside the screen display area (see FIG. 4).
[도 5]는 웹페이지 내에서 가로스크롤에 의한 이동량 산출에 따른 화면 표시 영역을 나타내고, [도 6]은 가로스크롤에 따른 메인블럭의 이동 종료지점을 화면 외곽으로 조정한 화면 표시 영역을 나타낸다.FIG. 5 shows a screen display area according to the movement amount of the horizontal scroll in the web page, and FIG. 6 shows a screen display area of adjusting the movement end point of the main block according to the horizontal scroll to the outside of the screen.
도면을 참조하면, 표시 화면(500)은 웹페이지 표시 장치의 표시부를 통해 디스플레이되며, 가로스크롤 영역(510), 표시 화면(500)에 메인으로 디스플레이되는 메인블럭의 컨텐츠를 표시하는 메인블럭 표시 영역(530), 하나 이상의 서브블럭에 대한 각 컨텐츠를 표시하는 서브블럭 표시 영역(540)을 포함할 수 있다. 이때, 초기 메인블럭 표시 영역(520)은 가로스크롤이 수행되기 전의 초기 위치에서 메인블럭에 해당하는 컨텐츠를 표시할 수 있다. 사용자에 의해 가로스크롤이 수행되면, 웹페이지 표시 장치는 스크롤에 따른 이동량에 따라 메인블럭 표시 영역(530)이 위치할 것을 예정할 수 있다.Referring to the drawings, the
웹페이지 표시 장치는 예정된 위치의 메인 블록 표시 영역(530)이 화면 외곽 좌측면으로부터 기설정된 임계 거리(Lthreshold) 내에 진입하는지 확인하여, 임계 거리 내인 경우 메인블럭의 이동 종료지점을 화면 외곽으로 조정할 수 있다.The webpage display apparatus checks whether the main
이에 따라, [도 6]에 도시된 바와 같이, 웹페이지 표시 장치의 표시 화면(500)은 메인블럭 표시 영역(530)의 좌측경계 지점이 화면 외곽의 좌측면에 위치하도록 표시할 수 있다.
Accordingly, as shown in FIG. 6, the
[도 7]은 웹페이지 내에서 세로스크롤에 의한 이동량 산출에 따른 화면 표시 영역을 나타내고, [도 8]은 세로스크롤에 따른 메인블럭의 이동 종료지점을 화면 외곽으로 조정한 화면 표시 영역을 나타낸다.FIG. 7 illustrates a screen display area according to the movement amount calculation by vertical scrolling in a web page, and FIG. 8 illustrates a screen display area in which a moving end point of the main block according to vertical scrolling is adjusted to the outside of the screen.
도면을 참조하면, 표시 화면(700)은 웹페이지 표시 장치의 표시부를 통해 디스플레이되며, 세로스크롤 영역(710), 표시 화면(700)에 메인으로 디스플레이되는 메인블럭의 컨텐츠를 표시하는 메인블럭 표시 영역(730), 하나 이상의 서브블럭에 대한 각 컨텐츠를 표시하는 서브블럭 표시 영역(740)을 포함할 수 있다. 이때, 초기 메인블럭 표시 영역(720)은 사용자에 의해 가로스크롤이 수행되기 전의 초기 위치에서 메인블럭에 해당하는 컨텐츠를 표시할 수 있다. 세로스크롤이 수행되면, 웹페이지 표시 장치는 스크롤에 따른 이동량에 따라 메인블럭 표시 영역(730)이 위치할 것을 예정할 수 있다.Referring to the drawings, the
웹페이지 표시 장치는 예정된 위치의 메인 블록 표시 영역(730)이 화면 외곽 상단으로부터 기설정된 임계 거리(Lthreshold) 내에 진입하는지 확인하여, 임계 거리 내인 경우 메인블럭의 이동 종료지점을 화면 외곽으로 조정할 수 있다.The webpage display apparatus checks whether the main
이에 따라, [도 8]에 도시된 바와 같이, 웹페이지 표시 장치의 표시 화면(700)은 메인블럭 표시 영역(730)의 상단 경계 지점이 화면 외곽의 상단에 위치하도록 표시할 수 있다.
Accordingly, as shown in FIG. 8, the
[도 9]는 웹페이지 내에 스크롤 입력을 나타내고, [도 10]은 본 발명의 화면 자동맞춤 기능이 적용된 웹페이지를 나타낸다.9 illustrates scroll input in a web page, and FIG. 10 illustrates a web page to which the screen alignment function of the present invention is applied.
[도 9]를 참조하면, 일반적인 웹페이지(900)는 아래 위로 스크롤하는 패닝이나 플릭킹에 따른 스크롤 입력에 의해 화면 표시 영역(910)과 화면 히든 영역(920)으로 분류될 수 있다.Referring to FIG. 9, a
[도 10]을 참조하면, 웹페이지(950)는 본 발명의 화면 자동맞춤 기능이 적용되어 화면 표시 영역(960)과 화면 히든 영역(970)으로 분류될 수 있다. 즉, [도 9]의 패닝 또는 플릭킹에 의해 화면 표시 영역인 메인블럭의 블럭 경계와 화면 외곽이 근접하는 경우 자동으로 블럭 경계를 화면 외곽에 맞추어 스크롤에 따른 이동이 멈추는 화면 자동맞춤 기능을 제공할 수 있다.
Referring to FIG. 10, a
[도 11]은 본 발명에 따른 웹페이지 표시 방법을 나타낸 순서도이다.11 is a flowchart illustrating a web page display method according to the present invention.
[도 11]을 참조하면, 웹페이지 표시 장치는 웹페이지(예: 모바일 웹페이지) 내에 스크롤 입력을 감지하며(S502), 이에 따른 이동량을 산출한다(S504).Referring to FIG. 11, the webpage display apparatus detects a scroll input in a webpage (eg, a mobile webpage) (S502) and calculates a movement amount accordingly (S504).
웹페이지 표시 장치는 그 산출된 이동량에 따른 화면 표시 영역과 표시 영역 내에서 메인으로 디스플레이 되는 메인블럭을 검출할 수 있다(S506).The webpage display apparatus may detect the screen display area and the main block displayed as the main in the display area according to the calculated movement amount (S506).
웹페이지 표시 장치는 이동량에 따른 이동시, 메인블럭이 회면 외곽으로부터 기설정된 임계 거리 내에 진입하는지 확인하여(S508), 임계 거리 내인 경우, 메인블럭의 이동 종료지점을 화면 외곽으로 조정할 수 있다(S510).When the webpage display device moves according to the movement amount, the webpage display apparatus checks whether the main block enters within a predetermined threshold distance from the outside of the screen (S508), and when within the threshold distance, adjusts the end point of movement of the main block to the outside of the screen (S510). .
메인블럭의 이동 방향이 위쪽인 경우, 메인블럭의 이동 종료지점은 화면 외곽의 상단 테두리로 조정될 수 있다. 또한, 이동 방향이 아래쪽인 경우, 메인블럭의 이동 종료지점은 화면 외곽의 하단 테두리로 조정될 수 있다.When the moving direction of the main block is upward, the moving end point of the main block may be adjusted to the upper edge of the outside of the screen. In addition, when the movement direction is downward, the movement end point of the main block may be adjusted to the lower edge of the outside of the screen.
이동 방향이 왼쪽인 경우, 메인 블록의 이동 종료지점은 화면 외곽의 좌측 테두리로 조정될 수 있다. 또한, 이동 방향이 오른쪽인 경우, 메인블럭의 이동 종료지점은 화면 외곽의 우측 테두리로 조정될 수 있다.When the movement direction is left, the movement end point of the main block may be adjusted to the left edge of the outside of the screen. In addition, when the movement direction is the right side, the movement end point of the main block may be adjusted to the right edge of the outside of the screen.
이동 방향이 대각선인 경우, 메인블럭의 이동 종료지점은 화면 외곽의 상단 또는 하단 테두리로 제 1 조정하고 우측 테두리 또는 좌측 테두리로 제 2 조정할 수 있다. 또한, 이동 방향이 대각선인 경우, 메인블럭의 제 1 인접 블럭과 제 2 인접 블럭의 교차점인 포인트 지점으로부터 메인블럭까지의 거리를 산출하여 산출 거리에 따라 메인블럭의 이동 종료 시점이 조정될 수 있다.When the moving direction is diagonal, the moving end point of the main block may be first adjusted to the upper or lower edge of the outside of the screen and second to the right or left edge. In addition, when the moving direction is diagonal, the distance from the point of the intersection of the first adjacent block and the second adjacent block of the main block to the main block may be calculated to adjust the end point of the movement of the main block according to the calculated distance.
가로스크롤인 경우, 메인블럭의 좌측면이 화면 외곽의 좌측 테두리로부터 기설정된 임계 거리 내에 진입하는지 확인하여, 임계 거리 내 진입한 경우, 메인블럭의 좌측면이 화면 외곽의 좌측 테두리에 위치하도록 조정할 수 있다.In case of horizontal scroll, check whether the left side of the main block is within the preset threshold distance from the left edge of the outside of the screen, and when entering within the threshold distance, the left side of the main block can be adjusted to be located at the left edge of the outside of the screen. have.
세로스크롤인 경우, 메인블럭의 상단이 화면 외곽의 상측 테두리로부터 기설정된 임계 거리 내에 진입하는지 확인하여, 임계 거리 내 진입한 경우, 메인블럭의 상단이 화면 외곽의 상측 테두리에 위치하도록 조정할 수 있다.In the case of vertical scroll, the upper end of the main block may be adjusted to be within a predetermined threshold distance from the upper edge of the outer edge of the screen.
이에 따라, 메인블럭의 블럭 경계가 웹페이지 표시 장치의 표시부 화면 외곽에 위치하도록 표시할 수 있다(S512).
Accordingly, the block boundary of the main block may be displayed to be positioned outside the screen of the display unit of the web page display apparatus (S512).
이상에서 실시예를 들어 본 발명을 더욱 상세하게 설명하였으나, 본 발명은 반드시 이러한 실시예로 국한되는 것은 아니고, 본 발명의 기술사상을 벗어나지 않는 범위 내에서 다양하게 변형실시될 수 있다. 따라서, 본 발명에 개시된 실시예들은 본 발명의 기술 사상을 한정하기 위한 것이 아니라 설명하기 위한 것이고, 이러한 실시예에 의하여 본 발명의 기술 사상의 범위가 한정되는 것은 아니다. 본 발명의 보호 범위는 아래의 청구범위에 의하여 해석되어야 하며, 그와 동등한 범위 내에 있는 모든 기술 사상은 본 발명의 권리범위에 포함되는 것으로 해석되어야 할 것이다.
Although the present invention has been described in more detail with reference to the examples, the present invention is not necessarily limited to these embodiments, and various modifications can be made without departing from the spirit of the present invention. Therefore, the embodiments disclosed in the present invention are not intended to limit the technical idea of the present invention but to describe the present invention, and the scope of the technical idea of the present invention is not limited by these embodiments. The scope of protection of the present invention should be construed according to the following claims, and all technical ideas falling within the scope of the same shall be construed as falling within the scope of the present invention.
102 : 무선통신부 104 : 표시부
106 : 입력부 108 : 센서부
110 : 제어부 112 : 저장부102: wireless communication unit 104: display unit
106: input unit 108: sensor unit
110: control unit 112: storage unit
Claims (18)
상기 화면이동 터치 조작에 따른 이동량을 산출하는 제 2 단계;
상기 산출된 이동량에 따라 상기 웹페이지에서 표시 영역을 이동시킨 이후의 제 2 화면 표시 영역(320)을 검출하는 제 3 단계;
상기 웹페이지의 블럭들 중에서 상기 제 2 화면 표시 영역(320) 내의 메인블럭을 검출하는 제 4 단계;
상기 메인블럭의 경계면과 상기 제 2 화면 표시 영역(320)의 외곽라인 간의 이격거리를 산출하는 제 5 단계;
상기 이격거리에 대응하도록 상기 이동량을 재설정하여 상기 메인블럭의 경계면과 상기 제 2 화면 표시 영역(320)의 외곽라인이 정합되도록 디스플레이 화면을 조정하는 제 6 단계;
를 포함하는 웹페이지 표시 방법.
A first step of detecting a screen touch operation with respect to a first screen display area 310 displaying a portion of a web page composed of a plurality of blocks;
Calculating a movement amount according to the screen movement touch operation;
A third step of detecting a second screen display area 320 after moving the display area on the web page according to the calculated movement amount;
A fourth step of detecting a main block in the second screen display area 320 among blocks of the web page;
Calculating a separation distance between an interface of the main block and an outer line of the second screen display area 320;
Adjusting the display screen to reset the movement amount to correspond to the separation distance so that the boundary line of the main block matches the outer line of the second screen display area 320;
Web page display method comprising a.
상기 제 6 단계는,
상기 메인블럭의 이동 방향이 위쪽인 경우에 상기 메인블럭의 경계면을 상기 제 2 화면 표시 영역(320)의 외곽라인 상단 테두리로 조정하는 제 61 단계;
상기 메인블럭의 이동 방향이 아래쪽인 경우에 상기 메인블럭의 경계면을 상기 제 2 화면 표시 영역(320)의 외곽라인 하단 테두리로 조정하는 제 62 단계;
상기 메인블럭의 이동 방향이 왼쪽인 경우에 상기 메인 블록의 경계면을 상기 제 2 화면 표시 영역(320)의 외곽라인 좌측 테두리로 조정하는 제 63 단계;
상기 메인블럭의 이동 방향이 오른쪽인 경우에 상기 메인블럭의 경계면을 상기 제 2 화면 표시 영역(320)의 외곽라인 우측 테두리로 조정하는 제 64 단계;
상기 메인블럭의 이동 방향이 대각선인 경우에 상기 메인블럭의 경계면을 상기 제 2 화면 표시 영역(320)의 외곽라인 상하단 테두리로 조정하는 제 1 과정과 좌우측 테두리로 조정하는 제 2 과정을 수행하는 제 65 단계;
를 포함하여 구성되는 것을 특징으로 하는 웹페이지 표시 방법.
The method according to claim 1,
The sixth step,
Adjusting a boundary surface of the main block to an upper edge of an outer line of the second screen display area when the movement direction of the main block is upward;
Adjusting the boundary of the main block to the lower edge of the outer line of the second screen display area when the movement direction of the main block is downward;
Adjusting the boundary surface of the main block to the left edge of the outer line of the second screen display area when the movement direction of the main block is left;
Adjusting the boundary surface of the main block to the right edge of the outer line of the second screen display area when the movement direction of the main block is on the right;
Performing a first process of adjusting the boundary of the main block to the upper and lower edges of the outer line of the second screen display area 320 and a second process of adjusting the left and right edges when the main block has a diagonal direction; Step 65;
Web page display method comprising a.
가로스크롤에 대해서, 상기 제 5 단계는 상기 메인블럭의 좌측 경계면과 상기 제 2 화면 표시 영역(320)의 외곽라인 좌측 테두리 간의 이격거리를 산출하는 단계를 포함하여 구성되고, 상기 제 6 단계는 상기 메인블럭의 좌측 경계면이 상기 제 2 화면 표시 영역(320)의 외곽라인 좌측 테두리에 위치하도록 상기 이동량을 재설정하는 단계를 포함하여 구성되며,
세로스크롤에 대해서, 상기 제 5 단계는 상기 메인블럭의 상단 경계면과 상기 제 2 화면 표시 영역(320)의 외곽라인 상측 테두리 간의 이격거리를 산출하는 단계를 포함하여 구성되고, 상기 제 6 단계는 상기 메인블럭의 상단 경계면이 상기 제 2 화면 표시 영역(320)의 외곽라인 상측 테두리에 위치하도록 상기 이동량을 재설정하는 것을 특징으로 웹페이지 표시 방법.
The method according to claim 1,
For horizontal scrolling, the fifth step includes calculating a separation distance between the left boundary of the main block and the left edge of the outer line of the second screen display area 320, and the sixth step includes: And resetting the movement amount such that the left boundary of the main block is located at the left edge of the outer line of the second screen display area 320.
For vertical scrolling, the fifth step includes calculating a separation distance between an upper boundary of the main block and an upper edge of an outer line of the second screen display area 320, wherein the sixth step includes: And resetting the movement amount such that the upper boundary of the main block is located at the upper edge of the outer line of the second screen display area (320).
상기 산출된 이동량에 따라 상기 웹페이지에서 표시 영역을 이동시킨 이후의 제 2 화면 표시 영역(320)을 검출하고, 상기 웹페이지의 블럭들 중에서 상기 제 2 화면 표시 영역(320) 내의 메인블럭을 검출하며, 상기 메인블럭의 경계면과 상기 제 2 화면 표시 영역(320)의 외곽라인 간의 이격거리를 산출하여, 상기 이격거리에 대응하도록 상기 이동량을 재설정하여 상기 메인블럭의 경계면과 상기 제 2 화면 표시 영역(320)의 외곽라인이 정합되도록 디스플레이 화면을 조정하는 제어수단;
상기 조정된 결과로 상기 메인블럭의 경계면과 외곽라인이 정합된 상기 제 2 화면 표시 영역(320)을 디스플레이하는 표시수단;
을 포함하여 이루어진 웹페이지 표시 프로그램을 기록한 컴퓨터로 판독가능한 기록매체.
Sensing means for detecting a screen touch operation with respect to a first screen display area 310 displaying a portion of a web page composed of a plurality of blocks and calculating a movement amount according to the screen touch operation;
The second screen display area 320 is detected after the display area is moved in the web page according to the calculated movement amount, and the main block in the second screen display area 320 is detected among the blocks of the web page. The distance between the boundary surface of the main block and the outer line of the second screen display area 320 is calculated, and the movement amount is reset to correspond to the separation distance, thereby resetting the boundary surface of the main block and the second screen display area. Control means for adjusting the display screen so that the outline of the line 320 is matched;
Display means for displaying the second screen display area 320 in which the boundary surface and the outer line of the main block are matched as a result of the adjustment;
Computer-readable recording medium recording a web page display program comprising a.
상기 제어수단는,
상기 메인블럭의 이동 방향이 위쪽인 경우에 상기 메인블럭의 경계면을 상기 제 2 화면 표시 영역(320)의 외곽라인 상단 테두리로 조정하고,
상기 메인블럭의 이동 방향이 아래쪽인 경우에 상기 메인블럭의 경계면을 상기 제 2 화면 표시 영역(320)의 외곽라인 하단 테두리로 조정하고,
상기 메인블럭의 이동 방향이 왼쪽인 경우에 상기 메인 블록의 경계면을 상기 제 2 화면 표시 영역(320)의 외곽라인 좌측 테두리로 조정하고,
상기 메인블럭의 이동 방향이 오른쪽인 경우에 상기 메인블럭의 경계면을 상기 제 2 화면 표시 영역(320)의 외곽라인 우측 테두리로 조정하고,
상기 메인블럭의 이동 방향이 대각선인 경우에 상기 메인블럭의 경계면을 상기 제 2 화면 표시 영역(320)의 외곽라인 상하단 테두리로 조정하는 제 1 과정과 좌우측 테두리로 조정하는 제 2 과정을 수행하는 것을 특징으로 하는 컴퓨터로 판독가능한 기록매체.
The method according to claim 10,
The control means,
When the moving direction of the main block is upward, adjust the boundary of the main block to the upper edge of the outer line of the second screen display area 320,
When the moving direction of the main block is downward, the boundary of the main block is adjusted to the lower edge of the outer line of the second screen display area 320,
When the moving direction of the main block is left, the boundary of the main block is adjusted to the left border of the outer line of the second screen display area 320,
When the main block moves in the right direction, the boundary of the main block is adjusted to the right edge of the outer line of the second screen display area 320.
Performing a first process of adjusting the boundary of the main block to the upper and lower edges of the outer line of the second screen display area 320 and a second process of adjusting the left and right edges when the main block has a diagonal direction; And a computer readable recording medium.
상기 제어수단는,
가로스크롤에 대해서, 상기 메인블럭의 좌측 경계면과 상기 제 2 화면 표시 영역(320)의 외곽라인 좌측 테두리 간의 이격거리를 산출하고, 상기 메인블럭의 좌측 경계면이 상기 제 2 화면 표시 영역(320)의 외곽라인 좌측 테두리에 위치하도록 상기 이동량을 재설정하며,
세로스크롤에 대해서, 상기 메인블럭의 상단 경계면과 상기 제 2 화면 표시 영역(320)의 외곽라인 상측 테두리 간의 이격거리를 산출하고, 상기 메인블럭의 상단 경계면이 상기 제 2 화면 표시 영역(320)의 외곽라인 상측 테두리에 위치하도록 상기 이동량을 재설정하는 것을 특징으로 하는 컴퓨터로 판독가능한 기록매체.The method according to claim 10,
The control means,
For the horizontal scroll, a distance between the left boundary of the main block and the left edge of the outer line of the second screen display area 320 is calculated, and the left boundary of the main block corresponds to the second screen display area 320. Reset the shift amount to be located at the left border of the outer line,
For the vertical scroll, the separation distance between the upper boundary of the main block and the upper edge of the outer line of the second screen display area 320 is calculated, and the upper boundary of the main block is the second screen display area 320. And resetting the movement amount to be positioned at an upper edge of an outer line.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR1020100028023A KR101090673B1 (en) | 2010-03-29 | 2010-03-29 | Method for displaying webpage, and computer readable record medium for the same |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR1020100028023A KR101090673B1 (en) | 2010-03-29 | 2010-03-29 | Method for displaying webpage, and computer readable record medium for the same |
Publications (2)
Publication Number | Publication Date |
---|---|
KR20110108681A KR20110108681A (en) | 2011-10-06 |
KR101090673B1 true KR101090673B1 (en) | 2011-12-08 |
Family
ID=45026174
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
KR1020100028023A KR101090673B1 (en) | 2010-03-29 | 2010-03-29 | Method for displaying webpage, and computer readable record medium for the same |
Country Status (1)
Country | Link |
---|---|
KR (1) | KR101090673B1 (en) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR20140044002A (en) | 2012-10-04 | 2014-04-14 | 에스케이플래닛 주식회사 | Menu display module and method for dynamically determining menu type and menu display position based on input signal, and recordable medium storing the method |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR101314850B1 (en) * | 2011-12-21 | 2013-10-10 | (주)보고닷컴 | Method for controlling webpage |
KR101685288B1 (en) * | 2015-05-11 | 2016-12-09 | 주식회사 카카오 | Method for controlling presentation of contents and user device for performing the method |
Citations (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR100636184B1 (en) * | 2004-10-13 | 2006-10-19 | 삼성전자주식회사 | Location control method and apparatus therefor of display window displayed in display screen of information processing device |
-
2010
- 2010-03-29 KR KR1020100028023A patent/KR101090673B1/en not_active IP Right Cessation
Patent Citations (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR100636184B1 (en) * | 2004-10-13 | 2006-10-19 | 삼성전자주식회사 | Location control method and apparatus therefor of display window displayed in display screen of information processing device |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR20140044002A (en) | 2012-10-04 | 2014-04-14 | 에스케이플래닛 주식회사 | Menu display module and method for dynamically determining menu type and menu display position based on input signal, and recordable medium storing the method |
Also Published As
Publication number | Publication date |
---|---|
KR20110108681A (en) | 2011-10-06 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
KR102110193B1 (en) | Apparatus and method for controlling screen in device | |
KR102207861B1 (en) | Method for displaying and an electronic device thereof | |
US9372613B2 (en) | Scrolling method and electronic device thereof | |
US10185488B2 (en) | Device and method for displaying information | |
US8400403B2 (en) | Key input method and apparatus for portable apparatus | |
KR20150069559A (en) | Method for controlling a screen and electronic device supporting the same | |
KR20130034765A (en) | Method and device for inputting of mobile terminal using a pen | |
US20190250783A1 (en) | Screen Display Method and Terminal | |
KR102234400B1 (en) | Apparatas and method for changing the order or the position of list in an electronic device | |
KR20140124981A (en) | A method and a apparatus for controlling transparency in a mobile terminal having a transparent display | |
KR20150119834A (en) | Method and apparatus for adjusting webpage and electronic device | |
EP3933545B1 (en) | Method and apparatus for detecting a bending state of electronic device, and storage medium | |
CN104536661A (en) | Terminal screen shot method | |
CN105824819A (en) | Image loading method, device and electronic device | |
US20160328054A1 (en) | Information processing apparatus | |
KR101090673B1 (en) | Method for displaying webpage, and computer readable record medium for the same | |
US20200034032A1 (en) | Electronic apparatus, computer-readable non-transitory recording medium, and display control method | |
US9432936B2 (en) | Portable electronic device | |
CN106384033A (en) | Screen off method and apparatus of terminal screen | |
US20150331840A1 (en) | Method and Apparatus for Adjusting an Input Box in a Display Screen during the Switch of Display Mode | |
WO2017211108A1 (en) | Display method and device | |
KR20150068682A (en) | Apparatus and method for contrlling an input of electronic device having a touch device | |
JP5492240B2 (en) | Information processing apparatus, method, and computer program | |
CN104536564A (en) | Terminal | |
KR101832838B1 (en) | Apparatus and method for controlling display size in portable terminal |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
A201 | Request for examination | ||
E902 | Notification of reason for refusal | ||
E701 | Decision to grant or registration of patent right | ||
GRNT | Written decision to grant | ||
FPAY | Annual fee payment |
Payment date: 20141117 Year of fee payment: 4 |
|
LAPS | Lapse due to unpaid annual fee |