[XML응용]스타일시트로 XML 표현하기

삶의 늪에 들어 가기 전/정리중(미정리)

[XML응용]스타일시트로 XML 표현하기

류명운

2015. 10. 8. 13:52

- css는 기본적으로 xml문서를 화면에 간단하게

- 실습한 것 위주로 간단하게 정리

* 2,3,4 다 중요[정리할 것]

* 필기 형태(크게 크게 나오는 문제도 있음)

* 연습문제가 나오거나 변형된 형태

CSS의 특징

1) CSS는 대소문자를 구분하지 않는다

-> <BOOK>와 <book>를 같은 앨리멘트로 취급한다

2) 프로퍼티 설정값은 자식앨리멘트에 상속된다

-> 단 상속되지 않는 예외 프로퍼티는 display, background계열, vertical-align, box프로퍼티다

3) 다중 앨리멘트와 다중 규칙이 적용된다

-> book, title {display: block}와 같이 사용 가능하다.

4) XML 문서에서 스타일 속성을 사용할 수 있다

-> <title STYLE="font-style:normal;font-size:14"> Title </title>

5) CSS에서 다른 CSS파일을 불러 올 수 있다

-> <형식>@import url(book.css);

-> *단, @import문은 다른 규칙이 나오기 전에 맨 앞에 기술되어야 하며, 여러 개의 import문을 사용할 수 있다. 만약 충돌되는 규칙이 있다면 부르는 주체의 CSS가 불러오는 CSS보다 우선권을 가지게 된다

6) PI 처리 형태로 기술해야 한다

-> <?xml-stylesheet type="text/css" href="Inventory01.css"?>

7) CSS의 위치를 상대경로 및 절대 경로를 사용할 수 있다

8) 경로에 절대 URL을 사용할 수 있다

-> <?xml-stylesheet type="text/css" href="http://www.mydosu.com/cris/Inventory01.css"?>

9) 하나의 XML문서에 두개 이상의 CSS를 포함시킬 수 있다

-> <?xml version="1.0"?>

-> <?xml-stylesheet type="text/css" href="Inventory01.css"?>

-> <?xml-stylesheet type="text/css" href="Inventory02.css"?>

-> * 이때 충돌되는 프로퍼티가 있다면 나중에 링크된 CSS가 우선권을 가지게 된다

CSS의 기본 구조

선택자

{

선언부

}

1. 선언부 : 속성(property)과 값(value)로 되어 있다. 예를 들면 font-style : serif;와 같이 폰트 스타일을 serif 폰트로 지정하여 나타난 값이다

2. 선택자 : 스타일을 적용할 앨리멘트를 나타낸다. 선택자의 종류와 그 기능은 다음과 같다

1) 형태 선택자: 스타일을 적용할 앨리멘ㅌ의 이름을 나타낸다

2) 하위 선택자: 하위 앨리멘트와 자신의 앨리멘트를 함께 나타낸다. ex) L L1

3) 자식 선택자: 부모 노드 ">"를 이용한 선택자로 부모 노드를 갖는 하위앨리멘트에 스타일이 지정된다. ex) L > L1

4) 근접 선택자: 부모 노드를 이용한 선택자로 "+"를 이용하여 표시한다. ex) L1 + L2

5) 다중 선택자: 여러 앨리멘트에 같은 스타일을 적용할 때 사용하는 방법이다 ex) L1, L2, L3

CSS의 속성 정의

1. Font 정의

{ font-family:gulim, "Comic Sans MS", serif } //Font Family

{ font-style: italic } //Font Style

{ font-variant small-cap } //Font Variant

{ font-weight: 700 } //Font Weight

{ font-size:14pt } //Font Size

{ font: italic nomal bold 12pt/14pt 바탕, 명조 } //Font

{ display: block } //display

각각 분리하여 표현한 태그들

H1 { font-weight: bold }

H1 { font-size: 12pt }

H1 {line-height: 14pt }

하나의 태그로 합쳐서 나타난 문장

H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica;

font-variant: normal; font-style: normal;

}

BOX 영역

1. 윗(top), 오른쪽(right), 밑(bottom), 왼쪽(left) 여백

-> ex) BODY { margin-top: 10px }

2. 여백

-> ex) margin: 10 px : 사방의 여백이 10px

-> ex) margin: 3px 5px : 윗, 밑 여백은 3px / 왼, 오른 여백은 5px

-> ex) margin: 1px 2px 3px 4px : 시계 방향으로 윗1px / 오른2px / 밑3px / 왼4px

3. 공백(padding)

-> ex) DIV{ padding-top: 10px } : DIV안의 문자는 위로 10px만큼 공백을 가지고 나타난다

-> ex) P{padding: 2px 4px 5px } : 윗 공백은 2px / 오른쪽과 왼쪽은 4px / 밑 5px

4. 테두리 굵기

-> ex) P {border-top-width: 2px } : 윗 테두리선의 굵기가 2px

-> ex) P {border-width: 2px 3px } : 윗, 밑 테두리선의 굵기는 2px / 오른, 왼 테두리선의 굵기는 3px

5. 테두리 색상

-> ex) P {border-color: red, white, black } : 윗 테두리선의 색은 'red' / 오른쪽과 왼쪽은 'white' / 밑은 'black'

6. 테두리 관련

-> ex) P { border-top: 10px solid #fffff } : 윗 테두리의 굵기는 10px, 형태는 'solid', 색상은 흰색

7. 놓기

-> ex) IMG.foo { float: right } : 그림이 오른쪽에 나타난다

8. 바탕색

-> B { background-color:blue; } : B의 바탕색을 blue로 지정 함

[실습] 외부 stylesheet를 정의한 파일의 연결을 적용한 예로 작성한 다음 XML 파일로 저장하고 브라우저로 나타내어 보자

'css-test.css'

p,h1,h2

{

font-family:Helvetica;

text-align:center;

display:block;

}

{

font-style:italic;

}

'xml-test.xml'

<?xml version="1.0" encoding="euc-kr"?>

<?xml-stylesheet type="text/css" href="css-test.css"?>

<body>

</body>

[실습] 테두리

'css-test.css'

h0{

border-style:solid;

border-color:blue;

border-width:thick;

font-size:20pt;

display:block;

margin:1em;

}

h1{

border-style:double;

border-color:red;

border-width:medium;

font-size:20pt;

display:block;

margin:1em;

}

'xml-test.xml'

<?xml version="1.0" encoding="euc-kr"?>

<?xml-stylesheet type="text/css" href="css-test.css"?>

<body>

<h0> 테두리-스타일 파랑색으로 지정</h0>

<h1> 테두리-스타일 빨강색으로 지정</h1>

</body>

저작자표시

'삶의 늪에 들어 가기 전 > 정리중(미정리)' 카테고리의 다른 글

[컴퓨터구조]조합 논리회로 정리 (0)	2015.10.09
[컴퓨터구조]디지털 논리회로 정리 (0)	2015.10.09
[XML응용]XML 네임스페이스 정리 (1)	2015.10.08
한국성서대학교 15년도 2학기 7주차 묵상지[한국성서대 묵상지] (0)	2015.10.05
[컴퓨터구조]연습문제 pp.210-217 (2)	2015.10.05

명우니닷컴