XSL-FO 소개 임 순 범 숙명여대 멀티미디어학과.

Slides:



Advertisements
Similar presentations
편집용지 설정 ※ 제본 문서를 묶기위한 추가여백 내용입력 한색에서 다른 색으로 서서히 변하는 효과 한글 파일형식 : hwp.
Advertisements

© 2013 인피니티북스 All rights reserved CHAPTER 7. HTML 와 CSS 로 웹사이트 만들 기 CHAPTER 7. HTML 와 CSS 로 웹사이트 만들 기.
406 문서에 표를 작성하고 크기를 조절할 수 있다. 표에 서식을 적용하여 다양하게 표현할 수 있다. 표를 편집하여 다양한 형태로 나타낼 수 있다. 학습목표 5 부. HTML 의 기본 4 장. 표를 이용한 문서작성 - 17 주 차시 : 1/3 ∼ 3/3 배당시간 : 18.
스타일 시트(테두리) 오산대학 컴퓨터정보과 김 영 권.
XHTML Basic 제 13 장 1. XHTML Basic의 개요 2. XHTML Basic 기본 문법 3. 표 만들기
XSLT와 XSL xml programming.
6 스마트폰 레이아웃.
CSS Web Page Construction
박용수 XML 박용수
HTML5 웹 프로그래밍 입문 (개정판) 1장. 인터넷과 웹환경의 발전.
2002/3/20 HTML 2002/3/20
CHAPTER 4. CSS 스타일시트 기초.
HTML과 CSS HTML과 CSS 세미나에 오신 것을 환영합니다.
CSS List & Table Chapter 5 Part 2
10장 동적 HTML (Dynamic HTML)
HTML & CSS 겉핥기 2012 SUMMER SPARCS.
HTML5 웹 프로그래밍 입문 (개정판) 4장. CSS3 스타일시트 기초.
HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세
SAP QUERY SAP R/3 4.6C.
예제모음.
HTML5 웹 프로그래밍 입문(교수용) 7장. 웹사이트제작실습.
Overview : XML과 Database
웹디자인 표준 정의서 통합정보시스템 구축 (1단계) KCDC-PRO-012 Version 1.0.
이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:
CHAPTER 5. CSS 박스모델과 응용.
처음부터 다시 배우는 HTML5&CSS3 실전 웹 표준 사이트 제작까지
HTML5 웹 프로그래밍 입문(교수용) 2장.HTML5 문서의 기본.
HTML과 TAG 편집 ※ 01/ 태이블 태그 소스 (태이블 편집)
CSS – 개요 Cascading Style Sheets의 약자 “계단형 스타일시트”라고 한다.
준비학습 2: CSS 11장. CSS 12장. 이미지, 목록, 하이퍼링크 스타일
ㅎㅎ CSS XML 문서 화면 표현 CSS 개념 CSS 사용법 CSS 문법.
HTML5 웹 프로그래밍 입문 (개정판) 5장. 고급 표현을 위한 CSS3 활용.
HYPER TEXT MARKUP LANGUAGE
홈페이지 만들기 HTML HyperText Markup Language 홈페이지를 만들 때 사용하는 언어
XML XSLT.
iframe 사용하기 Chapter 3 Part 2
HTML5+CSS3 실무 테크닉 김은기 저.
X M L 컴퓨터공학과 윤 홍 국.
~ 초콜릿 공작소 ~ 프로젝트 완료 조은아.
Html(front end) & jsp(back end)
HTML5 웹 프로그래밍 입문 (개정판) 2장. HTML5 문서의 기본.
우리집닷컴 Style Guide 우리집닷컴 Web Style Guide Web Planner 김 영실.
학습목표 학습목차 박스 모델에 대한 개념을 이해할 수 있습니다.
10강_CSS 속성-I CSS3 단위 url() display 속성 visibility 속성 opacity 속성
2018년 10월 08일 박성진 Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진
게임웹사이트운영 [9] div & span.
CSS Layout Chapter 6 Part 1
Chapter07 CSS3 글꼴과 문자 HTML5 Programming.
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어.
HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기
11강_CSS 속성-II margin 및 padding 속성 box-sizing 속성 border 속성
12강_CSS 속성-III font-family , font-size 속성
RIA 기술적인 비교 User User 응용프로그램 응용프로그램 브라우저 운영체제 운영체제 하드웨어 하드웨어 기존 RIA.
Chap6. CSS(Cascading Stytle Sheet) 김만수
14장 XML 과 멀티미디어 14.1 XML 14.2 이름 공간 14.3 스타일 시트 14.4 링크 멀티미디어시스템
SMIL.
정보통신특강-XML (2001. Fall) XSL-FO 소개 임 순 범 숙명여대 멀티미디어학과.
2018년 10월 01일 박성진 Web & Internet [04] CSS3 2018년 10월 01일 박성진
PowerPoint 2009/2/17.
게임웹사이트운영 [7] 폰트,색,박스모델.
Web & Internet [02] HTML5 기본구조와 작성법
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
웹과 모바일 홈페이지의 이해와 제작 CSS 깊이 알기
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
HTML HTML 기본 구조와 태그 다양한 태그 다루기
SQL Server Reporting Services Feature
간식의 세계!!.
스타일 시트란? HTML만으로 홈페이지를 만드는 것보다 더 많은 페이지의 디자인을 업그레이드하고자 할 때 사용
Presentation transcript:

