Getting Started

서론

이 튜토리얼은 캐스케이팅 스타일 시트(Cascading Style Sheets, CSS)를 소개하고 있습니다.

이 튜토리얼은 독자가 자신의 컴퓨터에서 직접 실행해볼 수 있는 실전적인 예제로 CSS의 기본적인 기능들을 소개할 것입니다.

  • I 부에서는 모질라 브라우저들뿐만아니라 대부분의 다른 브라우저에서도 작동하는 CSS의 기본 기능들을 설명합니다.
  • II 부는 모질라에서는 작동하지만 다른 환경에서는 꼭 작동한다고 할 수는 없는 특별한 기능들에대한 예제들을 포함하고 있습니다.

이 튜토리얼은 CSS 2.1 명세에 기반을 두고 있습니다.

이 튜토리얼은 누구를 위한 건가요?

이 튜토리얼은 일반적으로 CSS 초보자들을 대상으로 하고 있습니다, 그러나 CSS에 익숙하신 분들도 사용할 수 있습니다.

CSS의 초보자분들은 이 튜토리얼의 I 부에서 CSS를 이해하고, 그것의 사용법을 배우신 다음, II 부에서 모질라에서 다루는 CSS의 범주를 이해하시게 될 것입니다.

CSS를 좀 알고 계신다면, 이 튜토리얼의 이미 알고 계신 부분들은 건너 뛰시고, 흥미가 있는 부분만 사용하실 수 도 있습니다.

CSS 를 잘 다루시지만 모질라에선 그렇지 못하시다면, II부 부터 시작하실 수 도 있습니다.

시작하기 전에 뭐가 필요한가요?

이 튜토리얼을 잘 사용하기 위해서, 텍스트 파일 에디터와 모질라 브라우저 (Firefox 나 Mozilla Suite)가 필요합니다. 물론 이들의 기본적인 사용법은 알고 계셔야 합니다.

파일을 편집하고 싶지 않은 분은 그냥 튜토라얼을 읽으면서 그림들만 보실 수도 있습니다. 그러나, 이건 학습하는 데 그리 효과적이지는 않습니다.

튜토리얼의 몇몇 부분은 다른 모질라 소프트웨어를 요구할 수도 있습니다. 이 부분들은 옵션입니다. 다른 모질라 소프트웨어를 다운로드하고 싶지 않으시면 그냥 건너 뛰셔도 됩니다.

주의:  CSS는 색을 다루는 방법들을 제공합니다. 따라서, 튜토리얼의 이 부분들은 색에 의존하게 됩니다. 이 부분들은 컬러 디스플레이를 갖추신 색맹이 아닌 분들이라면 쉽게 사용하실 수 있습니다.

이 튜토리얼의 사용법

이 튜토리얼을 사용하기 위해선 각 페이지들을 차근 차근 순서대로 읽으면 됩니다. 한 페이지를 놓쳐버리면, 뒤 페이지들을 이해하기 어렵게 될 수도 있습니다.

각 페이지마다, CSS가 어떻게 작동하는지 이해하려면, 정보(Information) 섹션을 사용하세요. CSS를 컴퓨터에서 시험해 보려면 액션(Action) 섹션을 사용하세요.

배운것을 테스트하고 싶으시면 각 페이지의 끝의 challenge(도전)를 시도해보세요. challenge의 몇몇 해답은 튜토리얼의 다음 페이지들에 나와 있습니다.

CSS를 보다 심도있게 이해하고 싶으시면 More details라는 캡션이 붙어있는 박스안에 있는 정보들을 읽어보세요. 그곳의 링크로 CSS에 관한 레퍼런스 정보를 찾으실 수 있습니다.

튜토리얼 I 부

기본적인 스텝 바이 스텝 CSS 가이드

  1. CSS가 뭐에요
  2. 왜 CSS를 사용하나요
  3. CSS가 작동하는 방식
  4. 케스케이딩 그리고 상속성
  5. 선별자
  6. 읽기 쉬운 CSS
  7. 텍스트 스타일
  8. 내용물
  9. 리스트
  10. 상자
  11. 레이아웃
  12. 미디어

튜토리얼 II 부

모질라에서의 CSS 범주를 보여주는 예제들

  1. JavaScript
  2. XBL bindings
  3. XUL user interfaces
  4. SVG graphics
  5. XML data

Document Tags and Contributors

Contributors to this page: Ioseph, Sebuls
Last updated by: Sebuls,