CSS text style 속성 2

<Today's Goals>

• 문단 스타일
• direction 속성
• text-align 속성
• text-justify 속성
• text -indent 속성
• line-height 속성
• text-overflow 속성

<What i learned>

• text-shadow 쉼표로 값을 구분해서 여러개의 그림자를 만들 수 있다. 잘 이용하면 그라데이션 가능.
• 문단 스타일로 텍스트 정렬하는 것 말고 white-space를 이용해 공백이랑 문장 줄 넘김 한번에 조절 할 수 있다니 특히 텍스트가 많은 article 등에 사용하면 유용할 것 같다.

<Questions>

Q : 그림자말고 글자 자체에도 그라데이션도 넣을 수 있을까?

A : 

https://reveur1996.tistory.com/11

CSS text style 속성

Q : 글자에만 배경을 따로 지정해서 색상을 넣는 방법은?

A: background-color로 해당 텍스트만 지정해서 적용한다.

---

<문단 스타일>

문단 스타일 - 텍스트 정렬, 들여쓰기, 줄 간격

 

direction  속성 - 글자 쓰기 방향 지정

언어마다 텍스트 방향이 다름. 한글이나 영어의 경우 원래 왼쪽에서 오른쪽으로 쓰는 언어이기떄문에 rtl로 속성값을 입력해도 텍스트 방향이 바뀌지 않고 정렬되어 나타난다.

• ltr : (left to right) 왼쪽에서 오른쪽으로 텍스트를 표시. 기본 값.
• rtl : (right to left) 오른쪽에서 왼쪽으로 텍스트를 표시.

 

text-align  속성 - 텍스트 정렬하기

• start : 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬.
• end : 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬.
• left : 왼쪽에 맞추어 문단을 정렬.
• right : 오른쪽에 맞추어 문단을 정렬.
• center : 가운데 맞추어 문단을 정렬.
• justify : 양쪽에 맞우어 문단을 정렬.
• match-parent : 부모 요소에 따라 문단을 정렬. 부모 요소의 속성 값이 start이거나 end일 경우, 부모요소가 ltr인지, rtl인지에 따라 계산해 적용.

 

text-justify  속성 -정렬 시 공백 조절

text-align 속성 값이 justify일 경우, 양쪽 끝에 맞추기 떄문에 글자와 단어 사이 간격이 어색하게 벌어질 수 있는데, 이때 간격을 조절해서 정렬하도록 지정.

• auto : 웹브라우저에서 자동으로 지정.
• none : 정렬하지 않음.
• inter-word : 단어 사이의 공백을 조절해 정렬.
• distribute : 인접한 글자 사이의 공백을 똑같이 맞추어 정렬.

 

text-indent  속성 - 텍스트 들여쓰기

문단의 첫 글자를 얼마나 들여쓸지 지정.

• 크기 : 단위와 함께 들여 쓸 크기를 지정. 음수 값도 사용할 수 있음.
• 백분율 : 부모 요소의 너비를 기준으로 상대적 크기를 지정.

 

line-height  속성 - 줄 간격 조절하기

줄 간격은 정확한 단위와 함께 크기 값을 직접 지정하거나 글자 크기를 기준으로 숫자, 실제 크기, 백분율로 표시함.

이때 숫자는 간격 값이 아니라 '글자 크기의 몇 배수' 인지를 의미.

 

 

text-overflow  속성 - 넘치는 텍스트 표기 방법

white-space: nowrap : 줄 바꿈을 하지 않을 때는 텍스트가 기준선을 벗어나 넘칠 수가 있는데, 이때 넘치는 텍스트를 어떻게 처리할지 지정.

text-overflow 속성은 해당 요소에서 overflow 속성 값이 hidden이거나 scroll, auto 이면서 white-space: nowrap 속성을 함께 사용했을 경우에만 적용된다. (줄 바꿈 안함 + 넘치는 부분 감춤 -> text-overflow 속성 적용 가능)

• clip : 넘치는 텍스트를 자름.
• ellipsis : 말 줄임표(...)로 잘린 텍스트가 있다고 표시.