1. 텍스트의 들여쓰기 폭(text-indent 속성)
- <퍼센테이지> : 인덴트 폭을 포함블록의 폭에 대한 퍼센테이지로 지정한다. 마이너스 값도 지정 가능.
2. 텍스트 정렬(text-align 속성)
- text-align 속성은 포함블록에서 텍스트의 행 정렬을 지정한다. 엄밀히는 포함블록 안의 각 행박스에 포함된 인라인박스의 행 정렬을 지정하는 것이다.
- right : 텍스트를 오른쪽으로 정렬한다.
- center : 텍스트를 중앙으로 정렬한다.
- justify : 텍스트를 양끝 정렬(균등분할)한다.
- 'left' 와 'justify'
# Text-align 속성과 블록 레벨 요소
- text-align 속성에서는 인라인박스의 수평 위치를 지정함에 비해 vertical-align 속성은 수직방향을 지정한다.
3. 텍스트 장식(text-decoration 속성)
- 블록 레벨 요소에 포함된 요소에는 '값'이 상속되는게 아니라 '효과'가 상속된다. 브라우저는 img 요소 등의 텍스트를 포함하지 않는 요소에 적용하면 무시한다.
- none : 텍스트를 장식하지 않는다.
- underline : 텍스트에 밑줄을 긋는다.
- overline : 텍스트에 윗선을 긋는다.
- line-through : 텍스트에 취소선을 긋는다.
- blink : 텍스트를 점멸시킨다. 브라우저는 그 값을 지원하지 않아도 된다.
- 'none', 'inherit' 이외는 공백문자로 구별하여 복수 지정할 수 있다.
# Text-decoration 속성의 충돌
- text-decoration 속성으로 지정된 밑줄(underline), 윗선(overline), 취소선(line-through)의 색은 color 속성에 영향을 받는다. 지식요소인 인라인 요소에서 color 속성에 다른 값을 지정해도 부모 요소인 블록 레벨 요소의 값이 적용된다.
# 블록 레벨 요소에 포함된 블록 레벨 요소의 취급
# 다른 글꼴 크기의 요소나 sup 요소,sub 요소가 포함된 경우
- 브라우저는 텍스트의 장식에서 밑줄의 위치나 굵기에 대해 자식 요소의 글꼴 크기나 베이스라인을 고려해도 좋지만 각 행이 같은 베이스라인을 기준으로 같은 굵기의 선을 그어야 한다."
4. 텍스트에 그림자 넣기(text-shadow 속성)
- <색> : 그림자 색을 'RGB값' 또는 '키워드'로 지정. 생략한 때는 color 속성의 값이 참조된다. '<길이> <길이> <길이>'의 앞에 지정해도 뒤에 지정해도 상관없다.
- <길이> <길이> <길이> : 첫 번째 길이는 그림자의 오른쪽(마이너스 값이라면 왼쪽)으로 옮길 거리, 두 번째 길이는 아래쪽(마이너스 값이라면 위쪽)으로 옮길 거리, 세 번째 길이는 그리자의 경계의 흐린정도를 지정한다. 첫 번째와 두번째 값은 생략 가능하다. 세번째 길이를 생략하면 경계가 흐려지지 않는다.
- '<색> || <길이> <길이> <길이>' 조합은 콤마(,)로 구분하여 복수 지정할 수 있다. 복수 지정하면 지정한 순서대로 아래에서부터 위로 겹쳐져 쌓이고 마지막에 원래의 텍스트가 표시된다.
- 오른쪽 0.2em , 왼쪽 0.2 em 흐려지지 않은 그림자
# text-shadow 속성 대체방법
- 위에서 말한 대로 text-shadow 속성은 대부분의 브라우저가 지원하지 않는다. 대체 방법은 position 속성을 이용해 글자를 겹쳐서 놓는다.
5. 텍스트의 문자 간격(letter-spacing 속성)
- 텍스트의 문자간격(문자와 문자사이의 스페이스)을 지정하려고 다음의 속성을 이용할 수 있다.
- <길이> : 보통의 문자간격에 더해 늘릴 만큼의 문자간격을 길이로 지정한다. 즉 '0'은 'normal'과 같은 의미가 되지만 브라우저는 문자간격을 조정하지 않고 텍스트를 행 정렬하지 않는다고 되어 있다.
6. 텍스트의 단어간격(word-spacing 속성)
- <길이> : 보통의 단어간격에 더해 늘릴 만큼의 단어간격을 길이로 지정한다. 즉 '0'은 'normal'과 같은 의미가 된다. 마이너스 값도 지정 가능하지만 브라우저의 기능상 값이 특정 범위에 제한되어 반드시 지정한 값이 반영된다고 할 수 없다.
7. 대문자와 소문자 변환(text-transform 속성)
- uppercase : 각 단어의 모든 문자를 대문자로 변환
- lowercase : 각 단어의 모든 문자를 소문자로 변환
- none : 변환하지 않는다.
- 많은 브라우저가 공백문자를 인식기준으로 text-transform속성을 적용한다.
8. 공백문자 처리방법(white-space 속성)
- pre : 연속하는 공백문자의 압축을 금지한다. 줄을 바꾸는 것은 코드 안의 줄바꿈 위치, 생성내용으로 '\A'가 출현한 위치에 한정된다. 즉 pre 요소를 지정한 것과 같은 기능을 하기 때문에 내용이 포함블록에서 튀어나올 가능성도 있다. 튀어나오는 내용은 overflow 속성에 근거하여 처리된다.
- nowrap : 연속하는 공백문자를 한 개로 압축하지만 코드 안의 줄바꿈 위치에도 텍스트를 자동으로 줄을 바꾸지 않고 생성내용으로 '\A'가 출현한 위치에서만 줄이 바뀐다. 즉 th 요소나 td요소 등의 nowrap 속성(비추천)을 지정한 것과 같은 기능을 하기 때문에 내용이 포함블록에서 튀어나올 가능성이 있다. 튀어나오는 내용은 overflow 속성에 근거하여 처리된다.
# CSS2.1 권고 후보
- pre-wrap : 연속하는 공백문자의 압축을 금지하지만 줄을 바꾸는 것은 코드 안의 줄바꿈 위치, 생성 내용으로 '\A'가 출현한 위치, 행박스를 넘는 경우에는 줄이 바뀐다.
- pre-line : 연속하는 공백문자를 한 개로 압축하지만 줄을 바꾸는 것은 코드 안의 줄바꿈 위치, 생성내용으로 '\A'가 출현한 위치, 행박스를 넘는 경우에 줄이 바뀐다.
댓글 없음:
댓글 쓰기