1. CSS

  • HTML 문서와 XML 문서에 스타일(글꼴, 간격, 색상)을 첨부하여 문서 내의 데이터를 다양한 모습으로 표현할 수 있게 하는 표현 중심 언어
  • 웹을 통해 전송되는 XML 데이터가 사용자에게 어떻게 보여질 것인지를 나타내는 스타일시트를 만들때사용하는 언어

   ☞  XML문서를 출력하는 방법을 정의하는 문서

  • 장점 : HTML처럼 간단하고, 배우기 쉽고, 사용하기 쉽다
  • 단점 : XML을 지원하는데 한계가 있다.
  • 1996 12 7 CSS1 W3C 권고안으로 채택되고, 네스케이프와 익스플로러에서 지원함으로서 HTML 문서에서 CSS1을 사용할 수 있게 되었다.
  • 1998 5 12 CSS2 W3C 권고안으로 채택되면서 HTML 문서와 XML 문서를 모두 지원할 수 있게 되었다.
  • W3C CSS2 권고안 사이트 : http://www.w3.org/TR/REC-CSS2/
  • CSS2 권고안의 한글 번역 사이트 : http://trio.co.kr/

 

2. CSS 맛보기

BOOK2.XML

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

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

<book>

<author>김홍경</author>

<title> 몸은 내가 고친다</title>

</book>

BOOK2.CSS

      title {

               font-style:italic;

               font-size:16pt; }

      author {

               font-style:italic;

         font-size:16pt }

c1.XML

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

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

<!DOCTYPE member SYSTEM "c1.dtd">

<booklist>                        

  <book>

    <title>JSP And Servlet</title>

    <author>Mincheol Shin</author>

  </book>

</booklist>

c1.css

book {        display:block;  }

title {     font-family:fantasy;

             font-size:14pt;

             color:blue;             

             display:block;     }

author {  font-family:fantasy;

              font-size:14pt;

              color:green;

             display:block; }

c1.dtd

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

