Sep 172012
 

대부분 개발자들은 개발을 하면서 HTML 파서를 각자 만들어서 사용을 하고 있습니다.
특히 검색 로봇을 만들어서 사용할 경우에는 HTML을 읽어서 파서를 만들어서 사용하는 경우가 많습니다.
그래서 저는 HTML 문법을 기반으로 하는 라인단위로 분리를 해서 사용하는 방법을 많이 사용했습니다.
(대부분 로봇을 Perl을 사용해서 만들었기 때문에 10라인 정도 되는 함수로 만들어서 잘 사용했으며, 대규모 분석시 적은 메모리로 빠른 처리가 가능합니다.)

하지만 최근 HTML 구조가 CSS 기반으로 이루어지다 보니 좀 더 복잡하게 구성되는 경우가 많습니다.
대신 HTML5의 경우에는 문서가 구조적으로 되어 있기 때문에 라인단위로 분석보다는 html을 parser해서 DOM과 같은 객체에 넣어 두고 분석을 하면 훨씬 편리하다.

물론 라인단위로 처리하거나, SAX로 처리하는 것보다 메모리나, 속도 측면에서는 문제가 많겠지만, 변경된 HTML구조에 빠르게 대응을 하고, 간단하게 개발할때에는 효과적인것 같아서 HTML parser 프로그램을 하나 소개합니다.

PHP로 되어 있으며, 간단히 라이브러리 파일만 include를 하고, 아래와 같이 사용하면 된다.
(PHP 기본 함수가 아니므로 아래 참고 URL에 있는 소스를 다운받아서 PHP 프로그램을 사용할때 추가해야 합니다.)

    include_once('simple_html_dom.php');
 
    $html = file_get_html("http://blog.sukmoonlee.com");
 
    foreach($html->find('ul') as $element) {
        foreach($element->find('a') as $e) {
            echo $e->href."\n";        
        }
    }
 
 
[smlee@localhost ~]$ php test.php
/wordpress/
/env.php
/geshi/contrib/example.php

참고URL: http://simplehtmldom.sourceforge.net/

Aug 282012
 

전문적인 디자인은 아니지만, CSS를 이용해서 HTML을 코딩하면 항상 접하게 되는 항목이 margin, padding, border 이다.

특히 정확한 픽셀을 계산하기 위해서는 실제 width에 maring과 padding, border값이 어떻게 적용되는지를 파악해야만 한다.

일단 W3C를 참고해보면 CSS는 아래와 같은 구조를 가지고 있다.

css box model

이를 기반으로 width와 height를 계산하는 방식은 다음과 같다.

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

자세한 설명은 아래을 참고하면 된다. 홈주소창을 만들때 아래이 방법이 많은 도움을 되었다.

그리고 HTML 표준모드가 아닌 호환모드가 있다. 즉 HTML 헤더에 DOCTYPE이 제대로 정의되지 않는 형태로 이런 경우에는 위의 공식이 적용되지 않는다. 그래서 호환모드에서는 계산 방법을 달리해야 한다. 홈주소창에서는 2가지 모드에 대해서 별도의 계산식을 사용해서 처리를 함으로써 크로스 브라우저 및 HTML 모드를 지원했다.

참고 URL : http://www.w3schools.com/css/css_boxmodel.asp

Plugin from the creators of Brindes :: More at Plulz Wordpress Plugins