line-height

line-height 속성을 이용해 이 행간을 조정할 수 있습니다.
그러나 정확하게 line-height는 줄의 높이를 의미하는 것이고, 이를 이용해서
행간을 조정할 수 있는 것입니다.

이처럼 계산된 값이 아닌 숫자 값을 상속한다는 사실 때문에,
숫자 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로,
가능하면 단위가 없는 값을 사용하는 것이 좋습니다.

font 관련 속성

축약형

font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;

축약형을 선언할 때는 아래 사항들을 유의해야 합니다.

• font-size와 font-family는 반드시 선언해야 하는 필수 속성입니다.
• 빠진 속성이 있다면 기본 값으로 지정됩니다.
• 각 속성의 선언 순서를 지켜야 합니다.

vertical-align

기본 값 : baseline

css를 통해서 텍스트를 수직, 수평 정렬 할 수 있습니다.
block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있습니다.
따라서 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 적용되지 않습니다.

text-align 속성

텍스트의 정렬을 지정하는 속성입니다.
기본 값 : left (Right to Left 언어일 경우는 right)

text-align과 display의 관계

• text-align은 inline-level에 적용

• text-align은 block-level에 적용할 수 없음

  < 속성 값 >

left
텍스트를 왼쪽으로 정렬

right
텍스트를 오른쪽으로 정렬

center
텍스트를 중앙으로 정렬

justify
텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)

그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까요?
박스모델 챕터에서 다룬 margin의 auto 값을 이용해서 하시면 됩니다.
가운데 정렬 인라인 요소 : text-align (center) 블럭 요소 : margin (auto)
요소의 레벨에 따라 정렬하는 방식의 차이를 바로 알고 있으시기 바랍니다.

text-indent

들여쓰기
기본 값 : 0

text-indent: length | initial | inherit;

< 속성 값 >

length
px, em 등 고정 수치로 지정. 음수 허용

%
부모 요소의 width를 기준으로 퍼센트로 지정

text-decoration

< 속성 값 >

none
텍스트 꾸밈을 생성하지 않음 ( 기본값 )

underline
밑줄로 꾸밈을 설정

overline
윗줄로 꾸밈을 설정

line-through
중간을 지나는 줄로 꾸밈을 설정

단어 관련 속성

font와 관련된 텍스트에 대한 속성뿐만아니라, 단어에 대해서
어떻게 표현되게 할지 지정할 수 있습니다.
단어의 공백을 어떻게 처리할지, 단어 사이의 간격을 얼마만큼
가질지, 줄 바꿈이 되는 지점은 어디로 둘지 등을 제어할 수 있습니다.

- white-space 요소 안에 공백을 어떻게 처리할지 지정하는 속성입니다.

< 속성 값 >

normal
공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 기본 값

nowrap
공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음.

pre
공백과 개행을 표현하고, 자동 줄바꿈이 일어나지 않음.

pre-line
공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생.

pre-wrap
개행은 무시하고, 공백만 표현. 필요한 경우 자동 줄바꿈 발생.

- letter-spacing 자간을 지정하는 속성입니다.

- word-spacing 단어 사이의 간격을 지정하는 속성입니다.

- word-break 단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성입니다.

- word-wrap 요소를 벗어난 단어의 줄바꿈을 지정하는 속성입니다.