CSS 스타일시트 정리

일반적인 CSS 정의하는 방법 및 기본적인 CSS 사용법들...
태그별 사용되는 스타일 등이 있습니다..
조금이나 도움이 되었으면 합니다..

C S S

1. DHTML(Dynamic Hyper Text Markup Language)이란?
   ․ 동적인 웹 문서 작성을 지원하기 위해 HTML에 스타일 시트(Style Sheet)와
   Script 언어(VBScript, JavaScript, JScript), 그리고 DOM(Document Object Model)이
추가된 문서를 의미한다.
   ․ 서버의 도움없이도 클라이언트 자체에서 사용자가 요구한 새로운 페이지를
   즉시 생성하여 보여 줄 수 있다.

2. 스타일 시트(Style Sheet)
․ 문서의 외형인 글자 크기, 글자 모양, 줄 간격, 배경 색상, 테두리 장식 등을
다양하게 효과적으로 지정할 수 있도록 지원하는 개념이다.

3. CSS(Cascading Style Sheet)
․ 속성과 속성값을 이용하여 스타일을 지정한다.

4. JSSS(JavaScript Style Sheet)
․ 자바스크립트를 이용하여 스타일을 지정한다.
․ 넷스케이프에서만 지원한다.

5. 스타일 시트의 구성요소
   ․ 선택자(Selector)
   - HTML 문서에서 스타일을 정의할 대상을 의미한다.
   - 하나 또는 그 이상의 선택자가 지정될 수 있다.
   - 선택자의 나열은 “,”로 한다.
   ․ 선언(Declaration)
   - 선택자에게 지정한 스타일을 의미한다.
   - 속성(Property)과 속성값(Value)으로 구성된다.
   - 속성과 속성값은 “:”으로 구분한다.
   - 선언은 반드시 “;”으로 끝나야 한다.

6. 스타일 시트 선언방법
․ 내부 스타일 시트 : <head>와 </head>사이에 선언하는 방법
․ 외부 스타일 시트 : 외부의 파일로 작성한 후 <LINK> 또는 @import 명령을
이용하여 선언하는 방법

․ 인라인 스타일 시트 : 일반 html 태그에 스타일을 직접 지정하는 방법

7. 내부 스타일 시트 선언 형식
   <style type = "text/css" 또는 “text/JavaScript">

8. 외부 스타일 시트 선언 형식
   ․ 별도의 파일에 스타일을 정의한다. 파일의 혹장자는 “.CSS"이다.
   ․ 외부 파일도 <head>와 </head>사이에 선언해야 한다.
   단, type = "text/css"를 기입하면 무관하다.
   ․ <LINK>를 이용하여 연결
   - 형식 : <LINK rel = "stylesheet" type = "text/css" href = "파일명“>
   ․ @import를 이용하여 연결
   - 형식
<style type = "text/css" or "text/JavaScript">

</style>
   - 다른 선언들과 함께 사용될 수 있지만, 반드시 다른 선언들보다 앞에 존재해야 한다.

9. 인라인 스타일 시트 선언 형식
․ <태그 style = "속성:속성값; 속성:속성값“> 문장 </태그>
․ 단, <head>와 <title>에서는 사용할 수 없다.

10. CLASS 선택자를 이용하는 방법
   ․ 하나의 선택자에 서로 다른 여러개의 스타일을 정의할 때 사용한다.
   ․ 형식 : 선택자.클래스명 {속성:속성값}
사용시 : <선택자 class = "클래스명“>
   .클래스명 {속성:속성값}
사용시 : <태그 class = "클래스명“>

11. ID 속성을 이용하여 스타일을 정의하는 경우
   ․ ID 속성은 한 문서에 선언되는 동일한 태그에 여러번 선언될 수 없다. 즉, 한번만 선언되어야 한다.
   ․ ID 속성은 CLASS속성 보다 우선적으로 적용된다.
   ․ id 이름은 대․소문자를 구분한다.
   ․ 형식 : #id이름 {속성:속성값}
   사용시 : <태그 id = "id이름“>

12. 문맥 선택자를 이용하여 스타일을 정의하는 경우
   ․ 선택자에 포함된 특정 요소에 다른 스타일을 적용시키고자 할 때 사용
   ․ 형식 : 태그 태그들 {속성:속성값}
   사용시 <태그> <태그> 문장 </태그> </태그>

13. 가상 클래스 선택자를 이용하여 스타일을 지정하는 경우
․ 예 : A:link, visited, hover, active {속성:속성값;}

