CSS란 무엇인가

공헌자 숫자: 3명

중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/13)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.

여기가 CSS 시작하기 안내서의첫장이다.여기서는 CSS가 무엇인지를 설명한다. 우선 다음 페이지의 내용을 실습할 간단한 document페이지를 만들어라.

Information: CSS란

Cascading Style Sheets (CSS)는 documents가 사용자에게 어떻게 보여질가를 기술하는 언어이다.

Document는 마크업 언어로 사용된 정보의 집합이다.

예시
  • 일반적인 웹페이지도 Document이다..
    웹페이지를 통해 보는 정보들도 보통 HTML(HyperText Markup Language)이라는 마크업언어로 작성 되었다.
  • 모달 윈도우(Modal windows)로 불리는 대화상자들도 일부는 Document이다.
    그 대화상자도 역시 XUL와 같은  마크업 언어로 구성되었다. 이런 대화상자는 대부분 모질라 어플리케이션에서 사용되지만 일반적인 경우는 아니다.

이 안내서에서, 아래 좀더 자세히라고 표시된 상자에서 다른 선택 가능한 사항에 대한 정보를 제공한다. 시간이 충분하면 아래 좀더 자세히를 참고하고 그렇지 않다면 다음에 읽어도 된다. 그렇지만 자세하게 배우려면 아래 링크를 따라 가면 된다.

좀더 자세히

Document파일이 아니다. Document는 하나의 파일로 저장될수도 있고 아닐 수도 있다.

예를 들면, 지금 읽고 있는 이 페이지도 파일에 있는 것이 아니다. 웹 브라우저가 서버에 현재 페이지를 요청하면 서버가 Database를 활용 여러 파일에 걸쳐 있는 정보를 가져와서 이 Docuement page를 생성한다. 어쨋던, 이 안내서를 포함하는 Document는 여러 파일에 저장된 document들이다.

Docuemtn와 마크업 언어에 대해 좀더 자세히 알고 싶다면 아래 웹사이트를 참고하라.

HTML 웹 페이지
XML 일반적으로 구조화된 Document
SVG 그래픽
XUL 모질라에서의 사용자 인터페이스

이 안내서의 Part II에서는 이러한 마크업 언어의 예제를 볼수 있다.

Document를 사용자에게 표시 한다는 것은 사람들이 그것을 사용할 수 있도록 형식화하는 것을 말한다. 파이어폭스, 크롬, 익스플로러등과 같은 브라우저는 이와 같은 Document를 모니터나, 프로젝터 또는 프린터를 통해 시각적으로 보여주도록 설계 되었다.

좀더 자세히

CSS는 브라우저만을 위한 것이 아니고, 시각적 표시만을 위한 것도 아니다. 형식화된 CSS기술에서, 사용자에게 Document를 보여주는 프로그램을 UA(User Agent)라고 한다. 브라우저는 UA의 한 종류이다. 어쨋던, 이 안내서의 Part I에서는 CSS를 브라우저 용으로 사용하는 법을 알게 될 것이다.

CSS관련된 일반적인 정의를 알고 싶다면 CSS Specification의 Definitions를 참고하라.

액션: Document 생성하기

  1. 일단 컴퓨터에 새로 폴더를 하나 만들고, 그안에 텍스트 파일도 하나 만들어라. 그 파일에 앞으로 사용할 document를 넣을 것이다.
  2. 아래 HTML을 doc1.html파일로 만들어 저장하세요
    <!DOCTYPE html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      </head>
    
      <body>
        <p>
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
      </body>
    </html>
    
  3. 브라우저 창에 위의 파일을 열어보라.

    당신은 아래와 같이 첫글자가 굵은 글씨로된 화면을 볼수 있다.

    Cascading Style Sheets

    현재 브라우저 설정에 따라서 위와 똑같이 보이지 않을 수도 있다. 폰트나 간격 색상들이 좀 다르더라도 크게 중요한 사항이 아니다.

다음에는?

위의 document는 아직 CSS를 사용한 것이 아니다.  다음 장에서 CSS를 본격적으로 써보도록 하자.

문서 태그 및 공헌자

Contributors to this page: teoli, namun, SpikeYou
최종 변경: teoli,