<!ELEMENT booklist (book*)>

        <!ELEMENT book (title, author)>

                <!ELEMENT title (#PCDATA)>

                <!ELEMENT author (#PCDATA)>


  • Well-Formed XML 문서와 유효한 XML 문서는 브라우저에서 트리모양으로 디스플레이 된다.
  • XML 문서와  HTML 문서는 사용 목적이 다르다.
    • XML 문서 : 데이터를 구조화시켜 보관 또는 전달
    • HTML 문서 : 사용자에게 보여주기 위해 사용
  • XML 문서를 CSS XSLT문서와 결합하여 HTML 문서처럼 다양한 모습으로 표현 할 수 있다.

3. 외부 스타일 시트 문서를 참조하는 구문

  • <?xml ~>와 같은 선언문 다음에 위치
  • <?xml-stylesheet type="text/css" href="css 문서 파일명"?>
    • type="text/css" : 외부 문서의 유형은 css문서
    • href="css 문서 파일명" : 외부 문서의 파일명을 적용
    • href="http://웹서버주소/경로명/~.css" : 특정웹서버에 있는 외부 스타일시트 문서를 적용

4. 외부 스타일 시트 문서를 참조하는 구문


선택자 {

               선언

            속성:속성값;

            }

o    선택자 : 규칙이 적용될 요소의 이름

o    선언

§  {}안의 영역에 기술

§  선택자를 화면에 표현할 방식을 결정하는 문장

§  속성:속성값 형식으로 선언

§  font-style : italic

주의사항

o    선언 블록에   이상의 선언이 있을 경우 구분자로 세미콜론(;) 사용

o    세미콜론을 사용하지 않으면 해당 선언 블록 안의 속성 정의는 전부 무효

o    css 선언에 문제가 있을 경우라도  브라우저의 기본 값으로 해당 문자 데이터를   있다.

선택자에 사용될 수 있는 표현

선택자

설명

*

모든 엘리먼트가 대상이 된다.

엘리먼트

엘리먼트가 대상이 된다.

엘리먼트1 엘리먼트2

엘리먼트1의 자손인 엘리먼트2가 대상이 된다.

엘리먼트1 > 엘리먼트2

엘리먼트1의 자식인 엘리먼트가2가 대상이 된다.

엘리먼트[속성]

지정된 속성을 갖는 엘리먼트가 대상이 된다.

엘리먼트[속성="속성값"]

지정된 속성값을 갖는 엘리먼트가 대상이 된다.

 

5. css의 기본 문법

  • 영문 대소문자에 관련된 문제
    • xml 문서의 대소문자 차이로만 구분할  있는 요소 이름의 경우에는 css 적용하기는 힘들다.
  • xml 문서 내부의 css 지정

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

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

<book style=font-style:italic;  font-size:16> 내 몸은 내가 고친다

</book>

  • 다른 스타일 시트 불러오기
    • 다른 css 파일을 불러와서 포함시키는 것이 가능
    • @import url(스타일시트의 파일명)
  • css내에서의 적용 우선 순위
  1. 상위 요소에 지정한 속성이 하위 요소에 적용되는 상속성이 있다
  2. xml 문서 내에서 style속성이 지정되었다면 최우선으로 적용
  3. 문맥 선택자를 우선 적용
  4. 일반 선택자에 선언된 속성값을 적용
  5. 가장 가까운 조상 선택자에 선언된 속성값이 적용
  6. 조상 선택자에서도 선언되지 않은 속성은 브라우저 자체에 설정된 값을 사용
  • 동일 우선 순위의 경우는 나중 뒤에 선언한 것이 우선한다.
  • css 파일을 불러온 경우에는 호출된 파일의 내용이 호출한 파일의 처음에있는 것처럼 해석된다., 현재 불러들인 파일의 css내용이 우선시 된다.

books.xml

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

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

<books>

   <book>

      <author>김홍경</author>

      <title>내 몸은 내가 고친다</title>

   </book>

   <book>

      <author>김용옥</author>

      <title>철학강의</title>

   </book>

</books>

books.css

book {  font-size:13pt }

 

book title /* 문맥선택자 */

{        font-style:italic;  }

 

title     /* 일반 선택자 */

{        display: block;

        font-size:18pt;

        font-style:normal;

}

 

6. display 속성

  • 엘리먼트의 출력 여부 및 엘리먼트의 앞과 뒤에 줄바꿈을 지정하기 위해 사용디는 속성
  • display : 속성값;
  • 적용 가능한 속성값

속성값

설명

block

, 뒤의 엘리먼트에 대해 줄바꿈을 사용한다.

inline

, 뒤의 엘리먼트에 대해 줄바꿈을 사용하지 않는다.

list-item

block과 동일한 기능에 목록 표시가 추가된다.

none

지정한 엘리먼트를 출력하지 않는다.

list-style-type

순서 없는 리스트 : disc - , circle - , square -

순서 있는 리스트 : decimal, lower-roman, upper-roman,lower-alpha, upper-alpha

  • 1) 교재 177~178페이지
  • 2)

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

 

<booklist>

        <book id="b1" kind="소설">

             <title>마지막 춤은 나와함께</title>

             <author>은 희경</author>

             <publisher>가람기획</publisher>

             <price>9000</price>

        </book>

</booklist>



 

7. 글씨체 관련 속성

속성명

설명

font-family

o    사용된 특정 글씨체나 일반적인 글씨체 등을 선언한다.

o    글씨체가 없는 시스템을 위해 왼쪽에서 오른쪽으로 중요도 순서대로 글씨체를 하나 이상 지정 가능

font-style

o    문자 스타일을 고른다.

o    가능한 값은 italic, oblique, normal 등이다.

font-size

o    글씨체의 크기를 지정한다.

o    가능한 값

§  절대크기 : xx-small, x-small, medium, x-large, xx-large

§  상대크기 : larger, smaller

§  길이

§  퍼센트값

font-weight

o    글씨체의 굵기를 지정한다.

o    가능한 값 : normal, bold, lighter, 100~900까지의 숫자 등이다.

font-variant

o    일반 글꼴과 소형 대문자 글꼴 사이를 전환할 경우에 사용

o    주로 내부의 모든 블록 및 인라인 요소들에 사용되어진다.


1) font-family 속성

    • font-family : "글꼴"
    • font-family : "글꼴1 글꼴2"  : 시스템에 글꼴1이 없을 경우 글꼴2를 사용
    • 1) 교재 181페이지
    • 2)

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

<booklist>

        <book id="b1" kind="computer">

                 <title>XML Bible</title>

                 <author>채 규태</author>

                 <publisher>Freelec</publisher>

                 <price>25000</price>

        </book>

</booklist>




