텍스트 관련

CSS에서는 글꼴 지정, 글자 크기, 글자 색상, 글자 정렬방법, 글자 굵기, 기울임 표시 등 텍스트를 꾸며줄 수 있는 여러가지 속성들을 사용할 수 있습니다.

font-family

글꼴을 지정해주는 속성입니다.
font-family: 글꼴이름; | 글꼴이름1, 글꼴이름2; 으로 표기합니다.

글꼴은 ,(쉼표)로 구분하여 나열식으로 표기할 수 있으며 이 경우 사용자의 pc에서 있는 글꼴을 나열된 순서대로 확인 후 있는 글꼴에 대해 적용합니다.
font-family: "맑음 고딕", 돋움, 굴림 으로 작성 시 사용자 pc에서 1차적으로 맑음 고딕 글꼴이 있는지 확인 후 없으면 돋움 글꼴을 찾는 식으로 작동합니다.

💡 글꼴 이름에 '띄어쓰기'가 있는 경우
맑음 고딕 처럼 글꼴 명 자체에 '띄어쓰기'가 포함되어 있는 경우 CSS 문서 내에서 해당 띄어쓰기를 포함한 자체가 글꼴 이름이라고 인식시키기 위해 ""(쌍따옴표) 안에 표기합니다.

💡 웹 폰트란?
font-family로 글꼴을 적용함에 있어 사용자의 pc에 있는 글꼴만 적용 가능합니다. 웹 폰트는 웹사이트를 사용자가 접속 시 설정해둔 웹 폰트를 다운로드 받아 해당 폰트가 사용자 pc에 없어도 적용될 수 있도록 하는 기능입니다.

웹 폰트는 구글 폰트와 같이 웹 폰트를 제공해주는 플랫폼을 이용하거나 직접 웹 폰트를 업로드해서 사용할 수 있습니다.

font-size

글자의 크기를 지정해주는 속성 입니다.
font-size: 크기; | 백분율; | 키워드; 로 표기합니다.

위 값 중 키워드란, 글자 크키로 미리 약속으로 정해놓은 단어를 뜻합니다.
xx-small > x-small > small > medium > large > x-large > xx-large 순으로 사용 가능합니다.

font-style

글자를 정상적으로 표시할지, 기울여서 표시할지 글자의 표시 방법을 지정해주는 속성 입니다.
font-style: normal; | italic; | oblique;로 표기 합니다.

• normal : 일반적인 형태로 표현 (기본값)
• italic : 글꼴에서 정한 이탤릭체로 표현
• oplique : 글꼴 자체를 그냥 기울여서 표현 (italic으로 사용하는걸 권장)

font-weight

글자의 굵기를 지정해주는 속성 입니다.
font-weight: 키워드; | 100~900;로 표기 합니다.

• normal : 보통 크기(기본값)
• bold : 굵게
• bolder : 원래보다 더 굵게
• lighter : 원래보다 더 가늘게
• 100~900 : 100은 가장 가늘게, 900은 가장 굵게로 그 사이 값으로 굵기를 표현 가능

color

글자의 색상을 지정해주는 속성 입니다.
color: 색상명; | 16진수; | rgb/rgba; | hsl/hsla;로 표기 합니다.

• 색상명 : 영문으로 표기하며, black, red, blue 등의 영문 색상명 입니다.
• 16진수 : #RRGGBB로 이루어진 16진수 표기법 입니다.
• rgb/rgba : rgb(rrr, ggg, bbb) 또는 rgb(rrr, ggg, bbb, alpha)로 표기합니다.
• hsl/hsla : hsl(hue, saturation%, lightness%) 또는 hsl(hue, saturation%, lightness%, alpha)로 표기합니다.

text-align

해당 요소 내 콘텐츠의 정렬 방법을 지정해주는 속성입니다.
text-align: 키워드;로 표기 합니다.

• start : 현재 콘텐츠의 줄의 시작 위치에 맞춰 정렬
• end : 현재 콘텐츠의 줄의 끝 위치에 맞춰 정렬
• left : 왼쪽 정렬
• center : 가운데 정렬
• right : 오른쪽 정렬
• justify : 양쪽 정렬
• match-parant : 부모 요소의 정령 방식

line-height

문단의 줄간격을 조정해주는 속성입니다.
line-height: 크기; | 백분율; | 배수;로 표기 합니다.

크기로 지정할 경우 해당 크기대로 줄간격이 설정되며, 백분율, 배수로 지정 시 해당 글자의 크기를 기준으로 비례하여 줄간격이 설정 됩니다.

💡 line-height 속성으로 영역 내 세로로 가운데 정렬하기
간단한 글자를 영역 내에서 세로로 가운데 정렬 해야할 경우 line-height 를 해당 영역의 높이와 동일하게 설정 시 해당 영역 내 세로로 가운데 정렬된것 처럼 보이게 설정할 수 있습니다.

text-dacoration

텍스트에 대해 줄로 꾸밈요소를 설정할 수 있는 속성입니다.
text-decoration: 키워드;로 표기 합니다.

• none : 아무런 꾸밈요소가 없는 상태(기본값)
• underline : 텍스트에 밑줄 표시
• overline : 텍스트에 윗줄 표시
• line-through : 텍스트에 취소선 표시

text-shadow

텍스트에 그림자 효과를 적용할 수 있는 속성입니다.
text-shadow: none; | 가로거리 세로거리 번짐정도 색상;로 표기 합니다.

text-transform

영문한정 텍스트의 대소문자를 변환해주는 속성 입니다.
text-transform: 키워드;로 표기 합니다.

• capitalize: 첫글자 대문자로 전환
• uppercase : 모든 문자 대문자로 전환
• lowercase : 모든 문자 소문자로 전환
• full-width : (가능한) 모든 문자 전각 문자로 전환

letter-spacing, word-spacing

• letter-spacing : 글자와 글자 사이의 간격 조정(자간)
• word-spacing : 단어와 단어 사이의 간격 조정

letter-spacing: 크기; | 퍼센트;로 표기합니다.

참고

Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!