Trio 홈페이지 CSS 매뉴얼 CSS 소개 예제 메뉴로
CSS2 규격 번역문 참조 CSS1 규격 번역문 참조
Internet Explorer 4.0 이상을 기준으로 작성하다.
CSS(Cascading Style Sheet)란 무엇인가 ?
인터넷 문서의 가장 일반적인 형식은 HTML이지 만, 문서를 자유롭게 편집하는 데에 많은 제약이 따른다.
이를 보완하기 위해 만들어 진 것이 스타일 시트다.
스타일 시트의 문법과 형식은 영문 W3C 의 카스케이딩 스타일쉬트(Cascading Style Sheet) 규격 번역문 CSS1(원문 CSS1)과 번역문 CSS2(원문 CSS2)로 표준화되어 있다.
넷스케이프의 커뮤니케이터 ver 4.0, 마이크로소프트의 익스플로러 ver 3.x판에서부터 CSS1을 지원함으로써 문서 제작에서 CSS의 자유로운 사용이 가능하게 되었다.

그러나, 이 양 대 브라우저가 CSS뿐 아니라 HTML에서도 표준 안을 전적으로 따르고 있지 않기 때문에 일반 제작자들이 문서를 만드는 데에 어려움과 혼란을 안겨 주고 있다.
현재 제안되어 있는 영문 CSS2는 양 대 브라우저가 재대로 지원하지 않아, 여기에서는 Explorer을 기준으로 하여 CSS1를 중심으로 소개하였고 일부 CSS2도 사용하였다.

이곳에서는
  • 제안 된 CSS와 양대 브라우저가 지원하는 CSS의 내용과 형식들을 알아보고
  • 브라우저와 관계없이 사용되는 문서를 작성하는 방법을 알아보고
  • CSS의 다양 한 활용 방법을 공부하여 효과적인 디자인을 할 수 있도록 도움을 주기 위하여
    자세하게 설명을 수록한다.

CSS(Cascading Style Sheet) 의 장점
  • 기능 확장성</span>: HTML 의 기능을 확장한다.
    HTML의 대부분의 요소들의 단순한 기능에 다양한 기능을 추가할 수 있으며, 심지어는 기능의 변경까지 가능하다. 이렇게 함으로써 문서제작자는 독특 한 문서형식을 설계 할 수 있다.
    또 한 HTML에서 지원하지 않는 다양 한 폰트 사이즈 등의 기능도 사용 할 수 있게 된다.

  • 양식의 모듈화: 흐름이 같은 문서양식으로 전체를 구성 할 수 있다.
    HTML에서는 문서의 전반적인 틀에서부터 세부 항목까지 메번 일일이 지정 해 주어야 만 한다.
    그러나 스타일 시트를 HTML에 부가적으로 활용 함으로써 일정 한 양식을 CSS로 작성해 놓고 사용 할 때 부르기 만 하면 같은 양식으로 표현 된다
    또 한 CSS를 변경 함으로써 모든 관련 문서들의 표현 형식이 동시에 변경 된다.

  • 간편성: 문서의 형식을 손 쉽게 다양하게 구성할 수 있다.
    HTML로 복잡 한 표를 만드는 데에 상당 한 노력을 필요로 한다. 스타일 시트에는 이를 극복할 수 있는 다양한 방법이 있다. 문서의 일부를 제작자가 원하는 위치에 비교적 자유롭게 배치 할 수 있다.
    또 한 문법이 아주 쉬워 원만 한 제작자는 쉽게 익힐 수 있는 잇점이 있다.

  • 일관성: 사용 환경의 영향을 받지 않는다.
    HTML에서는 같은 문서라도 상황에 따라자동 조절 기능에 의 해 Flexible 하게 표현되어 편 할 때도 있지 만 제작자가 의도하지 않은 방향으로 표현 되는 경우가 많다.
    CSS를 사용 한 문서는 일관성이 현저히 증가 된다.

CSS(Cascading Style Sheet) 의 단점
  • 양대 브라우저가 다른 방식으로 지원: 가장 큰 걸림돌은 Netscape Communicator 와 Explorer 가 서로 다른 방식으로 스타일 시트를 지원하고 있기 때문에 문제가 있어 인터넷 문서의 표준화에 큰 걸림돌이 되고 더욱 보편화 되지 못하고 있는 것이다.
    문제점을 최소화하기 위해서는 양대 부라우저가 공통적으로 사용하는 방식 만을 사용 하는 것이 좋다.
  • 그러나 예민한 표현에서는 여러가지로 문제가 발생되니, 배우는 사람들은 한가지를 중점적으로 공부한 다음 다른 브라우저로도 바르게 표현하는 방법을 추가 해 나가는 것이 좋다. 이곳에서는 다소 복잠하기는 하지만 두가지 브라우저를 수용하도록 노력하였으나, Netscape에서는 산듯하게 표현 된지 않는 경우가 많이 발생한다.

사용법 참고
적용변수
길이, 백분율, ...
초기값: 디폴트(default)
가능한 값이나 특성은 현재 색상으로, 디폴트(default)는 굵게 표현 했슴.

소개 일반 텍스트 폰트 박스 색상 목록 색인 예제
번역문 소유자 - Trio 홈페이지 제공
이 문서(http://trio.co.kr/webrefer/css/cssintro.html)는
자유로이 연결 사용이 가능함.
예제 메뉴로