2) font-size 속성

    • 브라우저에 따른 절대크기 지정


    • 상대적인 크기 지정



    • 구체적인 크기 지정

    • 1) 교재 182~183페이지
    • 2)

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

<booklist>

        <book id="b1" kind="computer">

                <title>XML 활용</title>

                <author>이 규미</author>

                <publisher>Freelec</publisher>

                <price>30000</price>

        </book>

</booklist>




3) font-style 속성

    • font-style : normal | italic | oblique ;
    • italic, oblique : 기울어진 글자 스타일을 지정할 때 사용
    • 1) 교재 184페이지
    • 2)

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

<booklist>

        <book id="b1" kind="computer">

                <title>고급 XML</title>

                <author>신 민철</author>

                <publisher>Freelec</publisher>

                <price>25000</price>

        </book>

</booklist>




4) font-weight 속성

    • 폰트의 굵기를 설정하기 위해 사용

속성값

설명

normal

보통굵기(절대)

bold

굵게 표시(절대)

bolder

부모요소보다 조금 더 굵게 표시(상대)

lighter

부모요소보다 조금 더 가늘 게 표시

100~900사이의 100단위 값

100으로 갈수록 가늘고, 900으로 갈수록 굵다.  기본 400

    • 1) 교재 184페이지
    • 2)

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

<booklist>

        <book id="b1" kind="computer">

             <title>XML 따라하기</title>

             <author>채 규태</author>

             <publisher>Freelec</publisher>

             <price>30000</price>

        </book>

</booklist>




4) font-variant 속성

    • small-caps : 영문을 모두 대문자로 바꿔서 표시
    • normal : 기본값으로 아무런 변경이 없다.
    • 1) 교재 184페이지

8. 폰트 색상과 배경 색상 관련 속성


1) color 속성

    • 글자의 색상을 지정하기 위한 속성
    • )
      • color : blue;
      • color : #0000ff;  -> RGB로 표현 가능
      • color : rgb(0,0,255);
      • color : rgb(0%, 0%, 100%);
    • 1) 교재 185~186페이지
    • 2)

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

<booklist>

        <book id="b1" kind="computer">

                 <title>XML 완성</title>

                 <author>신 민철</author>

                 <publisher>Freelec</publisher>

                 <price>30000</price>

        </book>

</booklist>




2) background-color 속성

    • 바탕 색을 지정하기 위한 속성
    • 1) 교재 186~188페이지
    • 2)

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

<booklist>

    <book id="b1" kind="소설">

    <title>그 많던 싱아는 누가 다 먹었을까?</title>

     <author>박 완서</author>

     <publisher>웅진닷컴</publisher>

     <price>7000</price>

  </book>

</booklist>




3) 배경 이미지 속성

    • 바탕 배경을 지정하기 위한 속성

속성명

설명

background-image

배경 이미지를 지정

background-image : url("파일명") ;

background-repeat

특정 엘리먼트에 배경 이미지를 반복적으로 지정할 때 사용

repeat

이미지를 상하좌우 모든 방향으로 반복

repeat-x

이미지를 오른쪽에서 왼쪽으로 반복

repeat-y

이미지를 위에서 아래로 반복

no-repeat

이미지를 반복시키지 않음

background-attachment

배경 이미지를 고정할 것인가, 스크롤 할 것인가를 선택

속성값을 지정하지 않으면 기본값으로 scroll이 적용

background-attachment : fixed | scroll ;

background-position

배경 이미지의 위치를 지정

50% 60%

percentage(e.g, 50%, 60%)

왼쪽으로 50%, 위로부터 60%에 위치

왼쪽 값만 지정하면 위쪽값은 자동으로 50%

50, 60

length(50, 60)

왼쪽으로 50픽셀, 위로부터 60픽셀에 위치

top, center, bottom

위쪽, 가운데, 아래쪽 중의 한 곳에 위치

left, center, right

왼쪽 가운데, 오른쪽 중의 한 곳에 위치

    • 1) 교재 187~192페이지
    • 2)

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

<booklist>

  <book id="b1" kind="소설">

     <title>독일인의 사랑</title>

     <author>막스 뮐러</author>

     <publisher>소담출판사</publisher>

     <price>4500</price>

  </book>

</booklist>



 

9. 텍스트 관련 속성 (193~197페이지)

속성명

설명

text-decoration

텍스트에 효과를 줄 경우 사용

text-transform

