[ CSS ] 스타일 관련 속성 정리 1탄

공부/복습을 위해 작성한 css 기본 속성들 정리입니다 :)

 

분류	속성명	설명
font 관련	font-family	글꼴 선정
	font-size	글꼴 크기 선정
	font-style	기울임 설정 : normal , italic, oblique, initial, inherit
	font-weight	굵기 설정: normal, bold, bolder, lighter, initial, inherit
	font-variant	소문자를 대문자로 변환: normal, small-caps, initial,inherit
	line-height	줄 간격 조정
문단 관련	text-decoration	밑줄, 취소선등 삽입: none, underline, overline, line-throguh, inherit
	text-align	정렬 지정: left, right, center, justify
	text-indent	들여쓰기, 내어쓰기 지정
	text-transform	영문자 대문자/소문자 변환: none,capitalize, uppercase, lowercase,inherit
	letter-spacing	글자간의 간격 조정
	word-spacing	단어간의 간격 조정
	vertical-align	.문자와 문자간의 수직 정렬 조정 : baseline, top, middle, bottom
	white-space	줄바꿈설정 : normal, nowrap, pre,pre-line,pre-wrap, inherit
표 테두리 관련	border-width	선 굵기 (px, em 등 단위 사용)
	border-style	선 형태 지정: none. solid, dotted, dashed, double, groove...
	border-color	선 색상 지정, 색상명, 코드 제시 가능
리스트 꼭지 스타일 관련	list-style-type	꼭지 스타일 타입 지정: none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman
	list-style-image	url('경로') 입력으로 꼭지에 넣을 이미 삽입
	list-style-position	리스트 내 꼭지의 위치: outside, inside, inherit
배경 속성	background-color	배경 색상 지정
	background-image	배경에 이미지 삽입
	background-repeat	배경 이미지 반복 여부지정: repeat. repeat-x.repeat-y, no-repeat, inherit
	background-position	이미지의 위치 설정: px, %, left, right, top, bottom, center, inherit
	background-attachment	스크롤 시 배경 이미지의 동작 설정: scorll, local, fixed, inherit
표 스타일	border-collapse	표의 셀 간 간격 설정: separate, collapse, inherit (collapse가 아닐 시 겹선이 그려짐)
	border-spacing	셀 간 공백 크기 조정 (border-collapse가 separate인 상태에서만 가능)
	empty-cells	빈 셀의 스타일을 브라우저에 보여줄 지 여부: hide, show, inherit  (border-collapse가 separate인 상태에서만 가능)
	table-layout	셀 너비 고정, 가변 여부 지정: auto, fixed, inherit
	vertical-align	수직 정렬 설정 : top, middle, bottom
	cation-side	표의 캡션위치 지정: top, bottom, initial, inherit
	border-width	테두리 넓이
	border-color	테두리 속성
그림자 및 그레디언트 효과	text-shadow	h, v, blur, color 4가지 값을 입력
	box-shadow	h, v, blur, color 4가지 값을 입력
	linear-gradient	linear-gradient(방향, 색1, 색2...) to right, to bottom right, 이런 식으로 방향 제시 가능 180deg 같은 각도로도 제시 가능
	radial gradient	radial-gradient(색1, 색2 ,....) red 5%, blue 10% 이런식으로 면적 비율 제시 가능