CSS란 무엇인가?

개요

이 문서(article)는 캐스케이딩 스타일 시트 또는 CSS 및 이것이 무엇인지 정의하고, 무엇을 위해 사용되는지를 소개한다.

이 강좌(tutorial)는 CSS가 무엇인지 설명한다. 다음 페이지에서 사용할 간단한 문서를 작성한다.

CSS에 관하여

캐스케이딩 스타일 시트(CSS)는 문서가 사용자에게 표시되는 방법을 정의하는 문서이다. 문서마크업 언어를 사용하여 구조화 된 정보의 모음이다.

예제

  • 당신이 읽고 있는 것 같은 웹 페이지가 문서이다. 웹 페이지에서 당신이 보고 있는 정보는 일반적으로 마크업 언어 HTML (HyperText Markup Language)을 사용하여 구조화 된다.
  • 응용 프로그램의 모달 창이라는 대화상자는 가끔은 문서이다. 이런 대화상자는 XUL과 같은 마크업 언어를 사용하여 구조화될 수 있다. 이는 종종 모질라 응용 프로그램의 경우이지만, 일반적인 경우가 아니다.

이 강좌에서, 아래와 같이 더 자세한 정보라고 표시된 상자는 선택적 정보를 포함한다. 이 강좌를 진행하는 게 급하다면, 이 상자를 생략하고 나중에 다시 돌아와서 읽을 수 있다. 반대로 방문했을 때 읽으려면, 자세한 내용을 보기 위해서는 링크를 따라간다

더 자세한 정보

문서는 파일과 같지 않다. 문서는 파일로 저장될 수도 또는 저장되지 않을 수도 있다.

예를 들어, 당신이 지금 읽고 있는 파일은 파일로 저장되지 않는다. 웹 브라우저가 이 페이지를 요청할 때, 서버는 데이터베이스를 쿼리하여 문서를 생성한다. 많은 파일에서 문서의 일부를 수집하는 것이다. 그러나 이 강좌에서는 파일도 저장되는 문서를 가지고 공부할 것이다.

문서와 마크 업 언어에 관한 더 자세한 정보는, 이 웹 사이트의 다른 부분을 참조하자 – 예를 들면:

HTML for web pages
XML for structured documents in general
SVG for graphics
XUL for user interfaces in Mozilla

이 강좌의 2부에서 이런 마크업 언어의 예를 볼 수 있을 것이다.

사용자에게 문서를 보여주는 것 (presenting)은 사람들이 이용할 수 있는 형태로 변환해 주는 것을 의미한다. 예를 들어, Firefox, Chrome 또는 Internet Explorer 같은 브라우저는 문서를 컴퓨터 화면, 프로젝터, 프린터 등에 시각적으로 보여주도록 설계되어 있다.

CSS는 브라우저 만을 위한 것이 아니다. 또한 시각적 표현 만을 위한 것도 아니다. 공식적인 CSS 용어에서, 사용자에게 문서를 보여주는 프로그램은 user agent (UA)라 한다. 브라우저는 단지 UA 중의 하나일 뿐이다. 그러나 이 강좌의 1장에서는 브라우저에 있는 CSS 만을 공부할 것이다.

CSS에 관한 공식적인 용어 정의는, CSS 설명서 있는 Definitions을 참조하자.

Action: 문서 만들기

  1. 컴퓨터를 사용하려 새 디렉토리를 만들고 거기에 새 텍스트 파일을 만든다. 이 파일은 문서를 포함할 것이다.
  2. 아래의 HTML을 복사하여 붙여 넣는다. shown below. 이 파일을 doc1.html 이름으로 저장한다.
  1. 브라우저에서, 새 탭을 열거나 새 창을 열고 이 파일을 연다.

아래와 같이 첫 문자가 굵은 텍스트가 표시된다:

Cascading Style Sheets

당신의 브라우저에서 이와 똑같이 보여지지 않을 수도 있다. 당신의 브라우저와 이 wiki에서의 설정 때문이다. 당신이 보고 있는 글꼴, 간격 및 색상에 차이가 있다면, 그것은 중요하지 않다.

답글 남기기