태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


 Font 속성

속성
의미
font-size
<절대크기> | <상대크기> | <길이> | <퍼센트>
글씨의 크기
font-family
<글꼴이름> | <기본글꼴이름>,<글꼴이름> | <기본글꼴이름>
글꼴의 이름
font-weight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
글씨의 굵기
font-style
normal | italic | oblique
글씨의 모양
font-variant
normal | small-caps
"small-caps"는 글씨가 작은 대문자로 나옵니다.


 Text 속성
속성
의미
word-spacing
normal |
단어와 단어 사이의 간격
letter-spacing
normal |
글자 간격
text-decoration
none | [ underline || overline || line-through || blink ]
글씨를 꾸며주는 방법
vertical-align
baseline | sub | super | top | text-top | middle | bottom | text-bottom |
블록의 수직 정렬 방식
text-align
left | right | center | justify
블록의 수평 정렬 방식
text-indent
길이 | 퍼센트
블록의 첫 줄을 오른쪽으로 들여쓰기 합니다.
line-height
normal | 숫자 | 길이 | 퍼센트
문자열의 아래선부터 다음 줄의 문자열의 아래선까지의 거리로 블록의 줄 간격을 조절


 Color, Background 속성

속성
의미
color
색이름 | 16진수값
글씨의 색상
background-color
색이름 | 16진수값 | transparent
배경 색상
background-image
url | none
배경무늬로 사용할 이미지의 url
background-repeat
repeat | repeat-x | repeat-y | no-repeat
배경 무늬의 타일링 방식
background-attachment
scroll | fixed
브라우저의 스크롤바를 움직일 때, 배경무늬가 함께 스크롤 될 것인지, 고정할 것인지의 여부
background-position
[퍼센트 | 길이 ]{1,2} | [top | center | bottom] || [left | center | right]
배경무늬의 시작 위치


 Position 속성

속성
의미
clip
| auto
Box의 특정한 영역만을 보여줍니다.
width, height
길이 |퍼센트| auto
Box 영역의 가로 길이, 세로 높이
left, top
길이 | 퍼센트 | auto
Box 영역의 좌표
overflow
visible | hidden | scroll | auto
Box영역의 크기보다 내용이 클 때, 이를 화면에 보일 것인지의 여부
position
absolute | relative | static
블록이 화면에 배치되는 위치. 값이 "absolute"면 브라우저 화면, 또는 부모 요소를 기준으로 배치되고, 값이 "relative"면 상대적 배열이 적용됩니다.
visibility
inherit | visible | hidden
요소를 화면에 보일 것인지, 감출 것인지의 여부
z-index
auto | 숫자
블록이 상하로 쌓이는 순서로 숫자가 낮을수록 아래에 쌓입니다.



font : font에 관한 모든 속성들을 결정한다.
font-family : font family 이름 리스트 또는 generic 폰트. (cursive, fantasy 등)
font-style : Normal, italic, oblique 등
font-size : 절대크기(small, medium, large등)와 상대크기(larger, smaller등), 수(pt), 퍼센트(%)등을 사용.
font-weight : Normal, bold, lighter 또는 9개의 수(100, 200, 300, ... , 900)중 하나를 사용.


color : 요소의 텍스트 색 또는 전경색을 결정한다. (#FFFFFF 또는 black)
background : 배경에 관한 모든 속성들을 결정한다.
background-color : 요소의 배경색을 결정한다.
background-image : 배경 이미지를 결정한다. (URL)
background-repeat : 이미지를 페이지의 수평과 수직으로 반복할 내용을 결정 (repeat-x:수평반복, repeat-y:수직반복, repeat:양쪽반복)
background-attachment : 페이지의 나머지 부분을 기준으로 요소의 행동을 결정한다. (scroll : 나머지 내용을 스크롤할 때 함께 스크롤한다. fixed : 스크롤하지 않는다.)
background-position : 요소의 배경 이미지를 지정한 뒤 이것을 사용해서 그 요소내 이미지의 시작 위치를 지정할 수 있다. top, center, bottom등을 조합하여 사용 가능하다.


word-spacing : 단어 사이의 거리를 늘리거나 줄인다.
letter-spacing : 문자간의 거리를 늘리거나 줄인다.
text-decoration : 요소 텍스트에 장식을 추가한다. (underline, overline, line-through, blink등 여러 개 동시 사용가능.)
text-transform : 텍스트를 변형시킨다. (capitalize:첫문자만 대문자로, uppercase, lowercase)
text-indent : 텍스트 라인의 들여 쓰기를 한다. (%, 길이)
text-align : 요소 내 텍스트를 정돈한다.(left, right, center, justify)
vertical-align : 요소의 수직 배치를 결정한다. (baseline, wub, super, top, text-top, middle,
bottom, text-bottom, 요소 높이의 퍼센트를 사용할 수 있다.)
line-height : 텍스트 라인의 baseline간 거리를 결정한다. (수, %)


margin : 박스내 지정된 공간을 확보.
margin-top : 박스의 위에서부터의 공간을 확보. (수, %)
margin-right : 박스의 오른쪽부터의 공간을 확보. (수, %)
margin-left : 박스의 왼쪽부터의 공간을 확보. (수, %)
margin-bottom : 박스의 밑에서부터의 공간을 확보. (수, %)
padding : margin의 속성과 동일하다.
border : 박스의 모든 부분을 정의한다.
border-width : 박스의 경계의 두께를 결정한다.
border-top-width : 박스의 경계의 위 부분의 두께를 결정한다.
border-right-width : 박스의 경계의 오른쪽의 두께를 결정한다.
border-bottom-width : 박스의 경계의 밑 부분의 두께를 결정한다.
border-left-width : 박스의 경계의 왼쪽의 두께를 결정한다.
border-color : 박스의 경계의 색을 결정한다. (색이름 또는 코드)
border-style : 박스의 경계의 모양을 결정한다. (dotted, dashed, solid, double, groove, ridge, inset, outset, none)
border-left : 왼쪽 부분의 폭, 색, 스타일의 내용을 결정할 수 있다.
border-top : 위 부분의 폭, 색, 스타일의 내용을 결정할 수 있다.
border-right : 오른쪽 부분의 폭, 색, 스타일의 내용을 결정할 수 있다.
border-bottom : 아랫부분의 폭, 색, 스타일의 내용을 결정할 수 있다.
width : 박스의 내부 폭을 결정한다. (수, %)
height : 박스의 내부 높이를 결정한다. (수, %)


 http://www.w3.org/tr/css21




clear : 텍스트나 이미지같은 요소가 왼쪽이나 오른쪽으로 배치할수 없게 합니다.

none : 디볼트 값이며, 양쪽 옆에 다른 요소들이 있어도 됩니다.
left : 왼쪽에는 다른 요소가 오지 못합니다.
right : 오른쪽에는 다른 요소가 오지 못합니다.
not on both : 양쪽 옆에 다른 요소들이 있으면 안됩니다.

'웹표준 > CSS' 카테고리의 다른 글

border-style  (0) 2007.09.20
text-overflow  (0) 2007.09.19
cursor 정리  (2) 2007.09.19
Display type 설정  (0) 2007.09.19
주요 스타일시트 속성  (0) 2007.09.19
리스트와 불릿 이미지 - ul, li  (0) 2007.09.18
Posted by 고시랑