| 좌우배치
|
제목
|
속성
|
값
|
그림 등
좌우배치 |
float
|
left(그림을
왼쪽에 배치)
right(그림을 오른쪽에 배치)
none(좌우배치와 삽입이 실행되지 않는다) |
| 배치 해제 |
clear
|
left(왼쪽 요소에
대한 삽입 해제)
right(오른쪽 요소에 대한 삽입 해제)
both(양쪽 요소에 대한 삽입 해제)
none(삽입을 해제하지 않음) |
Display
|
제목
|
속성
|
값
|
|
출력형태
|
display |
block(줄 바꿈이
일어남)
Inline(줄 바꿈이 일어나지 않음)
none(보이지 않음) |
커서모양 변경
|
제목
|
속성
|
값
|
|
커서모양
|
cursor |
auto(자동)
crosshair(십자형)
default(표준-화살표)
pointer(링크위에 있을 때 모양)
move(이동 가능을 나타내는 모양)
text(텍스트 선택용 모양)
wait(처리중임을 나타내는 모양)
help(도움말을 나타내는 모양)
n-resize(크기 재설정 가능 : 위 방향)
s-resize(크기 재설정 가능 : 아래 방향)
w-resize(크기 재설정 가능 : 왼쪽 방향)
e-resize(크기 재설정 가능 : 오른쪽 방향)
ne-resize(크기 재설정 가능 : 오른쪽위 방향)
nw-resize(크기 재설정 가능 : 왼쪽 위 방향)
se_resize(크기 재설정 가능 : 오른쪽아래 방향)
sw_resize(크기 재설정 가능 : 왼쪽 아래 방향) |
문단의 위치와 폭,높이 지정하기
|
제목
|
속성
|
값
|
|
위치지정속성
|
position |
static(자유로운
문단 배치에 사용할 수 없다 이동성이 없기 때문에 top,left속성을 적용할 수 없다)
relative(현재 컨텐츠가 있는 곳을 기준으로 상대적 위치를 지정하여 문단을 시작)
absolute(절대적 위치를 지정하여 top,left속성은 브라우저의 왼쪽 상단 모서리를 0,0으로 기준 삼는다) |
|
문단의 위치와
폭,높이 지정
|
top,left/bottom,right
width,height |
값
문단의 위치 지정
top : 위에서 떨어진 길이
left : 좌측에서 떨어진 길이
bottom : 아래에서 떨어진 길이
right : 오른쪽서 떨어진 길이
☞top,left와 bottom,right로 사용
폭과 높이
width : 폭
height : 높이 |
|
예) .p1 {position:absolute;top:150px;left:200px;width:500px;height:300px} |
|
겹친 순서지정
|
z-index |
수치(값이 클수록
위쪽에 위치) |
|
visible 여부
|
visibility |
visible(보임)
hidden(보이지 않음) |
|
범위 벗어나는
글씨처리
|
overflow |
scroll(내용의
크기에 관계없이 항상 스크롤바가 나타난다)
visible(범위를 벗어나는 내용을 보여준다)
auto(자동조정)
hidden(범위를 벗어나는 내용을 감춘다) |
|
절라서 출력
|
clip |
top(위에서 거리)
right(왼쪽에서 거리)
bottom(위쪽에서 거리)
left(왼쪽에서 거리) |
여백결정 스타일시트
|
제목
|
속성
|
값
|
|
바깥여백지정
|
margin-방향
margin
☞방향
top,right,
bottom,left |
값
1개 지정 : 상하좌우 값
2개 지정 : 상하,좌우 값
3개 지정 : 상, 좌우, 하 값
4개 지정 : 상,우,하,좌 값 |
|
안쪽여백지정
|
padding-방향
padding |
값
1개 지정 : 상하좌우 값
2개 지정 : 상하,좌우 값
3개 지정 : 상, 좌우, 하 값
4개 지정 : 상,우,하,좌 값 |
테두리를 꾸미는 스타일시트
|
제목
|
속성
|
값
|
| 테두리의 형태 |
border-방향-style
border-style
☞방향
top,right,
bottom,left
|
none(테두리를 지정하지 않는다)
dotted(테두리가 점으로 나타난다)
dashed(테두리가 점선으로 나타난다)
solid(테두리가 한줄의 선으로 나타난다)
double(테두리가 두 줄의 선으로 나타난다)
groove(테두리가 입체감있게 나타난다)
ridge(테두리가 볼록하게 나타난다)
inset(테두리 전체가 들어가 보이는 형태로 나타난다)
outset(테두리 전체가 튀어나와 보이는 형태로 나타난다)
|
| 테두리색상 |
border-방향-color
border-color |
색상
1개 지정 : 상하좌우 같은 색
2개 지정 : 상하,좌우 지정
3개 지정 : 상,좌우,하 지정
4개 지정 : 상,우,하,좌 지정 |
| 테두리 두깨 |
border-방향-width
border-width |
값
1개 지정 : 상하좌우 값
2개 지정 : 상하,좌우 값
3개 지정 : 상,좌우,하 값
4개 지정 : 상,우,하,좌 값 |
| 단축속성 |
border
border-방향 |
border-width
border-style border-color |
목록속성 설정
|
제목
|
속성
|
값
|
|
목록기호나
번호형식
|
list-style-type |
none(지정하지않음)
disc(검은원형)
circle(원형)
square(사각형)
upper-alpha(대문자 알파벳)
lower-alpha(소문자 알파벳)
decimal(1부터 시작하는 10진수)
upper-roman(대문자 로마자)
lower-roman(소문자 로마자) |
|
|
|
그림으로 목록기호
|
list-style-image |
url(이미지파일) |
|
목록의 들여쓰기
|
list-style-position |
inside(들여쓰기)
outside(내어쓰기) |
배경색상 배경그림
|
제목
|
속성
|
값
|
|
배경색상
|
background-color |
색 |
|
배경이미지
|
background-image |
이미지파일 |
|
배경그림
반복여부
|
background-repeat |
repeat(배경그림이
가로세로 반복)
no-repeat(배경그림이 반복되지 않고 한번만 나타난다)
repeat-x(배경그림이 가로 방향으로만 반복)
repeat-y(배경그림이 세로 방향으로만 반복) |
|
배경그림
위치
|
background-position |
가로위치 세로위치
가로방향 : left,center,right,%
세로방향 : top,center,bottom,% |
예)body {background-image:no-repeat;background-position:70% 30%}
body {background-image:no-repeat;background-position:right center} |
|
배경그림
스크롤
|
background-attachment |
scroll(문서의
내용이 스크롤 되면 배경그림도 같이 스크롤된다)
fixed(문서의 내용이 스크롤 되더라도 배경그림은 스크롤되지 않는다) |
글자제어
|
제목
|
속성
|
값
|
설명
|
|
글꼴지정
|
font-family
|
글꼴 |
글꼴을 지정할 때
여러 개의 글꼴지정(사용자의 컴퓨터에 해당 글꼴이 없을 수 있기 때문에) |
|
글자형태지정
|
font-style
|
normal(정상글씨)
italic(이태릭)
oblique(기울임) |
글자형태 |
|
글자굵기지정
|
font-weight
|
normal(400)
bold(700)
100-900 |
글자굵기 지정
숫자가 클수록 두껍다 |
|
글자크기지정
|
font-size
|
크기 |
글자크기 |
|
글자색
|
color
|
색 |
글자색지정 |
문장과 문단을 제어
|
제목
|
속성
|
값
|
설명
|
|
자간
|
letter-spacing |
간격 |
문자와 문자사이의
간격을 지정 |
|
단어간격
|
word-spacing |
간격 |
단어와 단어사이의
간격지정 |
|
줄간격
|
line-height |
간격 |
줄사이의 간격지정 |
|
공백과 줄바꿈
|
white-space |
normal(여러개의 공백이 하나의 공백)
nowrap(
이 없으면 줄을 바꾸지 않는다 |
|
좌우정렬
|
text-align |
left,center,right,justify(좌우정렬) |
|
세로방향정렬
|
vertical-align |
top(위에 정렬)
middle(가운데정렬)
bottom(아래에 정렬)
baseline(부모요소의 베이스 라인에 정렬[기본값])
text-top(부모요소의 폰트위에 정렬)
text-bottom(부모요소의 폰트 아래에 정렬)
super(위 첨자의 위치에 베이스 라인을 정렬)
sup(아래 첨자의 위치에 베이스 라인을 정렬)
단위를 붙인 수치(부모요소의 베이스라인을 0으로 한 값의 +-)
%(부모요소의 베이스라인을 0으로한 높이의 비율) |
|
글자에 선 긋기
|
text-decoration |
underline(텍스트에 밑줄을 긋는다)
none(밑줄을 긋지 않는다)
overline(텍스트위에 선을 긋는다)
lline-throuth(텍스트 가운데 선을 긋는다) |
CSS 속성FONT-FAMIILY - 글꼴을 설정합니다
FONT-SIZE:- 글꼴의 크기
FONT-style - 글꼴의 스타일
FONT-weight -글꼴의 두꼐
FONT-variant - 글꼴의 소문자를 대문자로 지정
FONT-spacing - 글자사이의 간격을 지정
FONT-height - 줄간격을 지정
color - 글꼴의 색상 지정
FONT-FAMIILY 속성
H2 {
FONT-FAMIILY:"굴림", "돋움", "Comic sans
MS";
}
FONT-SIZE 속성
IN - 글자크기를 인지 단위로 표시
CM- 글자크기를 센티미터 표시
MM - 글자크기 밀리미터 단위로 표시
PT -글자크기를 포인트 단위로 표시 1포인트는 1/72인지이며 가장 많이
사용되는 단위
PC - 글자크기를 파이카 단위로 표시 1파이카는 12포인트
madium - 글자크기를 약12포인트정도의 크기로 표시
small - 글자크기를 madium로 1.5배 작은 크기로 표시
x-small - 글자크기를 madium로 3배 작은 크기로 표시
xx-small - 글자크기를 madium로 4.5배 작은 크기로 표시
larage - 글자크기를 madium로 1.5배 큰 크기로 표시
x-larage - 글자크기를 madium로 3배 큰 크기로 표시
xx-larage - 글자크기를 madium로 4.5배 큰 크기로 표시
em - 기준 글꼴 문자의 높이를 기준으로 글꼴크기를 지정
ex - 기준 글꼴 문자의 영문 소문자 높이르 기준으로 글꼴 크기 지정
% - 기준 글꼴 문자의 크기에 대한 %단위로 글꼴 크기를 지정
px - 글꼴의 크기를 픽셀 단위로 표시
larger - 기준 글꼴보다 크게 표시
smaller - 기준 글꼴보다 작게 표시
body{ font-size:9pt}
.title{font-size:large;}
font-style 속성
normal - 아무런 효과를 주지 않음
itailc - 글자를 이텔릭 체로 표시
oblique - 글자에 기울림 속성
font-variant속성
normal - 아무런 효과를 주지않음
small-caps - 소문자를 대문자로 바꾸는 표시
font-weight속성
normal - 아무런 효과를 주지않음
bold - 글자에 html의 <b>태그를 준것과 같은 두꼐로 굵게표시
bolder - 글자를 조금 더 굵게 표시
lighter - 글자를 조금 더 얇게 표시
100-900 - 100(아주얇게)부터 900(아주두껍게)사이의 숫자를
100단위로 지정할수 있다
lettr-spacing 속성
글자와 글자사이의 간격을 조정
H2 {lettr-spacing:170%}
line-height속성
줄간격을 설정
body {line-height:170%}
color속성
글자색상지정
body{ color:darkgray;}
h2 {color:#ffa500;}
----------------------------------------------------------------------------------
문단모양 바꾸기
text-align -문단의 정렬방식을 지정
text-decoration - 글꼴의 선을 긋습니다
text-indent - 문장의 들여쓰기
vertical-align - 문단의 수직 정렬 방식을 지정
---------------------------------------
CSS 테두리 제어하기
테두리종류
border-style 전체 테두리 모양지정
border-top-style - 위쪽 테두리 모양을 지정
border-bottom-style - 아래쪽의 테두리 모양을 지정
border-left-style 왼쪽의 테두리의 모양을 지정
border-right-style -오른쪽 테두리의 모양을 지정
none - 테두리를 보이지 않음
dotted - 테두리 점선 표시
dashed - 테두리를 좀 더 긴 점선으로 표시
solid - 테두리를 직선으로 표시
doubole - 테두리 이중 실선 표시
groove - 테두리를 오목한 실선으로 표시
ridge- 테두리 볼록한 실선으로 표시
inset - 테두리를 내용이 오목한 모양으로 표시
outset - 테두리를 내용이 볼록한 모양으로 표시
테두리 색상지정
border-color -전체 테두리의 색상지정
border-top-color -위쪽 테두리의 색상지정
border-bottom-color - 아래쪽의 테두리 색상지정
border-left-color - 왼쪽의 테두리 색상지정
border-right-color -오른쪽의 테두리 색상지정
테두리 두꼐 지정
border-width - 전체 테두리의 두꼐를 지정
border-top-width - 위쪽 테두리 두꼐 지정
border-bottom-width - 아래쪽 테두리 두꼐지정
border-left-width - 왼쪽 테두리 두꼐 지정
border-right-width - 오른쪽의 테두리 두꼐를 지정
테두리의 속성한방!!!
border:[테두리 종류] [테두리의 두꼐][테두리의 색상]
margin 속성
margin - 모든 방향의 여백을
지정
margin-top - 위쪽의
여백 지정
margin-bottom -
아래쪽 여백 지정
margin-left -
왼쪽여백 지정
margin-right -
오른쪽여백 지정
padding 속성
padding-top - 위쪽의 여백 지정
padding-bottom - 아래쪽 여백 지정
padding-left - 왼쪽여백 지정
padding-right - 오른쪽여백 지정 |
추천 : 