텍스트(Text) 레이아웃 속성

텍스트(Text) 레이아웃 속성

• 텍스트 간격 및 레이아웃 기능에 영향을 주는 속성으로 행간, 자간, 어간, 정렬, 변형, 꾸밈, 그림자

line-height 행간

• 최소 1.5이상이 글읽기에 용이하다.

letter-spacing 자간 (글자 사이 간격)

• px값 보다는 em단위로 설정하는것이 좋음.

word-spacing 어간 (단어 사이 간격)

• px, em(소수점) 단위 사용

• 행간 > 어간 > 자간 - 가독하기가 쉬워짐.

text-align 정렬

• left: 왼쪽 정렬 right: 오른쪽 정렬 center: 중앙 정렬 justify: 양쪽 정렬 (자동 줄바꿈, 오른쪽 경계선 부분 정

• 속성 또한 부모로 부터 상속 받을 수 있다.

text-indent 들여쓰기

• 첫 번째 줄 라인만 들여쓰기 가능하다.

• padding-left를 사용하면 전체 들여쓰기 가능

• em단위 사용(마이너스 값 사용 가능)

text-transform 변형

• uppercase(모두 대문자), lowercase(모두 소문자)

font-variant 변형

• small-caps(대문자만 크게, 소문자는 작은대문자)

• all-small-caps(모두 크기가 작은 대문자)

• 영문에서만 사용, 한글을 적용 X

text-decoration 꾸밈

• underline(밑줄) : 판독의 어려움을 주기 때문에 권장하지 않음

• overline(윗줄)

• line-through(중간줄)

white-space 공백처리

• normal 기본값 : 공백 없이 그대로 유지

• pre - 텍스트를 입력한 그대로 유지

• pre-line - 텍스트를 입력한 그대로 유지하면서 들여쓰기 제거

• nowrap - 랩핑을 하지 않는다는 뜻, 한 줄로 길게 나타남

word-break - 단어의 분리를 어떻게 할 것인지 결정

• break-all

  (공백/띄어쓰기) 수고했어.오늘도

  (음절) 수.고.했.어.오.늘.도

word-wrap : 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정하여 줄바꿈에 관여

• break-word

text-shadow 그림자

• text-shadow : x y blur sprea color;

• 그림자의 색상값을 멀티로 줄 수 있다. (콤마(,)로 구분)

• 그림자를 적용하지 않은 글자가 가독성이 더 좋다

text-shadow : 4px 4px 0px #9bdbde,
              0px 3px 10px #943978;