css 들어가는 태그들 > html

[font-style]
1. 'font-style: normal;' 태그안의 글자를 일반 모양으로
2. 'font-style: italic;' 태그안의 글자를 이탤릭체로
3. 'font-style: oblique;' 태그안의 글자를 기울여서

[font-weight] 폰트의 글자 두께
font-weight 속성을 사용하면 글자의 두께를 다양하게 설정할수 있습니다.
1. "font-weight: normal;" 태그안의 글자를 보통 두께로
2. "font-weight: bold;"   태그안의 글자를 두껍게
3. "font-weight: bolder;" 태그안의 글자를 상위 요소에 비례해서 글자 두께를 두껍게 표현
4. "font-weight: lighter;" 태그안의 글자를 상위 요소에 비례해서 글자의 두께를 얇게
6. "font-weight: 200" 태그안의 글자를 두껍게 100~900까지 백단위로 커질수록 두껍게

[font-size]
1. "font-size: 12pt;"
2 "font-size: 16px;"
3 "font-size: 0.86cm;"
4 "font-size: 8.6mm;"
5 "font-size: 0.34in;"
6 "font-size: 200%;"

 xx-large
태그 { font-size:xx-large;}
태그안의 글자크기를 medium보다 4.5배 확대
x-large
태그 { font-size:x-large;}
태그안의 글자크기를 medium보다 3배 확대
large
태그 { font-size:large;}
태그안의 글자크기를 medium보다 1.5배 확대
medium
태그 { font-size:medium;}
태그안의 글자크기를 12pt정도의 크기
small
태그 { font-size:small;}
태그안의 글자크기를 medium보다 1.5배 축소
x-small
태그 { font-size:x-small;}
태그안의 글자크기를 medium보다 3배 축소
사용자
정의값
태그 { font-size:10pt;}
태그안의 글자크기를 10포인트로
larger
태그 { font-size:larger;}
태그안의 글자크기를 앞에 입력한 글자보다 크기를 크게
smaller
태그 { font-size:smaller;}
태그안의 글자크기를 앞에 입력한 글자보다 크기를 작게

[font-variant] 영문에서 소문자를 좀 작은 대문자로…
1. "font-variant: normal;" : Cascading Style Sheets 기본
2. "font-variant: small-caps;" : Cascading Style Sheets 영문에서 소문자를 좀 작은 대문자로

[text-align]
1. "text-align: left;"
2. "text-align: justify;" 텍스트를 약쪽정렬함

[text-indent] 첫행을 들여쓰기
1. "text-indent: 5px;"
2. "text-indent: 3em;"
3 "text-indent: 5cm;"

[text-decoration] 텍스트 장식
1. "text-decoration: none;"
2. "text-decoration: underline;"
3. "text-decoration: overline;"
4. "text-decoration: line-through;"
5. "text-decoration: line-through overline underline;"
6. "text-decoration: blink;"

[text-transform]
1. "text-transform: none;" 속성을 부여하지 않습니다.
2. "text-transform: uppercase;" 캐그안의 글자를 모두 대문자로
3. "text-transform: lowercase;"태그안의 글자를 모두 소문자로
4. "text-transform: capitalize;" 태그안의 영문단어의 첫글자를 대문자로

[letter-spacing]  자간 조절할 때 사용
1 "letter-spacing: 1em;"
 1em(기본글꼴 하나만큼의 간격)
“letter-spacing:1px”

[word-spacing]
1 "word-spacing: 1em;"

[color]
1. "color: navy;"
2. "color: #369369;"
3. "color: rgb(80%,80%,80%);"
4. "color: rgb(111,111,999);"

[background-color]
1. "background-color: gray;"
2. "background-color: #EEEEEE;"
3. "background-color: rgb(80%,80%,80%);"

[background-image]
1. "background-image: url(list1.gif)"

[background-repeat]  가로
1 "background-repeat: repeat;" 세로 모두 배경이 반복된다.
2. "background-repeat: repeat-x;" 가로 방향으로만 배경이 반복된다.
3. "background-repeat: repeat-y;" 세로 방향으로만 배경이 반복된다.
4. "background-repeat: no-repeat;" 배경이 한번만 나온다.

[background-position]
1. "background-position: 10% 10%;"
값의 짝 '0% 0%'는 이미지의 맨위 왼쪽 모서리가 박스의 패딩 엣지의 맨위 왼쪽 모서리에 정렬된다.
값의 짝 '100% 100%'는 이미지의 맨아래 오른쪽 모서리가 패딩 지역의 맨아래 오른쪽 모서리에 위치한다.
값의 짝 '14% 84%'는 이미지의 가로 오른쪽으로 14%와 수직적 아래로 84% 의 점이 패딩 지역의 가로 오른쪽으로 14%와 수직적 아래로 84% 의 점에 위치한다.
2. "background-position: 2cm 2cm;"
값의 짝 '2cm 2cm'는 이미지의 맨위 왼쪽 모서리가 패딩(padding) 지역의 맨위 왼쪽 모서리에서 오른쪽 2cm 아래쪽으로 2cm 점에 위치한다
3. "background-position: top;"
4. "background-position: center;"
5. "background-position: right bottom;"