텍스트를 대소문자로 변환할 때에 사용

text-align

텍스트의 수평 정렬을 지정할 경우 사용

text-indent

첫째 줄에 들여쓰기를 지정할 경우 사용


1) text-decoration 속성

    • 텍스트에 밑줄이나 깜박임 등 특정 효과를 설정 할 경우 사용

속성

설명

none

효과를 지정하지 않을 경우 사용

underline

밑줄 효과를 지정

overline

윗줄 효과를 지정

line-through

중간줄 효과를 지정

blink

깜박임 효과를 지정

    • 1)

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

<booklist>

<book id="b1" kind="소설">

     <title>사랑의 기술</title>

     <author>에리히 프롬</author>

     <publisher>소담출판사</publisher>

     <price>5000</price>

</book>

</booklist>




2) text-transform 속성

    • 대소문자로 변환

속성

설명

capitalize

첫글자를 대문자로 바꾼다.

uppercase

모든 글자를 대문자로 바꾼다.

lowercase

모든 글자를 소문자로 바꾼다.

    • 1)

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

<booklist>

<book id="b1" kind="computer">

     <title>inside XML</title>

     <author>Steven Holzner</author>

     <publisher>New Riders</publisher>

     <price>50000</price>

</book>

</booklist>




3) text-align 속성

    • 대소문자로 변환

속성

설명

left

왼쪽 정렬

right

오른쪽 정렬

center

가운데 정렬


4) text-indent 속성

    • 문단의 첫째 줄을 들여쓰기 할 경우에 사용
    • text-indent : 길이 | 퍼센트
    • 길이로 px, pt, cm, in등으로 표현
      • 음수로 지정시 내어쓰기의 효과
    • 퍼센트로 값 표현
    • 1)

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

<booklist>

  <book id="b1" kind="소설">

     <title>밑줄긋는 남자</title>

     <author>카롤린 봉그랑</author>

     <publisher>열린책들</publisher>

     <price>7500</price>

  </book>

</booklist>




5) letter-spacing 속성

    • 텍스트 문자 사이의 간격을 지정
    • letter-spacing : .5em;

6) vertical-align 속성

    • 윗첨자와 아래첨자를 표시하는데 사용

속성

설명

sub

아래로 표시

super

윗첨자로 표시

baseline

기본값

    • 위첨자나 아래첨자의 경우 글꼴 크기가 작아지는 것이 아니기에, font-size 속성을 이용해서 크기를 조절해야 한다.
    • 1)

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

<main>

<test>보통 텍스트<super>윗첨자</super></test>

<test>보통 텍스트<sub>아래첨자</sub></test>

</main>




7) line-height 속성

    • 텍스트의 행 높이를 지정
    • line-height : 2em

10. 보더(Border) 관련 속성 (193~197페이지)


속성명

설명

border-style

테두리의 스타일을 지정한다.

border-width

테두리의 너비를 지정한다.

border-color

테두리의 색상을 지정한다.


1) border-style 속성

    • 텍스트의 스타일을 지정
    • 속성이 지정되지 않으면 테두리선은 나타나지 않는다.

    • 1)

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

<booklist>

<book id="b1" kind="수필">

     <title>시인을 찾아서</title>

     <author>신 경림</author>

     <publisher>우리교육</publisher>

     <price>8000</price>

</book>

</booklist>




2) border-width 속성

    • 테두리선의 너비를 지정할 경우 사용

속성

설명

thin

얇은 폭 지정

medium

중간 폭 지정(기본값)

thick

두꺼운 폭 지정

길이

폭 길이를 직접 지정(음수 사용 불가)

    • 1)

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

<booklist>

<book id="b1" kind="수필">

     <title>시인을 찾아서</title>

     <author>신 경림</author>

     <publisher>우리교육</publisher>

     <price>9500</price>

</book>

</booklist>




3) border-color 속성

    • 1)

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

<booklist>

  <book id="b1" kind="수필">

     <title>그대 아직도 꿈꾸고 있는가?</title>

     <author>박 완서</author>

     <publisher>세계사</publisher>

     <price>9500</price>

  </book>

</booklist>




4) 테두리의 너비, 스타일, 색상을 한번에 지정하기

    • Background  : 상자의 배경색 지정
    • Color : 텍스트색 지정
    • Border-color : 선의 색상
    • Border-top-color : 선의 위쪽 색상
    • Border-right-color : 선의 오른쪽 색상
    • Border-bottom-color : 선의 아래쪽 색상
    • Border-left-color : 선의 왼쪽 색상
    • border-left, border-right, border-top, border-bottom : width-속성값  style-속성값  color-속성값
    • 1)

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

