[C#] CSS 분석은 이제 내게 맡겨라. Bonesoft.CSS.dll
created:2010-01-26
updated:2015-07-03
*
CSS란?*
CSS(Cascading Style Sheet)는 [마크업 언어](http://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EC%97%85_%EC%96%B8%EC%96%B4 "마크업 언어")가 실제 표시되는 방법을 기술하는 언어로, [HTML](http://ko.wikipedia.org/wiki/HTML "HTML")과 [XHTML](http://ko.wikipedia.org/wiki/XHTML "XHTML")에 주로 쓰이며, [XML](http://ko.wikipedia.org/wiki/XML "XML")에서도 사용할 수 있다. [W3C](http://ko.wikipedia.org/wiki/W3C "W3C")의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다
사실상 CSS은 이미 웹 브라우저가 분석을 해주기 때문에 분석을 할 필요가 있나 라는 생각이 드시는 분들이 계실것 입니다. CSS를 분석해야 하는 경우는, 웹 브라우저가 아닌 곳에서 HTML을 제대로 보여줘야 할 경우이지요. 예를들면, eBook Reader를 만들어야 하는 경우와 같이 말입니다.
**CSS의 예
**
* { font-size: 1em; text-align: center; }
body { margin: 0 auto; padding: 0.75em; }
div, h1, h2, h3, h4, h5, p { font-size: 1em; text-align: center; }
a { text-decoration: none; color: #000044; }
div#titlepage h1.part-title { margin-bottom: 0; font-size: 2em; }
div#titlepage h2.part-subtitle { margin-top: 0.5em; font-size: 1.25em; font-style: italic; font-weight: normal; }
div#titlepage h3.title-break { margin-top: 1.25em; margin-bottom: 0.75em; font-size: 1.1em; }
div#titlepage h3.author { margin-top: 0; margin-bottom: 1.75em; font-size: 1.25em; }
div#titlepage h5 { margin: 0; font-size: 90%; }
div#titlepage h5 a { color: #222222; }
div#titlepage div#docImprint { margin: 2em 0; }
div#docImprint p { margin: 0.1em 0; }
위의 CSS는 한 ePUB 책의 CSS를 가져온것입니다. 복잡하진 않지만, 개발자가 한줄 한줄 읽어서 파싱(Parsing)하고 그것을 다시 자료구조에 넣어서 응용한다고 생각하면 머리가 아파온다. ㅠ
**Bonesoft.CSS.dll 을 통해서 분석하자!!**
Bonesoft.css.dll 을 이용하면 CSS 파일을 분석할 수가 있다. 자, 일단 다운 받으시고.
cfile2.uf.191CC4054B5E427E3A0F3F.dll받으신 dll을 참조추가 한후, 아래와 같이 코딩을 해주면 쉽게 파싱을 할 수가 있다.
using BoneSoft.CSS; BoneSoft.CSS.CSSParser parser = new BoneSoft.CSS.CSSParser();
parser.ParseFile(CSS_Filename);
public CSSDocument css;
css = parser.CSSDocument;
1번째줄에서 객체(parser)를 만들어 주고 있고, 2번째줄에서 만들어진 객체 parser의 함수인 ParseFile()을 호출하면서, css 파일의 경로를 파라미터로 넘겨주고 있다. ParseFile() 함수를 호출하면, 지정한 경로의 css 파일이 파싱이 되어 parser.CSSDocument에 들어가 있다.parser. CSSDocument와 CSSDocument 객체를 만들어서 연결시켜 주면, 계층화되어 분석된 CSSDocument를 볼수가 있다.
**다음시간에는?**
다음시간에는 CSSDocument 의 구조와 실제 CSS 파일을 비교해가면서 어떻게 파싱 결과가 나왔으며, 어떻게 활용할수 있는지 알아보겠습니다.