정의 및 사용방법 | |
CSS - Cascading Style Sheet 라고 한다. 문법 - <head> 사이에 위치 한다. </head> 선택자(= html 태그){ 프로퍼티1(= CSS 명령어): 값; 프로퍼티2(= CSS 명령어): 값} ex) <style type="text/css"> - CSS 사용 정의 body{background-color:#ffff00} - body 의 배경색 지정 </style> - CSS 정의 끝 </head> or 인라인 CSS 문법 <html태그 style="프로퍼티:값"> |
BODY | |
body{background-color:16진수색; - body 의 배경색 지정 background-image:url(http:///파일명)undefined; - 백그라운드 이미지 삽입 background-position:AA; - 백그라운드 이미지 위치 background-repeat:BB; - 백그라운드 이미지 위치(X,Y 좌표 사용) background-attachment:CC; - 백그라운드 고정시킴(스크롤바를 움직일때)
} AA : left, right, center,top, bottom BB : no-repeat, repeat-x (가로축 이동), repeat-y (세로축 이동), repeat CC : fixed, scroll |
LINK | |
A:link{color:16진수색} - 링크에 걸린 글자색 A:visited{color:16진수색} - 방문했던 곳의 글자색 A:active{color:16진수색} - 클릭했을때의 글자색 A:hover{color:16진수색} - 마우스가 위로 올라갔을때의 글자색 text-decoration:AA - 글자의 변화 text-transform:uppercase - 글자가 대문자로 변환
* AA : none(밑줄 없어짐), underline, overline, line-through(줄이 가운데위치) blink(깜박임;넷스케이프에서만 적용) ex) A:link, A:visited, A:active, A:hover{color:16진수색; text-decoration:none} |
TEXT | |
font-size:AA,BB - 글자의 크기를 조절합니다. text-align:CC - 글자의 정렬을 정합니다. text-indent:length,% - 문장의 들여쓰기를 지정합니다. text-transform:DD - 글자를 변환합니다. line-height:BB - 줄간격을 정합니다. letter-spacing:EE - 글자 사이의 간격을 조절합니다.
* AA : xx-small, x-small, small(default), medium, large, x-large, xx-large BB : pt, in, cm, px, %(default 기준-font size: 3) CC : left, right, center DD : capitalize(단어의 첫글자만 대문자), uppercase(소문자를 대문자로) lowercase(대문자를 소문자로), none EE : em(1 em은 글자 하나의 공간) text-indent의 %값은 상위요소의 문장길이에 비례합니다. |
TEXT 형태 | |
font-style:AA - 글자의 형태 지정 font-weight:BB - 글자의 굵기 지정 font-family:글꼴1, 글꼴2, 글꼴3 - 서체지정
* AA : italic (좁게 기울임), oblique (표준기울임) BB : normal, bold (lighter, border)글자를 기준으로 숫자로 굵기를 나타낼때 100, 200, 300, 400 (표준), 500, 600, 700 (굵음), 800, 900 |
LAYER | |
<div id="이름" style="position:absolute; left:50px; top:100px; width:150px; height:120px; z-index:1; background-image:url(http:///파일명)undefined;"> * position:absolute ------ 레이어의 위치를 절대좌표로 정함 relative ------ 바로 앞태그를 기준좌표로 정함 left:50px ------------- 레이어의 좌측 좌표를 정함 top:100px -------------- 레이어의 크기를 정함 z-index:숫자 ----------- 숫자값이 클수록 위에 위치함 |
LIST | |
list-style-type:AA - 리스트 목록의 모양 지정 list-style-image:url(http:///파일명) - 리스트 목록 에 이미지 지정 list-style-position:BB - 리스트 목록 텍스트의 출력범위 지정(범위 초과시) * AA : disc (●), circle (○), square (■), decimal (숫자), lower-roman (로마 소문자 i, ii, iii), upper-roman (로마 대문자 I, II, III), lower-alfha, upper-alpha, none BB : inside (목록 모양이 있는 곳부터 문장을 출력) outside (리스트 문장의 첫 글자가 있는 곳부터 출력-default) ex) ul{list-style:square url(http:///이미지 파일)undefinedoutside} 이렇게 type과 image를 동시에 지정하면 해당이미지가 없을 때에는 square를 출력한다. |
공간 및 테두리 | |
vertical-align:AA - 상하 공간에서의 정렬을 정합니다. float:BB - 대상의 좌우 정렬을 정합니다. border-style:CC - 테두리 모양을 정합니다 border-XX-width:px - 테두리 두께를 설정합니다. border-XX-color:16진수색 - 테두리 색을 정합니다. margin-XX-00px - 대상의 여백을 설정합니다. clear:DD - object정렬의 설정을 해제합니다, padding-EE:00pt - 안쪽 여백을 설정합니다. * AA : top, middle, bottom BB : left, right, none CC : none, dotted (한줄), dashed(한줄), double (두줄), groove (음양효과) solid, ridge (음양효과), inset (테우리 in), outset (테두리 out) DD : none, left, right, both (= all) EE : top, bottom, right, left XX : top, bottom, left, right |
FILTER | |
1. <img src="./이미지 경로" style="filter:alpha(opacity=x, style=y, finishopacity=z)"> - opacity : 불투명도(0~100, 숫자가 낮을수록 투명해짐) - style : 필터 종류(1~3) - finishopacity : 적용범위(1~100) 2. style="filter:blur(add=x,direction=y,strength=z)" - add : 원본 이미지를 비치게 할 것인지 결정(1이면 Yes, 0이면 No) - direction : 각도(시계방향으로 계산) - strength : 강도(1~100) 3. style="filter:chroma(color=#000000)" - color : 투명하게 만들 색 4. style="filter:wave(strength=x,freq=y,lightstrength=z,phase=0,add=0)" - strength : 웨이브의 강도(1~100) - freq : 웨이비의 수 - lightstrength : 빛의 강도(0~100) - phase : 웨이브 효과의 시작 위치로 0(0도)~100(360도)사이의 값을 가집니다. 만약 25이면 90도가 시작 위치가 됩니다. - add : 흐리게 만든 후 원본 이미지를 비치게 할 것인지 결정(1이면 Yes, 0이면 No) 5. style="filter:AA" AA : fliph():수평 회전, flipv():수직 회전, gray():그레이 톤, invert():색조/채도/밝기 반전 xray():엑스레이 효과, wave():물결, blur():흐리게 6. style="filter:shadow(color=#ff0000)" - 그림자 생김 style="filter:glow(color=#ff0000,strength=5)" - 글자에 퍼진 그림자 - strength의 수치를 크게주면 그림자처럼 효과를 낼 수 있음. - 그림자의 방향은 문자의 정렬방향에 따라 달라진다 7. style="filter:Alpha(Opacity=50)" - width : 테이블 너비 - height : 테이블 높이 - background-color : 테이블 배경 색 - Opacity : 불투명도 |
기타 | |
지금페이지에서 다른 파일에 들어있는 CSS등을 불러올때 쓰이는 명령 <link rel="stylesheet" type="text/css" href="./000.css"> 기본 링크 주소를 설정해 놓는 명령어 <base href="http://nux.wo.to"> overflow:AA ------------ 내용이 지정된 범위보다 클때의 효과지정 * AA : scroll (가로,세로 스크롤바 생성), hidden (벗어난 범위는 출력하지 않는다) visible (벗어난 범위를 자동으로 늘려준다), auto (벗어난 부분에 스클롤 자동 생성) 커서의 모양 지정 cursor:BB * BB : auto, crosshair (십자가), default (기본화살), hand (손모양), move (방향툴 모양) e-resize (동쪽 화살표), ne-resize (북동쪽 화살표) ..., text, wait( 모래시계), help
|