2012년 10월 4일 목요일

[CSS-웹표준 교과서]1. CSS 역할과 서식

1. CSS의 역할


 - CSS (Cascading Style Sheets) 는 웹 페이지의 '시각적 표현'을 제어하기 위한 언어이다.

 - 참고 URI

  • Cascading Style Sheets, level 1(CSS1) 
    • http://www.w3.org/TR/REC-CSS1
  • Cascading Style Sheets, level 2(CSS2) 
    • http://www.w3.org/TR/REC-CSS2
  • Cascading Style Sheets, level 2 revision 1 (CSS2.1) 
    • http://www.w3.org/TR/REC-CSS21

2. CSS의 서식


@  CSS 기본 규칙


  선택자 {속성 : 값 ;}

- 규칙집합(rule set) : 선택자로부터 시작하는 일련의 내용
- 선언블록(declaration block) : '{'로 시작해 '}'로 끝나는 부분
- 선언(declaration) : 선언 블록 안의 내용

- 선택자(selector)는 스타일을 적용하는 대상을 말하며 주로 'h1' 이나 'p'등 HTML의 요소명이 그에 해당한다.  class명이나 id명을 조합하여서 선택자의 적용대상 범위를 정하거나, 특정 속성이 있는 요소에 적용하는 등 좀더 구체적 설정도 가능하다.
- 속성(property)는 그 선택자에 어떤 스타일을 부여할지를 지정한다. 다양한 속성의 종류는 CSS 사양서에 정의 되어 있으며 속성별로 지정할 수 있는 값(value)이 정해져 있다.

# CSS 예시


 body { color : black ; font-size : large; };  


 h1,h2,h3 { color : green;}


 abbr,acronym { border : 1px dashed gray; }

# 대문자와 소문자 구별

- HTML 4.01 등과 같이 CSS는 기본적으로 알파벳의 대문자와 소문자를 구별하지 않는다.
- id명이나 class명, 글꼴명, URI 등 몇 가지 값은 구별한다.
- XHTML 이나 XML 은 요소명이나 속성명도 대문자와 소문자를 구별하고 일부 속성값에서도 구별하는 경우가 있다. 주로 소문자로 적는 것이 좋다.

# 공백문자 취급

 - CSS는 유니코드의 스페이스(20),  Tab 키(9), 라인피드(A) , 캐리지리턴(D), 폼피드(C)의 다섯 가지를 공백문자(whitespace)로 인식한다.
 - 복수의 공백문자가 연속한 때에도 하나의 공백으로 취급한다.

