폰트 관련 속성
📍vertical-align속성 block 요소에는 적용 안됨
font-size
텍스트 크기를 지정
font-wight
텍스트 두께를 지정
text-decoration
텍스트에 장식용 선을 추가
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;line-height
텍스트의 행간을 설정
line-height: 1.8;letter-spacing
텍스트의 자간을 설정
line-height: 0.1rem;word-spacing
텍스트의 단어 간 간격을 지정
word-spacing: 2px;text-align
텍스트의 가로 정렬방식을 지정
text-align: center / left / right / justify;vertical-align
텍스트의 세로 정렬 방식을 지정
vertical-align: top / middle / bottom;text-indent
텍스트의 들여쓰기 설정
text-indent: 10%text-transform
영문 텍스트의 대소문자를 바꿀 수 있음.
text-transform: capitalize / none / uppercase / lowercaseword-break
텍스트가 콘텐츠박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정
word-break: keep-all / break-alloverflow-wrap
단어가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 줄바꿈 여부를 설정함.
overflow-wrap: normal / break-word📍overflow-wrap vs word-break
**break-all**을 사용하는 **word-break**의 경에는 모든 단어를 **음절 단위로 쪼개**게 됩니다. 따라서 예시와 같은 문장의 경우엔 오히려 문단을 읽기가 불편해짐.
반면에 break-word를 사용하는overflow-wrap같은 경우에는 사용자가 문장을 읽기 편하도록 띄어쓰기 기준으로 줄바꿈. 단어가 길어서 content 영역 밖으로 넘칠때에만 단어 중간에 줄바꿈을 함.
text-overflow
줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기할 것인가.
text-overflow: clip / ellipsis📍text-overflow를 적용하기 전 선행 조건
1. white-space: nowrap;
2. overflow: hidden;
2. overflow: hidden;