[background-attachment]
배경 이미지가 지정되면, 이 특성은 뷰포인트(viewport)에 대하여 고정 될('fixed') 것인가 또는 그 문서에 따라 화면 굴림('scroll')을 할 것인가를 지정한다.

이미지가 고정되었다 하더라도, 여전히 엘레멘트의 배경 또는 패딩(padding) 지역에 있을 때 만 보이게 된다. 그래서, 이미지가 반복('background-repeat: repeat')되지 않는 한 보이지 않을 수가 있다.

1. "background-attachment: scroll;"
2. "background-attachment: fixed;"

[background]
1. "background: yellow url(list1.gif) no-repeat left top "

[padding]
1. "padding: 0 0 0 0; background-color: #EEEEEE;"
2. "padding: 50px; background-color: rgb(80%,80%,80%);"

[margin]
1. "margin: 0; background-color: #EEEEEE;"
2. "margin: 50px 50px 50px 50px; background-color: rgb(80%,80%,80%);"
3. "margin: 0 0 0 -30px; background-color: rgb(80%,80%,80%);"

[border-style]
1. border-style: none;"
2. "border-style: solid;"
3. "border-style: dotted;"
4. "border-style: dashed;"
5. "border-style: double;"
6. I"border-style: groove;"
7. "border-style: ridge;"
8. "border-style: inset;"
9. "border-style: outset;"
10. "border-style: solid dashed dotted outset;"

[border-width]
1. "border-width: 1px 1px 1px 1px;"
2. "border-width: 0 0 0 0; border-style: solid;"
3. "border-width: 1px 1px 1px 1px; border-style: solid;"
4. "border-width: 3px; border-style: solid;"
5. "border-width: 3mm; border-style: solid;"
6. "border-width: 1px 1cm 1mm 1in; border-style: solid;"
7. "border-width: thin; border-style: solid;"
8. "border-width: medium; border-style: solid;"
9. "border-width: thick; border-style: solid;"

[border]
1. "border: 1px;"
2. "border: #999999;"
3. "border: solid;"
4. "border: solid #999999;"
5. "border: 1px solid #999999"

[float]
1. "float: left;"

[visibility]
1. "visibility: visible;"
2. "visibility: hidden;"
3. "visibility: collapse;"

[list-style-type]
1. "list-style-type: default;"
2. "list-style-type: disc;"
3. "list-style-type: circle;"
4. "list-style-type: square;"
5. "list-style-type: decimal;"
6. "list-style-type: decimal-leading-zero;"
7. "list-style-type: lower-roman;"
8. "list-style-type: upper-roman;"
9. "list-style-type: lower-greek;"
10."list-style-type: lower-alpha;"
11."list-style-type: upper-latin;"
12."list-style-type: none;"

[list-style-image]
1. "list-style-image: url(list1.gif)"
2. "list-style-image: url(list2.gif)"

[list-style-position]
1. "list-style-position: inside"
2. "list-style-position: outside"

[list-style]
1. "list-style: url(list1.gif) inside;"
2. "list-style: square outside;"
3. "list-style: url(list1.gif);"
4. "list-style: square;"
5. "list-style: inside;"

[cursor]
1. cursor: auto;
2. cursor: crosshair;
3. cursor: default;
4. cursor: pointer;
5. cursor: move;
6. cursor: e-resize;
7. cursor: ne-resize;
8. cursor: nw-resize;
9. cursor: n-resize;
10. cursor: se-resize;
11. cursor: sw-resize;
12. cursor: s-resize;
13. cursor: w-resize;
14. cursor: text;
15. cursor: wait;
16. cursor: help;
17. cursor: url(list1.gif);

 

☞스타일의 사용

<style class="text/css">...</style>
<style type="text/css">...</style>
<style>...</style>
<태그 style="..."></태그>
<style rel="stylesheet" type="text/css" href="외부스타일문서">

 

☞스타일의 지정

1. 태그로 지정 : td{...}
2. 클래스로 지정 : .text{...} -> <태그 class="text">
3. 아이디로 지정 : #text{...} -> <태그 id="text">

 

 

☞ 폰트 속성

※ 윈도우기본폰트 : 굴림, 굴림체, 궁서, 궁서체, 돋움, 돋움체, 바탕, 바탕체, Arial, Arial Black, Arial Narrow, Bookman Old Style, Comic Sans MS, Courier New, Garamon, Geogia, Impact, MingLiU, MS Hei,Minon Web, Morden, Monotype.com, MS Gothic, MS Song, Time New Roman, Trebuchet MS, Verdana

 

1. font-family
2. font-style : normal, italic, italic small-caps, oblique, oblique small-caps, small-caps
3. font-variant : normal
4. font-size : %, pt, xx-small, x-small, small, medium, large, x-large, xx-large, expression(document.body.clientWidth/13)<--브라우저 크기에 따라 변형
5. font-weight : 100~900, normal, bold, bolder, lighter

 