XSL-FO 소개 임 순 범 숙명여대 멀티미디어학과

웹 스타일 언어의 특징 DSSSL CSS1 CSS2 ISO 표준, 1996, 주로 SGML 문서에 적용 인쇄 출력이 주 목적, 막강한 기능, 매우 어렵다 CSS1 W3C 표준, 1996. (Cascading Style Sheet) HTML 문서의 스타일 정보를 표현 폰트, 색상, 행간 등 웹 환경 만을 고려한 기능 CSS2 W3C 표준, 1998, HTML & XML 문서에 적용 가능 쪽 모양, 표, 세밀한 조절, 청각 기능 등 추가 한글 환경 부족 (세로쓰기, 다단 편집 등 불가능) 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향

웹 스타일 언어의 특징(계속) XSL (Extensible Stylesheet Language) XSLT 와 XSL-FO(Formatting Object)로 구성 XML 문서에 적용, 풍부한 기능 (전자 출판이 가능) 쪽 모양, 세로쓰기, 다단편집, 정교한 스타일 가능 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 결과 비교 : CSS 대 XSL-FO

XSL-FO 개요 CSS 보다 더 세련된 편집 디자인 가능 XSL 파일도 하나의 XML 문서임 XSL-FO 포맷팅 모델 단순 웹 화면보다 전자출판 수준의 화면 출력 가능 XSL 파일도 하나의 XML 문서임 XSLT 로 변환 또는 XSL-FO 요소로 포맷 지정 XSL-FO 포맷팅 모델 Formatting Object : 스타일 적용 개체 스타일 속성 : 각 개체에 스타일 지정 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향

XSL-FO 개요 (계속) Formatting Object <fo:xxx> 쪽모양 관련 요소(18) 스타일 적용 대상인 개체, 즉 XSL 요소(element) 쪽모양 관련 요소(18) page-master, page-layout, page-sequence, region, content, flow, title, color 문단 및 글줄 관련 요소(12) block, inline, instream, character, graphic, leader, page-number 표, 목록, 링크 관련 요소(13) table, list, link 기타 요소(11) : multi format, float, footnote, wrapper, marker 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향

XSL-FO 개요 (계속) 스타일 속성 <fo:xxx 속성=값 … > 공통으로 적용 문단 또는 글줄 영역에 적용 XSL element에 적용되는 속성(attributes) 공통으로 적용 position, font, border, padding, background 문단 또는 글줄 영역에 적용 margin, alignment, dimension 글자에 적용 word-spacing, letter-spacing, word-space 개별 요소 page,layout,leader,table,list 등에 적용 기타 : break, writing-mode, 숫자변환 등 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향

XSL-FO 적용 예제 시작 XML 문서 선언, name-space 및 root 개체 정의 XSLT 사용할 경우 template match <?xml version="1.0" encoding="utf-16" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format" version="1.0"> <xsl:template match="ebook"> <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <fo:layout-master-set> … </fo:root > </xsl:template> <xsl:template match="ebook/books/book/front/intro/title"> <fo:block font-size="11pt" … > … <xsl:apply-templates /> </fo:block> … … 시작 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 name-space fo: 개체 root 개체 fo: 개체

XSL-FO 적용 예제 (계속) 쪽 모양 (Page Layout) 마스터 정의 쪽 크기와 여백 설정 내용 영역 설정 예) 표지, 머리말, 2단본문 : 내용 영역 설정 5종류 region  쪽의 구성 요소 문단(block) 및 글줄(inline) 요소  글쓰기 방향(direction) 설정 문단 및 글줄 진행 방향을 별도로 설정 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 Region-before Region-after Region-body block Region-start Region-end inline 문단 글줄 문단 글줄 문단 글줄

