루키의 보석함

작년 영국의 파이낸셜타임즈는 애플의 앱스토어의 폐쇄성과 수익 분배 이슈에 대응하기 위해서 HTML5를 활용한 웹 앱을 도입했다고 합니다. 그래서 빠른 업데이트가 가능하고 기존의 웹사이트와 통합해서 관리할 수 있게 되었고, 가입자도 5개월만에 1백만 접속자가 웹앱에 접속함으로 인해 성공한 사례로 회자되고 있습니다. 실제로 아이폰으로 파이낸셜타임즈(http://app.ft.com)에 접속해 보면 "홈 화면 추가"를 통해 Web App으로 등록을 유도하도록 잘 설명되어 있습니다. 처음 등록한 후, 일반 앱처럼 실행되고 로컬 저장소도 사용하는 것을 보면서 잘 만들었다는 생각이 들기도 했습니다. 아직 HTML5가 보편화되지는 않았지만 향후 발전 가능성에 대해서는 잘 보여준 사례라고 할 수 있을 것 같습니다. 실제..

예전에 HTML 태그에 대해서 정리했었는데요. 오늘 살펴보니 DOM을 활용해서 제어할 수 있는 기능이 추가되어 있네요. 즉, 동영상 내에 재생, 중지 등의 버튼이 포함되는 것 뿐만 아니라 HTML 내에 있는 버튼을 통해서 동영상을 제어할 수 있도록 Methods, Properties, 그리고 Events가 제공되고 있습니다. 다음 예제를 살펴보시면 재생과 정지를 하는 버튼과 속성(Property)를 변경해서 동영상 크기를 제어하는 것을 알 수 있습니다. HTML5에서 항상 그렇듯 지원하는 브라우저에서만 제대로 보입니다. ㅠㅠ Example 1 Play/Pause Big Small Normal Your browser does not support HTML5 video. Video courtesy of Bi..

현재 웹브라우저로는 HTML5를 활용한 본 테스트를 사용할 수 없습니다. (크롬, 파이어폭스, 사파리로 보세요~ 미니) HTML5로 블로그의 BGM 형태의 모델도 가능할 것 같아서 걍 한번 만들어 봤습니다. 지난번에 설명한 태그를 활용했구요.. 자동 재생하도록 설정하고 제어 컨트롤을 숨겨봤습니다. ^^ 구글 크롬, 파이어폭스, 사파리에서 사운드를 켜시면 음악이 재생되는 것을 들을 수 있을 겁니다. 음악은 현재 "짝"이라는 프로그램에서 사용하는 류이치 사카모토의 rain이란 곡입니다. 당연히 HTML5의 audio 태그를 지원하는 브라우저에서만 재생이 됩니다. 기존의 IE8 이하에서는 멀뚱한 텍스트만 보이겠죠.. 지난번 HTML5 강좌에서도 한번 설명한 것이기는 하지만 소스를 간단히 한번 보시죠.. 아래 ..

지난번에 를 살펴봤습니다. XML 문서에서 하나의 값을 가져올 때 value-of를 사용하면 되는데요.. 반복적으로 나타나는 엘리먼트를 처리할 때는 어떻게 해야 할까요? 바로 를 활용해서 루프를 돌면서 처리하면 됩니다. 그럼.. for-each의 사용법을 살펴보도록 하지요.. 엘리먼트 엘리먼트를 사용하면 XPath 형식으로 지정된 모든 XML 엘리먼트에 대해 값을 가져와서 처리할 수 있습니다. 말로 계속 설명하는 것보다 먼저 소스를 살펴보시죠.. My CD Collection Title Artist 이전 value-of의 예제와 거의 비슷합니다. 다만, 14, 19번째 줄에 구문이 포함된 것을 알 수 있습니다. 는 루프를 처리하는 것이기 때문에 내부의 ... 부분이 반복되는 것임을 쉽게 이해할 수 있겠죠..

이제 value-of에 대해서 살펴봅시다. 엘리먼트 엘리먼트는 XML 엘리먼트의 값을 추출하는데 사용합니다. value-of로 가져온 값을 출력할 부분에 추가하면 되겠죠.. 이렇게 하면 XML 문서의 엘리먼트 값에 따라 HTML 출력 결과를 만들어 낼 수 있을 겁니다. My CD Collection Title Artist 15, 16번째 줄을 보면 value-of를 사용한 것을 알 수 있습니다. 여기에 보면 select라는 속성을 사용하고 있는데.. select의 값으로는 XPath 표현을 사용하고 있습니다. XPath는 유닉스, 리눅스에서 디렉토리를 탐색하는 것처럼 슬래시(/) 형태로 구분해 나타냅니다. 15번째 줄은 catalog 하위의 cd 하위의 title 엘리먼트의 값을 가져오는 겁니다. 마찬가..

XSLT에서 사용하는 템플릿이라는 것을 살펴볼 시간입니다. XSLT는 템플릿이라고 하는 규칙을 하나 이상 포함하고 있구요.. 각각의 템플릿은 일치하는 노드를 찾았을 때, 해당 규칙을 적용하는 겁니다. 엘리먼트 템플릿을 만들기 위해 사용하는 것이 바로 엘리먼트입니다. 요 템플릿에는 match라는 속성이 반드시 사용되는데요. XML 엘리먼트 중 어느 곳에 템플릿을 적용할지 결정하기 위해 사용하는 겁니다. XML 엘리먼트 중에 어느 곳이란 것을 찾기 위해서 무엇을 할까요? 음.. 지난번에 XML 내부를 탐색하기 위해 뭘 사용한다고 했던 것 같은데.. ^^ 맞습니다. 바로 XPath죠... XPath 표현식을 match 속성의 값으로 사용하는 겁니다. 만약 match값이 "/"이면 XML 문서 전체를 나타내는 ..

XML을 XSLT를 이용해서 어떻게 XHTML로 변환하는지 함 살펴볼 예정입니다. 여기에서는 큰그림으로 이해를 하시고, 세부사항은 다음 강좌에서 보다 자세히 다루도록 하겠슴다. 스타일시트 선언 XSL 스타일시트 문서도 XML로 구성되어 있습니다. 그러므로 XML의 기본인 루트 엘리먼트라는 것이 존재해야 합니다. XSL 스타일시트의 루트엘리먼트는 또는 입니다. 왜 두가지를 사용하냐구요? 글쎄요~ 실제로 나 모두 동일하게 사용됩니다. 그러므로 둘 중의 아무거나 쓰셔도 상관없습니다. 보통은 를 사용합니다. 이걸 주로 쓰세요.. ^^ 그럼 W3C의 권고안을 따르는 XSL 스타일시트 선언을 살펴보면 다음과 같습니다. 또는 xmlns라고 정의되어 있는 부분이 있습니다. 요건 XML 네임스페이스를 정의하는 겁니다. ..

이번에는 XSLT에 대해서 간략히 살펴보려고 합니다. XSLT와 XSL-FO가 있는데요.. XSLT는 XML문서를 다른 XML 문서로 바꾸는 것을 이야기 하구요. XSL-FO는 XML 문서를 다른 문서(PDF, DOC 등)로 바꾸는 것을 이야기 합니다. 즉, FO는 Formatting Object의 약자이네요.. XSLT란? - XSLT는 XSL Transformation을 의미합니다. - XSLT는 XSL의 가장 중요한 부분입니다. - XSLT는 XML 문서를 다른 XML 문서로 변환합니다. - XSLT는 XML 문서를 탐색하기 위해서 XPath를 사용합니다. - XSLT는 W3C의 표준입니다. 계속해서 반복되는 말들입니다. 자꾸 듣다 보면 익숙해지겠죠.. ^^ XSLT = XSL Transformat..

XSL이란? XSL은 EXtensible Stylesheet Language의 약자입니다. 즉, 스타일시트 언어라는 것이죠.. 스타일시트하면 떠오르는 것이 CSS가 있지요~ (이것도 나중에 한번 다뤄볼 예정입니다.) CSS는 주로 HTML의 스타일시트로 사용되고 있습니다. W3C에서는 XML을 위한 스타일시트를 만들어야겠다고 생각했고, 그렇게 해서 탄생한 것이 바로 XSL입니다. CSS = HTML Style Sheets 태그를 마음대로 확장할 수 있는 XML과 달리 HTML은 미리 정의된 태그들만 사용할 수 있습니다. 이런 태그들은 이해하기 어렵지 않습니다. 현재 우리가 자주 사용하고 있는 것이죠.. 예를들어 이란 태그는 표와 같은 테이블을 나타내고, 모든 브라우저에서는 알아서 적절하게 보여줍니다. 이..

어제 XML 관련 과목에서 중간고사로 냈던 문제 중 O/X 문제입니다. 여러분들도 한번 풀어보시죠.. (답은 다음주에 올리도록 하죠.. ^^) XML의 기본 개념을 다시 한번 검증하는데 도움이 될 겁니다. 찍는 걸 방지하기 위해 X일 경우, 이유도 적으라고 했네요.. ^^ O로 찍으면 맞는 개수가 적을거구... 4. 다음 각 항목에 O/X로 답하시오. X인 경우, 이유도 함께 작성하시오. 1) XML stands for “Example Markup Language”. 2) XML uses a DTD to describe the data. 3) XML’s goal is to replace HTML. 4) DTD stands for “Dynamic Type Definition”. 5) All XML docu..