font size

px : 고정된 폰트의 크기를 지정할떄
em, rem: 사용자가 페이지의 폰트를 가변적으로 변경할 수 있을때

오늘날에는 rem 사용! : 폰트크기를 조정할 수 있는 사용자의 권리

폰트의 사이즈를 사용자가 조정하면 px단위는 바뀌지 않지만, rem단위를 사용한 경우에는 바뀐다.

color

color name: red와 같이 지정된 이름으료 표현

<style>
	h1{color: red;}
<style/>

hex:16진수를 사용해 예를들어 빨간색의 경우 #FF0000 으로 표현

<style>
	h1{color: #FF0000}
<style/>

rgb:Red, Green, Blue 광선을 조합해 쏜다고 생각 빨간색의 경우 다음과 같이 표현

<style>
	h1{color: rgb(255, 0, 0);}
<style/>

text-align

-텍스트를 정렬하는 방법

<style>
 	p{text-align:right;}
<style/>

<style>
	 p{text-align:center;}
<style/>

<style>
	 p{text-align:left;}
<style/>

와 같이 text-align을 사용하여 텍스트의 위치를 정렬할 수 있다.

텍스트가 많을 경우에는 justify를 사용해 오른쪽 왼쪽 공간을 동일하게 지정할 수 있다.

 p{text-align:justify;}

font

font-family: 폰트 서체 지정, 서체의 우선순위도 지정 가능

sans-serif: 장식이 없음 (sans가 부정의 의미)
serif: 장식이 있는경우

(가변폭): 폭이 변하며 자연스러움
뒤에 monospace 입력시 (고정폭): 부자연스러움

font-weight: 폰트의 두께
line-height: 줄간격

font: 앞의 표현들을 한번에 사용하고싶을때

<style>
        p{
            font-size: 5rem;
            font-family:arial, verdana, "Helvetica Neue", serif;
            font-weight: bold;
            line-height: 2;
        }
    </style>

즉 같은 폰트를 표현하더라도 위의 방식을 사용할 수도 있고 아래의 방식을 사용할 수도 있다.

<style>
        p{
            font: bold 5rem/2 arial, verdana, "Helvetica Neue", serif;
        }
    </style>

web font

웹에서 폰트를 다운받아 적용할 수 있도록 하는것.
web font generator를 사용하면 google fonts에 없는 것도 적용해 사용 가능