<fo:layout-master-set> <fo:simple-page-master master-name="표지" page-height="240mm" page-width="160mm" margin-top="20mm" margin-right="20mm" margin-bottom="20mm" margin-left="20mm” border="thin solid silver" background-color = "FFFFFF" > </fo:simple-page-master> <fo:simple-page-master master-name="머리말" page-height="24cm" page-width="16cm" background-color=white> <fo:region-body margin-top="30mm" margin-right="30mm" margin-bottom="30mm" margin-left="30mm" border="thin solid silver" padding="6pt" /> <fo:region-before extent="25mm" border-after-style="solid" border-after-width="thin” … display-align="after" /> <fo:region-after extent="25mm" border-before-style="solid" border-before-width="thin" display-align="before" /> <fo:region-start extent="25mm" border-end-style="solid" border-end-width="thin" display-align="after" /> <fo:region-end extent="25mm" border-start-style="solid" … " display-align="before" writing-mode="tb-rl" /> … 표지 master 속성 머리말 master 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 본문 영역 속성

<fo:layout-master-set> <fo:simple-page-master master-name="표지" … > … <fo:simple-page-master master-name="머리말”… > … 계속 … <fo:simple-page-master master-name= "2단본문" page-height="12cm" page-width="8cm" background-color=white> <fo:region-body margin-top="30mm" margin-right="30mm" margin-bottom="30mm" margin-left="30mm” padding="6pt" border="thin solid silver" column-count="2" /> <fo:region-before extent="30mm" … column-count="1" /> <fo:region-after extent="25mm" border-before-style="solid" … /> <fo:region-start extent="25mm" border-end-style="solid" … /> <fo:region-end extent="25mm" border-start-style="solid" … display-align="before" writing-mode="tb-rl" /> </fo:simple-page-master> </fo:layout-master-set> 2단본문 master 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 다단편집 속성

XSL-FO 적용 예제 (계속) 쪽 순서 및 흐름 설정 개별 스타일 속성 설정 표, 목록 등 정의 fo:page-sequence, fo:static-content, fo:flow 개별 스타일 속성 설정 문단(fo:block) 및 글줄(fo:inline)의 개별 속성 font, background, border, padding, margin, alignment, indentation 등 표, 목록 등 정의 fo:list-block, fo:list-item, fo:list-item-label, fo:list-item-body fo:table, fo:table-column, fo:table-header, fo:table-body, fo:table-row, fo:table-cell, … 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향

<fo:page-sequence master-name="머리말" format="1"> 쪽순서 설정 <fo:page-sequence master-name="머리말" format="1"> <fo:static-content flow-name="xsl-region-after"> <fo:block text-align="center" font-size="small"> <fo:page-number /> </fo:block> </fo:static-content> <fo:flow flow-name="xsl-region-body" line-height="1.7"> <xsl:apply-templates select="books/book/front/intro/p[1]" /> <xsl:apply-templates select="books/book/front/intro/title" /> </fo:flow> </fo:page-sequence> <xsl:template match="ebook/books/book/front/intro/title"> <fo:block font-size="25pt" color="#11178D" font-family= "신명조" space-before="4em” keep-with-next="always" text-align="left"> <xsl:apply-templates /> </fo:block> </xsl:template> <xsl:template match="books/book/body/part[1]/chapter[2]/section[4]/p[1]"> <fo:block font-size="11pt" space-after="5pt" font-weight="bold"> 쪽고정 쪽흐름 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 문단 속성 설정 대응되는 문단

<fo:table-column column-width="1.8in" /> <xsl:template match="books/book/body/part[1]/chapter[2]/authgrp/author/p"> <fo:table border="0pt solid black" text-align="center" border-spacing="3pt"> <fo:table-column column-width="1.8in" /> <fo:table-column column-width="1in" number-columns-repeated="1" /> <fo:table-body> <fo:table-row> <fo:table-cell padding="6pt" border="0pt solid blue" background-color="#F5FFF5" number-rows-spanned="1"> <fo:block text-align="justify" padding-before="0" font-size="8pt"> <xsl:apply-templates /> </fo:block> </fo:table-cell> <fo:table-cell padding="6pt" border="0pt solid black"> <fo:block> <fo:external-graphic src="author2.jpg" content-height="60%" content-width="60%" /> </fo:block> </fo:table-row> </fo:table-body> </fo:table> </xsl:template> 표 열 행 cell의 내용 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 cell의 내용