font-size
폰트크기의 단위는 크게 3개로 나뉜다.
px, em, rem
px는 한번 정해지면 바뀌지 않는 정적요소이다.
em과 rem은 사용자가 브라우저의 설정을 바꾸게 되면 크기가 달라지는 동적요소이다.
최근에는 사용자가 폰트크기를 조정할수 있는 권리를 주기위해서 rem을 많이 쓰고 있다.
rem은 웹브라우저에서 설정을 통해 폰트크기를 크게하면 그에따라 폰트크기가 커지지만 px은 처음부터 고정된 값을 가지기 때문에 설정을 바꾸더라도 폰트크기가 달라지지 않는다.
rem은 html에 적용되있는 폰트 크기를 따르기 때문에
2rem이면 기존 html에 적용되어있는 폰트크기에 2배이다.
color
color name, hex, rgb
이 3가지로 색상을 지정할 수 있다.
color name에서 유명한 색상은 이름으로 지정되어있지만
모든 색상에 이름을 지정할 수는 없기 때문에
hex(#)나 rgb로 색상을 지정하게 된다
rgb(0,0,0)
각각 빨강, 초록, 파랑의 색상으로 최대 255단계까지 지정할 수 있다. 3색상을 모두 최대로 하면 하얀색이 되고 모두 최소로 하면 검은색이 된다.
Font
font-family
폰트의 서체를 지정하는 속성
serif (장식이 있는 폰트)
sans-serif(장식이 없는 폰트)
cursive (흘림체)
fantasy
monospace (고정폭)
font-weight
폰트의 두께를 나타낸다. 대체로 bold만 기억하면 된다.
line-height
행과 행사이의 간격을 지정한다 기본 값은 1.2배이다
font
폰트와 관련된 여려 속성의 축양형으로 표현되는 속성이다. 아래의 순서를 지켜서 기술해야한다.
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
이중에서 font-size, font-family는 필수로 포함되어야 하는 정보이다.
상속
속성값은 부모로부터 자식으로 전파된다.
속성값이 상속되면 부모에 color를 주게되면 자식에게도 그 속성값이 상속이되면서 자식의 color가 변하게 된다.
다만 모든 속성값이 상속되는 것은 아니기 때문에 주의가 필요하다
예를 들어 color는 자식에게 상속이 되지만
border는 상속이 되지 않는다.