# 값을 표시할 때 키워드와 텍스트 구별

 - CSS에서 값으로 텍스트(string)를 지정하는 경우 인용부호(" 또는 ')로 묶도록 규칙으로 지정되었다.
 - 예컨대 다음 같은 값은 키워드에 해당하며 인용부호로 묶는 것은 올바르지 않다.
 body {  
  width : "auto" ;  
  border : "none" ;  
  font-family : "serif" ;  
  background : "red" ;  
 }

 -> 다음같이 인용부호로 묶지 않고 기술해야 한다.
 body {  
  width : auto;  
  border : none ;  
  font-family : serif ;  
  background : red ;  
 }

- 택스트를 값으로 지정할 수 있는 것은 text-align 속성, content 속성, quote 속성 뿐이다.

@ 주석 삽입


- CSS에 주석을 삽입하려면 텍스트 '/*' 와 '*/'로 둘러싼다.

 /* 페이지 전체에 적용 */  
 body {  
  color : black;  
  background-color : white;  
 }

@ 길이 단위

 - CSS로 지정할 수 있는 길이 단위 종류는 많지만 크게 '절대단위'와 '상대단위'로 나눈다.

# 절대 단위


  • pt(포인트, 1/72인치)
  • pc(파이카, 12pt)
  • in(인치, 2.54cm)
  • cm(센티미터)
  • mm(밀리미터)

# 상대 단위


  • px(픽셀)
  • ex(소문자 'x'의 높이를 1로 하는 단위)
  • em(font-size 속성의 값을 1로 하는 단위)
 - 'px'는 같은 사이즈의 화면이라도 해상도 설정에 따라 크기가 달라지기 때문에 상대단위로 되어 있지만, 대부분의 브라우저에서 절대단위처럼 해석되기 때문에 절대단위로 생각하고 지정하는 편이 좋다.

@ 색상값

- CSS에서는 색상값을 'RGB값' 또는 '키워드'로 지정한다. 'RGB값' 지정방법은 네가지이다.

# RGB값(16진수, 6자리)

 body { color : #ff0000}

# RGB값(16진수, 3자리)

 body { color : #f00}

# RGB 값(10진수)

 body { color : rgb(255,0,0); }

# RGB 값(퍼센테이지값)

 body { color : rgb(100%,0,0); }

# 키워드

 - 표준 기본 색상 16색


키워드 RGB값
black #000000
silver #c0c0c0
gray #808080
white #ffffff
maroon #800000
red #ff0000
purple #800080
fuchsia #ff00ff
green #008000
lime #00ff00
olive #808000
yellow #ffff00
navy #000080
blue #0000ff
teal #008080
aqua #00ffff

- 시스템 컬러 28 종

키워드 색정보를 얻어오는 대상
ActiveBorder 활성화된 창의 테두리선
ActiveCaption 활성화된 창의 캡션(타이틀)
AppWorkspace MDI(Multiple Document Interface)의 배경
Background 데스크톱의 배경
ButtonFace 버튼의 표면
ButtonHighlight 버튼의 하이라이트
ButtonShadow 버튼의 그림자
ButtonText 버튼의 텍스트
CaptionText 캡션(타이틀)의 텍스트
GrayText 선택 불가능한 텍스트
Highlight 선택된 항목
HighlightText 선택된 항목의 텍스트
InactiveBorder 활성화되지 않은 창의 테두리선
InactiveCaption 활성화되지 않은 캡션(타이틀)
InactiveCaptionText 활성화되지 않은 텍스트
InfoBackground 툴팁의 배경
InfoText 툴팁의 텍스트
Menu 메뉴의 배경
MenuText 메뉴의 텍스트
Scrollbar 스크롤바
ThreeDDarkShadow 디스플레이 입체표현의 어두운 그림자
ThreeDFace 디스플레이 입체표현의 표면
ThreeDHighlight 디스플레이 입체표현의 하이라이트
ThreeDLightShadow 디스플레이 입체표현의 밝은 그림자
ThreeDShadow 디스플레이 입체표현의 그림자
Window 창의 배경
WindowFrame 창의 테두리
WindowText 창의 텍스트


@ URI
 - CSS의 값에 URI를 지정할 때 'url()' 함수를 이용하여 지정한다. CSS의 기준 디렉토리는 XHTML문서의 디렉토리가 아니라 CSS 자체의 디렉토리임에 주의하자.

  body { background-image : url("../image/bcg.gif"); }

- 인용부호 생략 가능(" ")

  body { background-image : url(../image/bcg.gif); }


@ 퍼센테이지값(%값)

 - 일부 속성에서는 '%'를 단위로 하는 퍼센테이지 값을 지정할 수 있다.(마이너스 값을 지정할 수 있는 속성도 있다.)

 p { font-size : 120% }


@ 음성 스타일시트 특유의 단위

 - CSS2에 새롭게 정의된  음성 스타일시트의 일부 속성에는 각도 단위, 시간 단위, 주파수 단위를 지정한다.

 # 각도 단위
  • deg : 도수법에 근거한 각도
  • grad : 그래드법에 근거한 각도
  • rad : 라디안법(고도법)에 근거한 각도
  p.rightperson { azimuth : 90deg }

# 시간 단위
- 시간 단위에서는 마이너스를 지정할 수 없다.
  •  ms 밀리초
  •  s 초
 h2 {pause-before : 5s; }

# 주파수 단위
- 주파수 단위에서는 마이너스를 지정할 수 없다.

  • Hz : 헤르츠
  • kHz : 킬로헤르트
 p.male { pitch : 120 Hz }

@ 스타일 상속

- 부모 요소에 적용한 스타일이 자식 요소에 계속되는 것을 상속(inherit)이라고 한다.

 p { color : red }  
 abbr { text-decoration : underline }  
 <p> .. <abbr> ... </abbr> .. </p>
- p요소의 자식인 abbr 요소에도 color 속성값이 자동으로 상속되어 abbr 요소에는 다시 text-decoration 속성값이 적용된다.

 body { font-size : 90%; }  
 p { font-size : 80% ; }  
 <body>  
  <p>... </p>  
 </body>
-  상속된 값이  '%'나 'em'등의 상대단위인 때는 일반적으로 부모 요소의 값에 자식 요소의 값을 더한 값이 적용된다. 위의 경우 p요소의 글꼴 크기 '80%'는 부모 요소인 body요소의 '90%'를 기점으로 다시 계산되어 실제로는 '72%'로 표시된다.

- 자식 요소에 부모 요소 값을 강제적으로 상속시키려면 'inherit' 키워드를 지정한다.
 table { border : 1px solid gray }  
 td { border : inherit }

작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)