1. 글꼴 & 문자

01. FONT

-1. font Property

• 글자 관련 속성들을 지정, 단축
• font-style : 글자 기울기 지정 : normal
• font-weight : 글자 두께 지정 : normal
• font-size : 글자 크기 지정 : medium(16px)
• line-height : 줄 높이(행간) 지정 : normal(Reset.css 적용시 1,1.2,1.4 등 브라우저에 영향 받음)
• font-family : 글꼴(서체) 지정 : 운영체제(브라우저)에 따라 달라짐

- font : 기울기 두께 크기 / 줄높이 글꼴;
.box{
	// 1.5는 20px의 1.5배 뜻 함
	// 다른 속성은 순서가 바뀌어도 작용되기는 하나
	// 크기/줄높이는 순서를 지켜줘야 한다
	font : italic bold 20px / 1.5 "Arial", sans-serif
}
.box{
	font : 30px / 1.5; //ERROR
	font : bold; //ERROR
	font : bold sans-serif; //ERROR
	-----------------------
	font : 30px / 1.5 sans-serif;
	font : bold 30px sans-serif;
	font : italic 30px/1.5 "Arial", sans-serif;
}
* 단축 속성을 사용하려면 최소한 font-size와 font-family를 필수로 입력

-2. font-style

• 글자 스타일(기울기)을 지정, 개별
• normal : 스타일 없음 : default
• italic : 이탤릭체(활자)
• oblique : 기울어진 글자

-3. font-weight

• 글자의 두께(가중치)를 지정, 개별
• normal : 기본 글자 두께, 400과 동일 : default
• bold : 글자 두껍게, 700과 동일
• bolder : 부모(상위)요소보다 더 두껍게(bold보다 두껍다는 개념이 아님)
• ligher : 부모(상위)요소보다 더 얇게
• 숫자 : 100 ~ 900까지의 100단위의 숫자 9개, normarl과 bold 이외의 두께를 제공하는 글꼴(서체)을 위한 설정
• 일반적인 두께의 이름
  • font-weight의 각 값은일반적으로 다음과 같은 글꼴의 이름으로 표현됨
  • 100 : Thin(Hairline)
  • 200 : Extra Light(Ultra Light)
  • 300 : Light
  • 400 : Normal
  • 500 : Medium
  • 600 : Seni Bold(Demi Bold)
  • 700 : Bold
  • 800 : Extra Bold(Ultra Bold)
  • 900 : Black(Heavy)
• 상대적 두께
  • bolder 나 lighter를 사용할 경우, 부모(상위)요소에게 상속받은 값에서 다음과 같이 계산됨
  • 100(상속) 400(bolder) 100(ligher)
  • 200(상속) 400(bolder) 100(ligher)
  • 300(상속) 400(bolder) 100(ligher)
  • 400(상속) 700(bolder) 100(ligher)
  • 500(상속) 700(bolder) 100(ligher)
  • 600(상속) 700(bolder) 400(ligher)
  • 700(상속) 900(bolder) 400(ligher)
  • 800(상속) 900(bolder) 700(ligher)
  • 900(상속) 900(bolder) 700(ligher)
• 숫자 값과 두께의 불일치
  • 글꼴(서체)의 정확한 두께를 숫자로 표현할 수 없는 경우에만..
  • 400이 주어지면 500을 사용하고, 500이 불가하면 500 미만의 다른 두께 사용
  • 500이 주어지면 400을 사용하고, 400이 불가하면 400 미만의 다른 두께 사용
  • 400 미만 값이 주어지면, 가장 가까운 숫자의 얇은 두께 사용
  • 500 초과 값이 주어지면, 가장 가까운 숫자의 두꺼운 두께 사용
  • 예로 normal 과 bold만 지원하는 글꼴인 경우, 100 ~500은 normal, 600~900은 bold

-4. font-size

