Chap6. CSS(Cascading Stytle Sheet) 김만수 자바 개발자를 위한 XML Chap6. CSS(Cascading Stytle Sheet) 김만수
CHAPTHER 6 CSS HTML과 CSS XML과 CSS
6.1 HTML과 CSS CSS 소개 Style Sheet XML 문서를 효과적으로 보여주기 위해 개발 CSS(Cascading Style Sheet)와 XSL(Extensible Style Language)이 XML에서 주로 사용 웹 브라우저에서 HTML 웹 페이지의 포맷을 지정하기 위해 W3C에서 발표된 표준 CSS 레벨1과 CSS 레벨2로 구분되어 표준화 됨 CSS 레벨3가 표준화 진행 중 HTML과 XML에 적용 가능 CSS와 XSL은 상호 보완적
6.1.1 CSS 소개 스타일 선언 HTML에서 Style Sheet를 적용하기 위해서 style tag를 <head>와 </head> 태그 사이에 삽입 HTML이나 XML문서의 태그에 특정 속성 값을 부여함으로써 문서의 포맷을 결정 스타일 규칙은 선택자(selector)와 선언부(declaration)로 구분 CSS를 위한 MIME 타입 기술 형식 <style type = “text/css”> <!-- 스타일 규칙1 스타일 규칙2 . . . . . --> </style> 주석문은 HTML 애플리케이션이 CSS를 처리하지 못하는 경우에 대비 스타일 선언 <style type = “text/css”> <!-- H1 { color : blue } --> </style> CSS를 위한 MIME 타입 기술 선택자
6.1.1 CSS 소개 스타일 선언 하나의 선언부에 여러 개의 HTML tag를 선택자로 기술 가능 다음 예는 H1, H2, …, H6 Tag들은 모두 blue color임 HTML 예 <HTML> <HEAD><TITLE> Hello CSS </TITLE> <style type=“text/css”> <!-- H1, H2, H3, H4, H5, H6 { color : blue } --> </style> <BODY> <H1> H1 스타일 적용 </H1> <H2> H2 스타일 적용 </H2> <H3> H3 스타일 적용 </H3> <H4> H4 스타일 적용 </H4> <H5> H5 스타일 적용 </H5> <H6> H6 스타일 적용 </H6> </BODY> </HTML>
6.1.1 CSS 소개 스타일 선언 선언부에 여러 개의 속성을 기술해야 할 필요가 있는 경우에는 세미콜론(;)을 이용 계속적으로 선언 HTML 원소의 Style 속성을 사용하는 방법 예 <style type = “text/css”> <!-- H1 { color : blue; font-size : 24pt } --> </style> HTML 예 <HTML> <HEAD><TITLE> Hello CSS </TITLE> <BODY> <H1 STYLE=“color : blue; font-size:24pt”> H1 스타일 적용 </H1> <H2 STYLE=“color : blue; font-size:24pt”> H2 스타일 적용 </H2> </BODY> </HTML> 예 <H1 STYLE=“color : blue; font-size : 24pt”> 제목 </H1>
6.1.1 CSS 소개 문맥 선택자(contextual selector) 내포된 tag에 Style Sheet를 적용하는 선택자 예 <H3> tag의 내용은 파란색 <EM> tag의 내용은 빨간색 <H3> tag내 <EM> tag가 있을 경우는 밑줄을 그음 예 <style type = “text/css”> <!-- H3 { color : blue } EM { color : red } H3 EM { text-decoration : underline } --> </style> 문맥 선택자
6.1.1 CSS 소개 클래스와 ID 클래스 ID 동일한 tag에서 서로 다른 Style Sheet를 적용할 때 사용 HTML 문서에서는 해당 Style Sheet tag 속성인 class의 값 ID 선택자 앞에 #문자를 사용하여 기술 문서내에서 한번만 사용이 가능 Style Sheet 예 HTML 예 <style type = “text/css”> <!-- P.italic {font-style : italic} P.bold {font-weight : bold} .underline {text-decoration : underline } --> </style> <P class=italic> This is italic paragraph. <P class=bold> This is bold paragraph. 모든 tag 에 사용이 가능 예 <style type = “text/css”> #z98y {letter-spacing : 0.3em} </style> . . . <P ID=z98y> Wide Text </P>
6.1.1 CSS 소개 외부 css 파일 외부에 저장된 css 파일을 참조 Hello.css Hello-css2.html H3 { color : blue } EM { color : red } H3 EM { text-decoration : underline } <HTML> <HEAD> <TITLE>Hello CSS </TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="hello.css"> </HEAD> <BODY> <H3>H3 제목 1</H3> <H3>H3 <EM>EM 부분</EM> 제목 2</H3> <P>이 부분은 <EM>P 태그</EM>입니다. </P> </BODY> </HTML> 외부 파일을 참조
<EM> style tag를 재정의 6.1.1 CSS 소개 외부 css 파일 @import 명령 사용법 Internet Explorer 6.0에서만 사용 가능 <style> tag의 처음 부분에 위치해야 함 특정 style tag를 재 정의 가능 Hello.css 예 외부 css 파일 참조 H3 { color : blue } EM { color : red } H3 EM { text-decoration : underline } <STYLE type = “text/css”> @import url {hello.css} EM { color : green } </STYLE> <EM> style tag를 재정의
block | inline | list-item | none 6.1.1 CSS 소개 원소 타입의 상속 화면에 표현되는 원소의 형태 Block Element : <P> 등 Inline Element : <B>, <EM> 등 List Item Element : <UL>, <LI> 등 display 속성을 이용하여 기존의 속성 변경 가능 상속 현재 element는 상위 element의 속성을 상속 받고, 재 정의 가능 속성명 가질 수 있는 값 디폴트 값 상속 적용 display block | inline | list-item | none none X 모든 원소 <STYLE type = “text/css”> P.warning {display : none } </STYLE> <P CLASS=“warning”> 이 페이지는 CSS를 지원하는 윕 브라우저를 이용해서 보셔야 합니다. </P> <BODY> TEXT1 <P> TEXT2 <SPAN> TEXT3 <EM> TEXT 4 </EM> </SPAN> </P> </BODY> <STYLE type = “text/css”> BODY {color : blue} P { font-size : 12pt} SPAN {font-weight : bold} EM {color : red} </STYLE>
6.1.1 CSS 소개 의사 원소(pseudo-element)와 의사 클래스(pseudo-class) 실제로 존재하지 않는 tag를 존재하는 것처럼 CSS를 통해 정의 대표적인 pseudo-element first-line, first-letter 대표적인 pseudo-class A:link <A> tag link, visited, active pseudo-class들이 정의되어 있음
6.1.1 CSS 소개 <A> tag 클래스 재정의 문단의 첫 글자의 사이즈를 13pt의 500% 크기로 문단의 첫 라인의 글자를 대문자로 하고, 글자 효과를 bold로 한다.
6.1.1 CSS 소개 우선 순위 CSS Style Sheet는 외부 파일에 존재하거나, HTML 파일 내부의 <STYLE> tag를 이용해서 기술 가능 기술된 style 간에 이름 충돌이 발생 가능 순서 !important로 선언된 style이 가장 높은 우선 순위 외부 style sheet보다 내부 style sheet가 우선 선택자의 종류에 따라 우선순위 변경 ID 선택자 > 클래스 선택자 > 문맥 선택자 > 일반 선택자 동일한 우선권에서는 나중에 선언된 것이 우선권 단위와 색 p. 6-13 ~ p. 6-14 참조
6.1.2 CSS 속성들 CSS에서 style을 정의하기 위해서 사용되는 속성들은 미리 정의 되었음 p. 6-15 ~ p. 6.28 참조 종류 폰트 관련 속성 : 폰트와 폰트 크기, 형태 등을 지정 색과 배경색 관련 속성 : 문자의 색, 배경색을 지정 텍스트 속성 들어 쓰기, 단어들 간의 공간, 대/소문자의 자동 변환. 문단 정력 등의 스타일 기능 제공 박스 속성 리스트 아이템 속성 위치 지정
6.2 XML과 CSS CSS를 XML에 적용할 때 HTML과 다른 점 Memo 예 XML 원소가 inline element인지 block element인지를 미리 기술 display 속성을 이용해서 기술 대 소문자를 구별 XML 문서에서 CSS 파일을 기술하기 위해 XML의 처리 명령어를 이용해서 기술 <?xml-stylesheet type=“text/css” href=“memo.css”?> Memo 예
CSS Style Sheet 문법은 XML 문법과 달라 주석 처리 6.2 XML과 CSS CSS Style Sheet를 XML 문서 내에 포함 가능 href 속성에 “#” 기호화 함께 style sheet element를 기술 CSS Style Sheet 문법은 XML 문법과 달라 주석 처리
<family> tag를 만나면 block형태로 표시하고, 줄간격을 120%로 하며, 배경 이미지를 yellow2 <family> tag를 만나면 block형태로 표시하고, 줄간격을 120%로 하며, 배경 이미지를 yellow2.gif로 지정 <person> tag를 만나면 block형태로 표시하고, 왼쪽에서 40 pixel 띄우고, ● 표시 문맥 선택자로서 <person> 속성과 더불어 화면 표시를 list-item임을 지정 문맥 선택자로서 <person> 속성 중 display 속성을 inline으로 변경. IE 6.0에서는 인식 못함