HTML - css 속성

속성	속성값	설명	사용 예제
width	npx, n%, nem ...	가로 크기	width: 100px;
height	npx, n%, nem ...	세로 크기	height: 100px;
font-size	npx, n%, nem ...	글자 크기	font-size: 20px;
font-style	normal. italic	글자 기울기	font-style: itatlic;
font-weight	normal, bold, bolder, lighter, 100~900	글자 굵기	font-weight: bold;
font-family	폰트이름, serif, sans-serif	글자 폰트 (콤마로 구분하여 한번에 여러개의 대체 폰트 설정 가능)	font-family: consolas;
text-decoration	none, underline, line-through, overline	글자에 가로선 추가	text-decoration: underline;
text-shadow	npx, nem ... 색상명, 색상코드	글자의 그림자 (text-shadow: 가로이동 세로이동 흐린정도 색상;)	text-shadow: 2px 2px 4px red;
text-transform	none, capitalize, uppercase, lowercase	대소문자 지정	text-transform: uppercase;
text-indent	npx, n%, nem ...	들여쓰기	text-indent: 10px;
text-align	left, right, center, justify	글자 정렬	text-align: center;
color	색상명, 색상코드	글자 색상	color: orange;
letter-spacing	npx, nem ...	글자 사이 간격	letter-spacing: 5px;
word-spacing	npx, nem ...	단어 사이 간격	word-spacing: 10px;
line-height	npx, nem ...	줄 사이 간격	line-height: 3em; line-height: 3em;
background-color	색상명, 색상코드	배경 색상	background-color: red;
background-image	url("이미지주소")	배경 이미지	background-image: url("이미지주소");
background-repeat	repeat(기본값), repeat-x, repeat-y, no-repeat	배경 이미지 반복	background-repeat: no-repeat;
background-position	npx, n%, nem ... top, bottom, center, left, right	배경 이미지 위치 (background-position: 좌우위치, 상하위치)	background-position: bottom center;
background-attachment	scroll(기본값), fixed	배경 이미지 고정 scroll - 배경이 스크롤을 따라 움직임 fixed - 배경이 고정되어 스크롤을 움직여도 항상 보여짐
background-size	npx, n%, nem ... cover, contain	배경 이미지 크기	background-size: 100px, 100px;
border-위치-style	none(기본값), dotted, dashed, solid, double, groove, ridge, inset, outset	(위치는 생략 가능) 테두리의 스타일을 지정	border-style: dashed;
border-위치-color	색상명, 색상코드	(위치는 생략 가능) 테두리의 색깔을 지정	border-color: red;
border-위치-width	npx, nem ... thin, medium, thick	(위치는 생략 가능) 테두리의 두깨를 지정	border-left-width: 7px;
border-위치	style, color, width의 속성들	border속성의 단축형 표기. (border: width값 style값 color값;)	border: 6px dotted blue;
border-radius	npx, nem ...	테두리를 둥글게 만들어줌	border-radius: 10px;
border-상하-좌우-radius	npx, nem ...	테두리를 둥글게 만들어줌. 상하에는 top/bottom, 좌우에는 left/right 사용가능	border-bottom-right-radius: 30px;
margin-위치	npx, n%, nem ... auto	(위치는 생략 가능) 태그 바깥 여백 설정 auto로 설정시 자동으로 화면의 가운데 오게 설정됨. margin: top right bottom left;	margin-left: 30px;
padding-위치	npx, n%, nem ...	(위치는 생략 가능) 태그 안쪽 여백 설정 padding: top right bottom left;	padding-left: 30px;
box-shadow	npx, nem ... 색상명, 색상코드	박스모델에 그림자 적용 (box-shadow: 가로이동 세로이동 흐린정도 색상;)	box-shadow: 4px 3px 6px gray;
visibility	inherit(기본값), visible, hidden, collapse	가시속성. 요소를 숨기거나 노출시킴	visibility: hidden; visibility: hidden; visibility: hidden;
list-style	none, disc(ul 기본값), sqaure, decimal(ol 기본값) ...	목록의 마커 스타일을 설정하는 속성	list-style: disc; list-style: circle; list-style: decimal;
float	left, right, none(기본값)	요소를 왼쪽, 또는 오른쪽으로 정렬	보기
clear	left, right, both, none	float를 해제시킴. float해제를 원하는 부분에 div태그를 하나 만들어 clear: both; 스타일을 적용해줘서 사용.	보기
position	static(기본값), relative, absolute, fixed	요소의 위치를 변경/이동	보기
display	none	visibility와 마찬가지로 요소를 숨길수 있게 해주나 visibility와는 다르게 숨긴 요소가 차지하는 공간도 함께 사라짐	display: none; visibility: hidden; display: none; (2번째 리스트를 숨겨서 3번 리스트가 2번으로 이동)
display	block, inline, inline-block	요소의 속성(성질)을 변경	보기
cursor	default(기본값), pointer, crosshair, progress ...	요소에 마우스를 올렸을때 마우스 커서의 모양을 변경	cursor: progress;