14. 가상 요소를 이용하여 스타일을 지정하는 경우
․ 예 : 선택자.first-letter, 선택자.first-line {속성:속성값}

15. 스타일 시트의 상속성 및 우선순위
   ․ 상속성이란? 지정된 스타일이 특정 요소뿐만 아니라 그 요소의 자식에게도 적용됨을 의미한다.
   ․ 상속된 스타일은 우선 순위가 가장 낮게 변경된다.
   ․ 가장 마지막에 선언된 스타일 시트가 가장 높은 우선 순위를 가지게 된다.

16. 스타일 시트에서 사용하는 단위
․ 절대적 단위 : in, cm, mm, pt, px
․ 상대적 단위 : em(현재크기), ex(em의 1/2크기)

17. Font 관련 스타일
   ․ font "값들만“ : 대표속성
   ․ font-family : 글꼴, 글꼴 이름은 쉼표(,)로 구분, 글꼴 이름이 두 단어 이상이면
   큰 따옴표로 묶는다. 브라우저는 앞에 있는 글꼴부터 보여준다.
   ․ font-style "normal, italic, oblique" : 기울임꼴을 적용
   ․ font-variant "normal, small-caps" : small-caps 크기가 작은 대문자
   ․ font-weight "normal, bold, 100～900" : 글자 굵기
normal=400, bold=700, 숫자는 인식 못하는 경우 있음
   ․ font-size "숫자em(상위 element 크기에 배수), 숫자pt" : 글자 크기 유전되지 않음

18. Text 관련 스타일
   ․ line-height "normal, 숫자, 숫자em, %“ : 줄간격
   ․ text-indent "숫자em, 퍼센트, 숫자“ : 들여쓰기, 음수사용시 내여쓰기
   ․ text-align "left, right, center, justify" : 텍스트나 이미지 수평정렬
   ․ text-decoration “none, underline, overline, line-through" : 줄 긋기
유전되지 않음
   ․ letter-spacing "normal, 숫자em, 숫자“ : 글자 간격
   ․ text-transform "capitalize, uppercase, lowercase, none" : 영문자 변환
첫글자만    대문자    소문자
   ․ vertical-align "baseline, sup, sub, middle, text-top, top, text-bottom, bottom" 텍스트나 이미지 수직정렬

19. 색상과 배경에 관련된 스타일
   ․ color "영문자, RGB“ : 글자 및 밑줄 색
   ․ background-color "영문자, RGB, transparent" : 배경색, 유전되지 않음
   ․ background-image "none, url(파일위치)“ : 배경 그림, 유전되지 않음
   ․ background-repeat "repeat, repeat-x, repeat-y, no-repeat" : 배경
   이미지 반복 여부
   ․ background-attachment "scroll, fixed" : 화면이 스크롤될때 이동여부
   ․ background-position "top, bottom, left, center, right, 가로% 세로%“ :
   이미지 반복 여부 가로p 세로p(음수됨)

20. 상자와 테두리에 관련된 스타일
   ․ margin "위쪽, 오른쪽, 아래쪽, 왼쪽“ : 여백지정, 모든 단위 사용 가능
   ․ margin-top, margin-right, margin-bottom, margin-left : 여백 지정
   ․ border-style "dotted, dashed, groove, ridge, inset, outset" : 테두리 선의
   모양, dotted와 dashed는 익스플로러 5.0에서는 지원되지 않음
   ․ border-width "위쪽, 오른쪽, 아래쪽, 왼쪽“ : 테두리 두께
   ․ border-top-width, border-right-width, border-bottom-width

   border-left-width : 각각 테두리 두께 따로 지정
   ․ border-color "위쪽, 오른쪽, 아래쪽, 왼쪽“ : 테두리선의 색
   ․ border-top-color, border-right-color, border-bottom-color,
   border-left-color : 각각 테두리선의 색 따로 지정
   ․ border-top, border-right, border-bottom, border-left : 테두리 두께및 색
   ․ padding "위쪽, 오른쪽, 아래쪽, 왼쪽“ : 테두리와 테두리 안의 내용 사이의 간격
   ․ padding-top, padding-right, padding-bottom, padding-left : 간격따로지정
   ․ float "left, right, none" : 이미지 및 텍스트와 다른 내용과의 배치
   ․ position "absolute, relative, static" : element가 브라우저에서의 표시위치,유전 안됨
   ․ overflow "scroll, hidden, visible, auto" : 상자안의 내용이 상자를 넘어 갈때의 처리 여부
