typography 디자인에 있어 활자의 서체나 글자 배치등의 구성 및 표현할때 사용합니다.
font-size 글자 크기를 나타낼때 사용합니다.
font의 크기를 나타낼때는 크게 3가지 속성을 사용합니다.
px: 절대적인 단위를 나타냅니다.
폰트 사이즈로 16px이 적용됩니다.
em: 실제 적용된 폰트 크기의 상대적인 단위를 나타냅니다.
부모태그의 폰트값으로 16px이 주어지고 자식태그인 p태그의 폰트값으로 2em이 주어지자 16 * 2 를 한 32px이 폰트값으로 주어진것을 볼 수 있습니다.
rem: html에 적용된 폰트값에 비례한 단위를 나타냅니다.
html 자체의 폰트값으로 20px의 값이 주어지고 p태그의 폰트값으로 2rem이 주어지자 20 * 2 를 한 40px이 폰트값으로 주어진 것을 볼 수 있습니다.
line-height 줄간격을 의미합니다.
line-height에 값을 줄 때는 적용된 폰트크기의 상대적으로 비례하는 값을 나타내는 em을 주로 사용하며 이때 em을 표기하지 않는게 일반적인 관례입니다.
line-height로 폰트 사이즈의 2em만큼 비례하는 32px이 적용된 것을 볼 수 있습니다.
line-height에 어떤 값을 주건 line-height 가운데에 글자들이 배치됩니다.
letter-spacing 글자와 글자 사이 간격을 나타냅니다.
line-height와 마찬가지로 em 단위를 써서 요소에 적용된 폰트 사이즈에 비례해서 글자간의 간격을 나타내는게 일반적 입니다.
폰트사이즈 16px에 2em만큼 비례한 32px만큼의 간격이 적용된것을 볼 수 있습니다.
이때 line-height와는 다르게 반드시 em을 적어줘야 합니다.
font-family 여러개의 폰트 스타일을 모아놓고 우선순위에 따라 폰트 스타일을 적용시켜줍니다.
'Gill Sans'를 적용시키고 없다면 'Calibri'를 적용시키고 'Calibri'가 없다면 Trebuchet MS' 이도 없다면 sans-serif 계열의 폰트 스타일을 적용시킵니다.
font-weight 폰트의 굵기를 정해줍니다.
가장 많이 쓰이는 regular인 400과 bold인 700을 기점으로 이보다 크면 두껍고 작으면 얇은 폰트를 나타냅니다.
text-align 글자 정렬 텍스트를 정렬할때 사용합니다.
text-align:center로 가운데 정렬
text-align:left로 왼쪽 정렬
text-align:right로 오른쪽 정렬
text-indent 들여쓰기할때 사용합니다.
text-indent:60px; 만큼 들여쓰기가 적영된 것을 볼 수 있습니다.
text-decoration 줄과 관련된 속성입니다.
text-decoration:line-through;이 적용된 것을 볼 수 있습니다.
font-style 폰트의 스타일과 관련된 속성입니다.
font-style로 italic이 적용된 것을 볼 수 있습니다.
