Boostcourse[웹UI] 6.폰트, 텍스트 (텍스트part)

vertical-align 인라인 요소의 수직 정렬, text-align 인라인 요소의 수평 정렬

 

vertical-align 속성

요소의 수직 정렬을 지정하는 속성입니다. 

    기본 값 : baseline

vertical-align: keyword | length | percent | initial | inherit ;

< 속성 값 >

length	요소를 지정한 길이만큼 올리거나 내림. 음수 허용
%	요소를 line-height를 기준으로 올리거나 내림. 음수 허용
keyword	baseline(기본 값), sub, super, top, text-top, middle, bottom, text-bottom

vertical-align은 기본 값이 baseline입니다.

이전에 타이포그래피 구조 강의에서 설명했듯이 baseline은 소문자 x를 기준으로 하단 라인을 의미합니다. 

• keyword 
• sub : 부모 아래 첨자 기준으로 정렬
• super : 부모 위 첨자 기준으로 정렬
• text-top : 부모 텍스트의 맨 위(Ascender 제외) 
• text-bottom : 부모의 텍스트의 맨 아래(Descender 제외)
• middle : 부모의 중앙에 위치
• top : 부모의 맨 위 위치
• bottom : 부모의 맨 아래 위치
  
  
• length px값 사용 시 baseline을 기준으로 이동하며, 음수 값도 사용 가능합니다.
  
  
• percent ( % ) line-height를 기준으로 내에서 이동하며 음수 값 사용 가능합니다.

 

text-align 속성

텍스트의 정렬을 지정하는 속성입니다. 

    기본 값 : left (Right to Left 언어일 경우는 right)

text-align: left | right | center | justify | initial | inherit ;

기본 값은 left이지만 경우에 따라 다릅니다.

문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고,

RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 됩니다. 

< 속성 값 >

left	텍스트를 왼쪽으로 정렬
right	텍스트를 오른쪽으로 정렬
center	텍스트를 중앙으로 정렬
justify	텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)

 

text-align과 display의 관계

 -  text-align은 inline-level에 적용

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

그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까요?

박스모델 챕터에서 다룬 margin의 auto 값을 이용해서 하시면 됩니다. 

• 가운데 정렬 
• 인라인 요소 : text-align (center)
• 블럭 요소 :  margin (auto) 

요소의 레벨에 따라 정렬하는 방식의 차이를 바로 알고 있으시기 바랍니다.

 

 

text-indent 속성

텍스트의 들여쓰기를 지정하는 속성입니다. 

    기본 값 : 0

 

text-indent: length | initial | inherit;

< 속성 값 >

length	px, em 등 고정 수치로 지정. 음수 허용
%	부모 요소의 width를 기준으로 퍼센트로 지정

 

• length 문단의 첫 줄에 대한 들여쓰기를 수행합니다. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동합니다.
  
  
• percent ( % ) 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기합니다.

 

text-decoration 속성

텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값입니다. 

    기본 값 :  none   currentColor   solid

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

• text-decoration-line 텍스트 꾸밈의 종류를 지정하는 속성입니다.    
• 기본 값 : none  

< 속성 값 >

none	텍스트 꾸밈을 생성하지 않음 ( 기본값 )
underline	밑줄로 꾸밈을 설정
overline	윗줄로 꾸밈을 설정
line-through	중간을 지나는 줄로 꾸밈을 설정

• text-decoration-color
• 텍스트 꾸밈의 색상을 지정하는 속성입니다.    
• 기본 값 : currentColor
• 색상 값을 사용하여 원하는 색상을 지정할 수 있습니다.
• text-decoration-style 꾸밈에 사용되는 선의 스타일을 지정하는 속성입니다.    
• 기본 값 : solid  
  

< 속성 값 >

solid	한줄 스타일 ( 기본 값 )
double	이중선 스타일
dotted	점선 스타일
dashed	파선 스타일
wavy	물결 스타일

 

 

white-space 속성

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

    기본 값 : normal

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;

< 속성 값 >

normal	공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 기본 값
nowrap	공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음.
pre	공백과 개행을 표현하고, 자동 줄바꿈이 일어나지 않음.
pre-line	공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생.
pre-wrap	개행은 무시하고, 공백만 표현. 필요한 경우 자동 줄바꿈 발생.

 

letter-spacing 속성

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

    기본 값 : normal

letter-spacing: normal | length | initial | inherit;

< 속성 값 >

normal	기본 값
length	길이만큼 자간을 지정. 음수 허용

 

word-spacing 속성

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

   기본 값 : normal

word-spacing: normal|length|initial|inherit;

< 속성 값 >

normal	기본 값
length	길이만큼 단어 사이의 간격을 지정. 음수 허용

 

word-break 속성

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

    기본 값 : normal

word-break: normal | break-all | keep-all | initial | inherit;

< 속성 값 >

normal	기본 값. 중단점은 공백이나 하이픈(-)(CJK는 음절)
break-all	중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행
keep-all	중단점은 공백이나 하이픈(-)(CJK는 그 외 기호도 포함)

 

word-wrap 속성

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

  기본 값 : normal

word-wrap: normal|break-word|initial|inherit;

< 속성 값 >

normal	기본 값. 중단점에서 개행
break-word	모든 글자가 요소를 벗어나지 않고 강제로 개행