hidden : 할당된 공간에 들어가는 내용만 보여주고, 나머지는 자른다.
visible : 크기에 관계없이 내용을 모두 보여준다.
auto : 할당된 공간의 크기 이상이 되면 스크롤바를 나타낸다.
   ․ overflow-x, overflow-y : 스크롤 바를 따로 지정
   ․ visibility "inherit, visible, hidden" : element의 화면 표시 여부
․ z-index "auto, 숫자“ : 여러개의 element가 서로 상하로 겹치게 만들 수 있 는속성, 상대․절대일때만 사용, 유전 안됨
auto : 쓴 순서대로 싸인다. z-index가 0인 것과 같다.
숫자 : 숫자가 낮은 element가 밑으로 간다.
   ․ top, left "숫자, %, auto" : 위, 왼쪽위치, 위치가 상대․절대일때만 사용
   유전 안됨
․ width, height "숫자, %, auto" : 내용의 너비와 높이를 지정, 위치가 상대․ 절 대일때만 사용, 유전 않됨,
   block-level가 img에 이용
   ․ clear "none, left, right, both" : 지정한 방향에는 다른 내용이 올 수 없음을 나타낸다.

21. 목록 관련 스타일
   ․ list-style-type "disc, circle, square, decimal, lower-roman, none,
   upper-roman, lower-alpha, upper-alpha"
   ․ list-style-image "url, none" : 리스트의 블릿 기호를 이미지로 지정
   ․ list-style-position "inside, outside" : 리스트의 문장이 출력될 지점

   inside : 새로운 줄로 출력할 때 리스트 모양이 있는 곳부터 출력
   outside : 새로운 줄로 출력할 때 문장의 첫글자가 있는 곳부터 출력
   ․ list-style "list-style-type, position, image" : 3가지 속성을 한꺼번에 지정

22. 커서 모양 지정 스타일
․ cursor "crosshair, help, move, pointer, text, wait" : 커서 모양
e-resize, w-reseze, s-resize, n-resize, ne-resize, nw-resize,
sw-resize, se-resize

23. 글자나 그림에 각종 효과주는 스타일
   ․ filter : "alpha,blur,chroma,dropshadow,shadow,filph,filpv,glow,gray,invert,
   light,xray,wave"
   ․ alpha
   - 그림이나 글자에 투명도를 조정하는 속성
   - 형식 : alpha(opacity="값“, style="값”, finishopacity="값“, startx="값”,
starty="값“, finishx="값”, finishy="값“)
   ․ blur
   - 그림이나 글자에 흐려지는 효과를 지정하는 속성
   - 형식 : blur(add="값“, direction="값”, strength="값“)
   ․ chroma
   - 그림이나 글자의 특정색을 투명하게 처리하는 속성
   - 형식 : chroma(color="색상값“)
   ․ shadow
   - 지정된 색상의 그림자 효과를 지정하는 속성
   - 형식 : shadow(color="색상값“, direction="그림자 방향 도”)
   ․ dropshadow
   - 그림자의 위치를 지정해서 그림자 효과를 지정하는 속성
   - 형식 : dropshadow(color="색상값“, offx="값”, offy="값“,positive="0,1")
   ․ filph
   - 그림이나 글자를 수평 반전시킨다.
   ․ filpv
   - 그림이나 글자를 수직 반전시킨다.
   ․ glow
   - 경계선 바깥쪽을 발광하게하는 효과를 지정하는 속성
   - 형식 : glow(color="색상값“, strength="값”)

   ․ gray()
   - 그림이나 글자를 흑백으로 표시한다.
   ․ invert()
   - 그림이나 글자의 채도 및 색조를 반전시킨다.
   ․ light()
   - 빛이 투과된 효과를 지정
   ․ xray()
   - 경계선만 보여주는 효과
   ․ wave
   - 파도 효과를 지정하는 속성
   - 형식 : wave(add="값“, freq="값”, lightstrength="값“, phase="값”,
strength="값“)
   ․ mask
   - 투명한 채색 효과를 지정
   - mask(color="색상값“)

24. 페이지를 나누는 스타일
․ page-break-after : 지정후 페이지를 나눈다.
․ page-break-before : 지정전 페이지를 나눈다.

섭군 - by seob

2009년 9월 4일 금요일

CSS 스타일시트 정리

댓글 없음:

댓글 쓰기