날짜: 1996-06-03 | 글쓴이: 도아 | 9724 번 | 프린트 | 메일로보내기

제 3강 - CSS 맛보기


Style Sheet는 브로우저에게 문서를 어떻게 표현해야 하는 가를 전달하는 스타일 규칙으로 구성된다. 이러한 스타일 규칙들을 자신의 HTML 문서와 연결하는 여러가지 방법이 존재하지만 가장 간단한 방법은 HTML의 STYLE 태그를 이용하는 것이다. 이 태그는 HEAD 태그 사이에 있어야 하며, 해당 페이지에대한 스타일 규칙을 포함한다. STYLE 태그는 Style Sheet를 연습하는 좋은 방법이지만 연습에서 이방법을 사용하기전에 고려해야할 단점이 있다. 여러 방법에대한 장점과 단점은 Style Sheet와 HTML의 연결에대한 절에서 논의하겠다. 각각의 규칙은 선택자-보통 BODY, P, EM과 같은 HTML 태그들-와 선택자에 적용될 스타일로 구성된다. 태그들에대해 정의될 수 있는 많은 특성이 존재하며, 각각의 특성은 값(value)을 가지며, 값(value)은 특성과 더불어 선택자가 어떻게 표현되어야 하는가를 서술한다. 스타일 규칙은 다음과 같이 만든다.
selector { property: value }
하나의 선택자에대한 다중 스타일 선언은 세미콜론으로 분리한다.
selector { property1: value1; property2: value2 }
예를들어 다음과 같은 코드는 H1H2에대한 색상(color)글꼴크기(font-size) 특성을 정의한다.

<HEAD> <TITLE>CSS 예</TITLE> <STYLE>
	  H1 { font-size: x-large; color: red }
	  H2 { font-size: large; color: blue }
</STYLE> </HEAD> 위의 Style Sheet는 브로우저에게 H1 태그는 글꼴크기를 extra-large로하고 글꼴색상을 적색 으로 보여주고, H2 태그는 크기를 large로, 색상을 파란색으로 보여주라는 것이다. CSS1 에서는 사용할 수 있는 모든 특성과 값을 정의한다. 이러한 특성과 값들은 또한 이 사이트의 CSS 특성에 주어져 있다. 이 문서는 Cascading Style Sheets에대한 아주 기본적인 소개와 자신의 스타일을 실험하기에 충분한 정보를 제공할 목적으로 만들어 졌다. CSS에대한 자세한 사항은 다음절을 읽기 바란다.


다음글: 제 4강 - CSS 구조와 규칙 (10228)1996-06-04
이전글: 제 2강 - Style Sheet란 (9533)1996-06-02

세상사는 이야기

  • 오타도 즐거운 안드로 >
  • 최고의 OCR 어플, Text >
  • 누구나 할 수 있는 순 >
  • 듀오백 컨텐츠 허브, >
  • 초딩도 할 수 있는 아 >
  • 듀오백 2.0, 최적의 등 >
  • 의자이기를 포기(?)한 >
  • 야후의 꼴통 짓과 플리 >
  • 책을 테이크 아웃? 크 >
  • 전자책(크레마 터치), >


  • RSS 구독 (익명 | 회원 | 강좌 | 포럼)
    (C) 1996 ~ 2014 QAOS.com All rights reserved.