※ 일괄지정 : font : 스타일 대소문자 굵기 크기/줄간격 폰트

 

 

☞ 텍스트 속성

1. text-align : left, center, right, justify
2. vertical-align : top, middle, bottom, baseline(문자기본선), text-top(문자윗선), text-bottom(문자아래선), super, sub, %
3. text-transform : none, uppercase, lowercase, capitalize(첫번째 대문자)
4. text-decoration : none, blink(넷스케이프), underline, overline, line-through
5. letter-spacing : normal, %, 값(pt, px 등)
6. word-spacing(넷스케이프) : normal, %, 값(pt, px 등)
7. text-indent : pt, px, % 등

 

 

☞ 테두리 속성

1. border-color
2. border-style : none, dotted, dashed, solid, double, groove, ridge, inset, outset
3. border-width
4. border-top, border-bottom, border-let, border-right, border-top-속성

 

※ 일괄지정 : border : 스타일 두께 색상

 

 

☞ 여백 속성

1. margin-width
2. margin-height
3. margin-top,bottom,left,right
4. padding-top,bottom,left,right

 

※ 일괄지정 : margin: 상 우 하 좌 / padding:상 우 하 좌

 

 

☞ Float/Clear 속성

1. float : left, right, none
2. clear : left, right, none, both

 

 

☞ 색상과 배경 속성

1. color
2. background-color
3. background-image : url(URL)
4. background-repeat : no-repeat, repeat, repeat-x, repeat-y
5. background-attachment : scroll, fix
6. background-position : %, top center bottom, left center right

 

※ 일괄지정 : background-image: url(URL) 반복

 

 

☞ 위치결정과 겹치기 속성

1. position : absolute(브라우저 화면 기준, top/left/bottom/right %,값,Auto 지정), relative(겹치기 가능, top/left/bottom/right %,값,Auto 지정), static(기본값), fixed(브라우저 화면 기준,위치 고정)
2. drection : ltr(왼쪽배열), rtr(오른쪽배열)
3. z-index : 숫자(높을수록 위로), auto(0)

 

 

☞ 목록특성

1. list-style-type : disc, circle, square, demical, lower-roman, upper-roman, lower-alpha, upper-alpha, none
2. list-style-image : url(URL)
3. list-style-position : inside(들여쓰기), outside(내어쓰기), none

 

 

☞ 하이퍼링크의 지정

a:link{...}
a:visited{...}
a:active{...}
a:hover{...}

 

 

☞ 스크롤박스 만들기

overflow : visible(내용이 박스보다 커도 보여줌), hidden(내용이 크면 잘라서 보여줌), auto(내용이 크면 오른쪽스크롤바를 생성), scroll(항상 스크롤바생성)
<div style="width:500; height:60; background-color:#FFF799; border:solid 1 #827B00; overflow:auto;">

 

 

☞ 스타일과 자바스크립트

1. 객체.style.backgroundColor
2. 객체.style.fontWeight
3. 객체.style.fontStyle
4. 객체.style.fontFamily
5. 객체.style.color
6. 객체.style.filter

 

 

☞ 필터의 활용

1. filter : alpha(opacity=0~100, finishopacity=0~100, style=0(단일) 1(선형) 2(구형) 3(사각형), startx=시작값, starty=시작값, finishx=끝값, finishy=끝값)
2. filter : blur(add=0 또는 1 원본이미지와 합치기, strength=픽셀수, direction=0 45 90 135 180 225 270 315)
3. filter : chroma(color=투명처리할 색)
4. filter : dropshadow(color=그림자색, offx=거리, offy=거리, positive=1(불투명픽셀 대상) 또는 0(투명픽셀 대상))
5. filter : flipH 수평뒤집기
6. fliter : flipV 수직뒤집기
7. filter : glow(color=번질색, strength=1~255)
8. filter : gray
9. filter : invert
10. filter : lighta 빛이 투사
11. filter : mask(color=투명 영역에 칠할 색)
12. filter : shadow(color=그림자색, direction=0 45 90 135 180 225 270 315)
13. filter : wave(strength=0~100, freq=웨이브수, lightstrength=0~100 빛의강도, add=0 또는 1 원본이미지와 합치기, phase=0~100 웨이브각도)
14. filter : xray 경계
15. filter : blendTrans(duration=값)
16. filter : revealTrans(duration=값, transition=23가지의 효과)

 

 

☞ 마우스 포인터의 속성

 

cursor : auto, default(화살표), help(물음표), wait(모래시계), hand(손), crosshair(십자), text(텍스트), e-resize(가로화살표), ne-resize(/화살표), n-resize(상하화살표), nw-resize(＼화살표), w-resize(가로화살표), sw-resize(/화살표), s-resize(세로화살표), se-resize(＼화살표)

 

 

☞ 스크롤바 속성

1. scrollbar-face-color
2. scrollbar-highlight-color
3. scrollbar-3dlight-color
4. scrollbar-shadow-color
5. scrollbar-darkshadow-color
6. scrollbar-track-color
7. scrollbar-arrow-color