<booklist>

  <book id="b1" kind="소설">

     <title>토지</title>

     <author>박 경리</author>

     <publisher>나남</publisher>

     <price>9500</price>

  </book>

</booklist>



 

5) 여백 관련 속성

    • 브라우저 상하좌우에서 데이터와 떨어진 공간을 지정
    • margin : 속성값    => 상하좌우의 여백을 한번에 저장
    • margin-위치(left, right, top, bottom) : 속성값  => 주어진 위치의 여백을 지정
    • 길이로 값을 사용 : pt, em, ex등으로 사용
    • em : 현재 폰트 높이의 단위
    • ex : 현재 폰트의 소문자 x의 높이에 대한 상대 높이
    • 1)

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

<booklist>

  <book id="b1" kind="소설">

     <title>타인에게 말걸기</title>

     <author>은 희경</author>

     <publisher>문학동네</publisher>

     <price>7000</price>

  </book>

</booklist>




6) 패딩 관련 속성

    • 문자와 문자의 간격을 지정하기 위해 사용
    • padding : 속성값    => 상하좌우의 패딩을 한번에 저장
    • padding-위치(left, right, top, bottom) : 속성값  => 주어진 위치의 패딩을 지정
    • 길이로 값을 사용 : pt, em, ex등으로 사용
    • 1)

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

<booklist>

  <book id="b1" kind="소설">

     <title>토지</title>

     <author>박 경리</author>

     <publisher>나남</publisher>

     <price>9500</price>

  </book>

</booklist>



 

11. 리스트 관련 속성

    • display : list-item으로 속성 선언을 먼저하고, list 속성을 선언한다.
    • list-item의 모양이나 형식을 변경하기 위해 적용할 수 있는 속성

속성명

설명

list-style-type

목록 구분 기호나 문자를 지정

list-style-image

목록 구분 기호나 문자를 이미지로 지정

list-style-position

목록 구분 기호나 문자의 위치를 지정


1) list-style-type 속성

    • 목록 구분 기호나 문자를 지정

속성

설명

disc

square

decimal

1,2,3,4

lower-roman

i, ii, iii, iv

upper-roman

I, II, III, IV

lower-alpha

a, b, c, d .....

upper-alpha

A, B, C, D .....

    • 1)

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

<booklist>

  <book id="b1" kind="소설">

     <title>길 없는 길</title>

     <author>최 인호</author>

     <publisher>여백</publisher>

     <price>9000</price>

  </book>

</booklist>




2) list-style-image 속성

    • 목록에 사용되는 기호나 문자 대신해서 이미지를 사용
    • list-style-image : url (이미지  파일 경로)
    • 이미지를 못 찾으면 ●(기본값)으로  출력
    • 1)

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

<booklist>

  <book id="b1" kind="소설">

     <title>더불어 숲1,2</title>

     <author>신 영복</author>

     <publisher>중앙MB</publisher>

     <price>7000</price>  

  </book>

</booklist>



 

3) list-style-position 속성

    • 목록에 사용되는 기호나 문자 대신해서 이미지를 사용
    • list-style-position : inside | outside

속성

설명

 inside

기호부분이 데이터의 같은 라인에서 나온다.

outside

기호부분이 데이터보다 앞에 나오게 한다.

    • 1)

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

<booklist>

  <book id="b1" kind="소설">

     <title>아홉살 인생</title>

     <author>위기철</author>

     <publisher>청년사</publisher>

     <price>6400</price>  

   </book>

</booklist>



    • 3)

list.xml

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

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

<list>

<item1>항목 1-1</item1>

<item1>항목 1-2</item1>

<item2>항목 2-1</item2>

<item2>항목 2-2</item2>

<item3>항목 3-1</item3>

<item3>항목 3-2</item3>

</list>

list.css

item1 {

  display:list-item;

  list-style-type:disc;

  list-style-position: inside;}

 

item2 {

  display:list-item;

  list-style-type:circle;

  list-style-position: inside;}

 

item3 {

  display:list-item;

  list-style-type:square;

  list-style-position: inside; }


출처: http://xmljang.com.ne.kr/


블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요