2011년 1월 11일 화요일

CSS 강좌

  스타일 시트 란?

인터넷 문서의 일반적인 형식은 html 이지만, 문서를 자유롭게 편집하는 데는 많은 제약이 따릅니다. 이를 위해 만들어진 것이 스타일 시트입니다. 스타일 시트는 html 을 전제로 그것에 적합하도록 제작되었기 때문에 html 을 제작할 수 있는 사람이라면, 조금만 시간을 투자하면 금방 배워서 활용할 수 있습니다. 처음에 보기에는 낯설어 보이지만 금방 익숙해 지리라 생각합니다.
현재 css가 폭넓게 사용되지 않는 이유는 넷스케이프와 익스플로러가 스타일 시트를 서로 상이한 방식으로 지원하고 있기 때문인 것으로 보입니다. 이것은 인터넷 문서의 표준화에 큰 걸림돌이 되고 있는 것이다.

저의 홈에서는 홈페이지 제작에 많이 사용하는 것을 위주로 설명을 할까 합니다. html 에서도 그랬듯이 스타일 시트의 종류는 무한정 많습니다. 그것을 다 알려면 많은 시간과 노력을 투자해야합니다. 그러나 걱정하지 마십시요. 그것을 다 알 필요는 없습니다.
자 그럼 홈페이지 제작에 꼭 필요한 것을 위주로 집중 강의를 시작 하겠습니다.
  스타일 시트를 사용함으로써 좋은 점

  html 요소 element 의 기능을 확장한다.
html 의 대부분의 요소들의 단순한 기능에 다양한 기능을 추가할 수 있으면, 심지어는 기능의 변경까지 가능하다. 이렇게 함으로써 문서제작자는 배타적인 문서양식을 설계할 수 있는 것이다.
  통일된 문서양식을 Design 할 수 있다.
html 에서는 문서의 전반적인 틀에서부터 세부 항목까지 일일이 지정해 주어야만 한다. 스타일 시트를 html에 부가적 cascading 으로 활용함으로써 이러한 번거로움을 최소화할 수 있다. 특히 html 문서 외부에서 .css 파일을 불러들여 사용할 수 있으므로 문서 전체의 일관성을 유지할 수 있고, 그 변경이 쉽다.
  문서의 형식을 다양하게 구성할 수 있다.
html 의 table 요소 element 는 복잡한 표 table 를 만드는 데에 불편한 점이 많을 뿐 아니라 문서 생성기간이 긴 단점이 있다. 스타일 시트에는 이를 극복할 수 있는 다양한 방법이 있다. 문서의 일부를 제작자가 원하는 위치에 비교적 자유롭게 배치할 수 있는 것이다.
  사용자의 환경 user agent 에서 독립된 문서를 제작한다.
문서제작자가 공을 들여 제작한 문서양식은 사용자의 브라우저 환경에 따라 그 모습이 다르게 나타난다. 스타일 시트는 이것을 방지한다. 오로지 제작자가 의도한대로만 그 효과가 전달되는 것이다. 이로써 제작자는 문서의 독창적인 짜임새을 보장받게 되는 것이다.
  기본적인 형식

select 란 스타일을 적용할 대상을 나타내는 것으로 스탕일을 [ { ] 와 [ } ] 사이에 [ 속성 : 값 ] 의 형식으로 지정하며 이 때, 속성값의 앞 뒤에는 자유롭게 빈칸을 둘 수 있습니다. 또 속성값을 [ ; ] 로 구별하여 여러 개 지정할 수 있습니다.
selector { 속성 : 값 }
예)   hr { font-size : 10pt }

그리고 다음과 같이 같이 여러 개의 select 를 [ ; ] 로 구별하여 지정하면 여러 select 에 대해서 한 번에 같은 스타일을 설정할 수 있습니다.
selector { 속성 : 값 ; 속성 : 값 ; 속성 : 값 ; . . . }

selector {
속성 : 값 ;
속성 : 값 ;
속성 : 값 ;
속성 : 값 ;
. . .
}
또한 여러개의 selector 가 하나의 속성을 가지게 되면 아래와 같이 표현할 수 있습니다. selector 와 selector 사이에는 반드시 [,] 를 넣어야 합니다.
selector,selector,selector,. . . { 속성 : 값 }

댓글 없음:

댓글 쓰기