오래된 자료, 스타일시트(CSS2) 내용정리

■ CSS 속성

- 좌우배치

제목	속성	값
그림 등 좌우배치	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:<x>absolute;top:150px;left:200px;width:500px;height:300px}</x>
겹친 순서지정	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(텍스트 가운데 선을 긋는다)

 

■ 스타일시트의 기본

- 여러태그에 같은 스타일 지정하기

태그1,태그2,태그3 {property : value; property:value;...}

예)td,p,h1 {font-size:10pt;color:blue}

 

- 하위태그에 스타일 지정하기

b u {font-size:12pt; color:red}

 

- 클래스 이용하기

같은 태그라도 상황에 따라 각각 다른 스타일을 지정하고자 할 때 이용

[정의]

태그.class이름 {property:value;property:value;...}

[적용]

<태그 class="class이름">

 

- ID이용하기

id는 클래스와 비슷하지만 한 페이지에서 하나만 부여한다(JavaScript에서 제어)

[정의]

#id이름 {property:value;property:value;..}

[적용]

<태그 id="id이름">

■ 스타일시트를 사용하는 방법

- 문서 내부에 정의하기(Embedded Style)

h1 {font-size:80;color:red}

h2 {color:blue}

 

- 태그에 직접 정의하기(Inline Style)

 

- 외부 문서에서 연결하기(Linked Style)

mystyle.css란 스타일시트문서를 만든다.

 

 

- 스타일시트에서 사용하는 단위

구분	단위	설명
절대단위	in	인치(1인치=2.54cm)
	cm	센티미터
	mm	미리미터
	pt	포인트(1포인트 = 1/72인치)
	pc	파이카(1파이카 = 12포인트)
상대단위	%	기준이 되는 크기에 대한 비율
	px	1픽셀을 1로하는 단위(화면의 해상도에 따라 상대적임)
	ex	그 범위에서 유효한 폰트의 소문자 x높이를 1로하는 단위
	em	그 범위에서 유효한 폰트의 높이를 1로하는 단위