| 정의 및 사용방법 | |
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
|
아이콘이 붙게됩니다.
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
닫기