• 글자의 크기를 지정, 개별
• 단위* : px, em, cm 등 단위로 지정 : 16px(default)
• % * : 부모(상위)요소의 비율로 지정
• xx-small : 가장 작은 크기
• x-small : 더 작은 크기
• small : 작은 크기
• medium : 중간 크기 : medium
• large : 큰 크기
• x-large : 더 큰 크기
• xx-large : 가장 큰 크기
• smaller : 부모(상위)요소보다 작은 크기
• larger : 부모(상위)요소보다 큰 크기

-5. line-height

• 줄 높이(줄 간격, 행간) 지정, 개별
• normal : 브라우저의 기본 정의를 사용(1 ~ 1.4) : default
• 숫자* : 요소 자체 글꼴 크기의 배수로 지정
• 단위* : px, em, cm 등 단위로 지정
• % : 요소 자체 글골 크기의 비율로 지정

-6. font-family

• 글꼴(서체)지정, 개별
• 글꼴이름 : 글꼴(서체) 후보 목록을 지정
• serif : 글꼴 계열 이름을 지정
• sans-serif
• monospace
• cursive
• fantasy

- font-family : [글꼴후보1, 글꼴후보2 ...], 글꼴계열;
.box{
	// 마지막은 계열
	font-family : Arial, "Open Sans", "돋움", dotum, sans-serif;
}
* 글꼴 계열은 필수로 입력해야 합니다

• 글꼴 계열(Generic family)
  • serif : 바탕체 계열
  • sans-serif* : 고딕체 계열
  • monospace : 고정너비(가로폭이 동등한) 글꼴 계열
  • cursive : 필기체 계열
  • fantasy : 장식(재미있는 문자 표현을 포함하는) 글꼴 계열

02. TEXT

-1. color

• 문자의 색상을 지정
• 색상 : 문자의 색상을 지정 : default(rgb(0,0,0))
• 색상 표현
• 색상이름 : 브라우저에서 제공하는 색상의 이름 : red, blue ...
• Hex 색상코드* : 16진수 색상(Hexadecimal Colors) : #000000
• RGB* : 빛의 삼원색 : rgb(255, 255, 255)
• RGBA* : 비의 삼원색, 투명도 : rgba(255, 255, 255, .5)
• HSL : 색상, 채도, 명도 : hsl(120, 100%, 50%)
• HSLA : 색상, 채도, 명도, 투명도 : hsla(120, 100%, 50%, .3)
• 위 표는 색상을 이용하는 모든 속성(property)의 값으로 사용 가능
  • RGBA : Red, Green, Blue, Alpha channel
  • HSLA : Hue, Saturation, Lightness, Alpha channel

-2. text-align

• 문자 정렬 방식을 지정
• left : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 가운데 정렬
• justfy : 양쪽 맞춤(2줄 이상, <br>없이 순수 글자 수에 따른 줄 변화 시)
• direction 속성(텍스트 방향 및 쓰기 방향 지정/ ltr, rtl)의 값에 의해서 text-align 속성의 '기본값'이 변경될 수 있습니다, 일반적으로 left가 기본값으로 사용

-3. text-decoration

• 문자의 장식(line)을 설정
• none : 선없음 : default
• underline : 밑줄을 지정
• overline : 윗줄을 지정
• line-through : 중앙선(가로지르는)을 지정

-4. text-indent

• (첫번재 줄의) 들여쓰기를 지정
• 음수 값(Negative Values)을 사용할 수 있습니다
• 음수 값을 사용하면 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기, outdent) 됩니다

- text-indent : value ;
.heropy{
	background: url('src');
	width : 500px;
	height : 500px;
	text-indext : -9999px;
}
<div class="heropy">HEROPY</div>
// 이미지의 대체 텍스트로 heropy 입력하였으나 출력이 되어 indent로 화면 밖으로 보냄

-5. letter-spacing

• 문자의 자간(글자 사이 간격)을 설정
• normal : 단어 사이의 일반 간격 : default
• 단위 : px, em, cm 등 단위로 지정

-6. word-spacing

• 단어 사이(띄어 쓰기)의 간격을 설정
• normal : 단어 사이의 일반 간격 : default
• 단위 : px, em, cm 등 단위로 지정