CSS3 스타일 시트 기초 #2

색상 표현하는 방법

색 이름으로 표현 red , green
색 코드로 표현 16진수로 표현 #FF0000(red) - 자주 사용
10진수로 표현 rgb(255, 0, 0)
퍼센트로 표현 rgb(100%, 0, 0)

"font" : 한줄에서 모든 폰트 속성을 설정할 때 사용(아래 4가지 한줄로 가능하다는 뜻)

다만 한줄로 작성할때 font-style, font-size, font-family, font-weight 순서로 작성 (글자 크기와 글꼴은 절대 생략할 수 없음.)

 "font-style" 폰트 스타일 줄때 (italic)
 "font-weight" 볼드체 설정 (normal, bold)
 "font-size" 폰트 크기
 "font-family" 폰트 종류

• web font : 웹에서 제공하는 font
  https://fonts.google.com/
  사이트에서 사용방법도 제공

• 폰트 크기 설정 단위

pt- 포인트
px- 픽셀
in- 인치
cm- 센티미터
mm- 밀리미터
%- 퍼센트
em- 배수

텍스트 스타일

"color" 텍스트 색상

"direction" rtl(right to left), ltr(left to right) 텍스트 작성 방향을 지정(가로쓰기, 세로쓰기)

"letter-spacing" 글자 간 간격을 지정

"line-height" (크기지정 단위) 줄 높이 지정

"text-align" (center 가운데 정렬, left 왼쪽, right오른쪽) 텍스트 정렬 

"text-decoration : none"(none 기본값) underline밑줄, overline윗줄, line-through 취소줄 
				   // a태그는 밑줄이 기본값임!
                   
"text-indent" : (크기지정 단위)텍스트의 들여쓰기를 지정한다.

"text-shadow" : 3px 5px 10px #000000(rgb 0,0,0);	
	            x방향, y방향, 흐림정도, 텍스트그림자 색상 순서
"text-transform" :  uppercase 소문자 전체를 대문자로 변경
					lowercase 대문자를 소문자로 변경
					capitalize 파스칼 표기법으로 변경(단어의 가장 앞자리만 대문자로) _뒤에 오는건 그대로

그 외 CSS 속성들

style =	"word-wrap" : width: 100px;주었다면 100px 안넘어가게 처리해줌 
					//border: solid(dotted 점선); 로 확인가능
	(break-word 단어가 길때 적절하게 자동으로 줄 바꿈을 해줌)긴 단어를 자동으로 잘라준다.
	"border" - (top, bottom, left, right) (solid 실선, dashed dash선, dotted 점선) (크기 px) (색상) 요소를 감싸는 경계선	
	"padding" 요소의 가장자리와 내용간의 간격
	"margin" 주위에 빈공간 추가
	"background-color" 배경색
	"background-image" 배경 이미지
	"list-style" 리스트 스타일(ul ol에 대한 스타일 지정할때 사용)