07. 텍스트 속성

해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

 

텍스트 간격 조절 

글자 사이의 간격 조절(트래킹)

: 트래킹은 단어에 있는 글자 사이의 간격 크기로 CSS에서는 letter-spacing 속성을 통해 제어한다. 

 

h1{ letter-spacing : 2px; }

단어 사이의 간격 조절

: word-spacing속성을 사용하면 화면에 보이는 단어 사이에 간격을 추가해 텍스트 가독성을 높일 수 있다.

 

p { word-spacing : -.3em; }

 

텍스트 줄 간격 조절

: line-height 속성을 사용하면 텍스트 기준선(대부분 글자의 바닥) 사이의 간격을 지정할 수 있다.

 

body { line-height : 1.5; }

 

텍스트 대소문자 설정 

: text-transform 속성을 사용하면 텍스트가 어떤식으로 시작하든 텍스트의 대소문자를 제어할 수 있다. 

 

/*capitalize : 각단어의 첫글자를 대문자로 설정
uppercase : 모든 글자를 대문자로 설정
lowercase : 모든 글자를 소문자로 설정
none : 상속한 텍스트 대소문자 스타일을 재정의하고 텍스트 대소문자를 바꾸지 않고 그대로 둠*/
p { text-transform: uppercase; }

 

텍스트 드롭 섀도우 추가 

: 이 속성을 사용하면 색상, 오프셋(x,y), 번짐, 텍스트 드롭 섀도우에 대한 블러를 정의할 수 있다. 

대부분의 브라우저에서 text-shadow색상을 지원하지만 일부 브라우저에서 동작하지않는다. 하지만 지정하더라도 브라우저에 문제를 일으키지는 않는다. 

 

/* x, y 오프셋(2px 2px) -> 첫번째 값은 섀도우의 상하 오프셋 두번째는 좌우 오프셋
블러정도(2px) 지정 -> 음수값을 입력하면 모두 0으로 처리됨
섀도우에는 RGBA를 사용할때 결과가 제일 좋다. 
:hover 의사코드와 함께 사용시 페이지에서 링크를 강조하는 효과를 보여줄 수 있다.*/
h2 { text-shadow : rgba(51,51,51,.9) 2px 2px 2px; }

 

텍스트 가로 정렬

/*jsustify : 왼쪽과 오른쪽 마진 모두를 기준으로 텍스트를 정렬한다. 
ineherent : 텍스트가 부모의 정렬 스타일을 따르게 한다. */
p: { text-align : justify; }

 

텍스트 세로 정렬

: vertical-align 속성을 사용하면 위아래 엘리먼트를 기준으로 인라인 엘리먼트의 수직 상개 위치를 지정할 수 있다.

이말은 vertical-align속성을 인라인 태그와 테이블 태그에만 사용할 수 있다는 뜻이다. (<a>, <img>, <em>, <strong>, <td>)

/*
super : 텍스트를 기준선 위 첨자로 쓴다. 
sub : 텍스트를 기준선 아래 첨자로 쓴다. 
baseline : 텍스트를 기준선에 배치한다.(기본상태)
*/
h2 { vertical-align : super;}

 

단락 들여쓰기

: 대부분의 브라우저에서 여러 간격을 단일 공백으로 처리하기 때문에 단락 들여쓰기가 동작하지 않는다. 대신 단락은 추가로 줄바꿈을 통해 구별했다. 

/*
2em과 같은 길이 값을 사용하면 깔끔한 들여쓰기가 가능하다. 
퍼센트 값을 사용하면 부모(단락)의 너비에 비례해 텍스트 들여쓰기 값이 적용된다. 
*/
p { text-indent: 2em;}

 

공백 제어

: <pre>태그를 사용하지 않는 한 브라우저는 여러 공백을 공백 간격 하나로 합쳐버린다. CSS를 사용하면 이처럼 공백 간격을 합치는 것을 허용할지 말지 지정할 수 있고, white-spcae속성을 사용해 (<nobr>태그처럼) 간격에서 텍스트를 줄바꿈할지 여부도 지정할 수 있다. 

/*
pre : 여러 공백을 그대로 유지한다. 
nowrap : <br>태그를 사용하지 않을 경우 줄바꿈을 방지한다. 
normal : 브라우저가 공백을 어떻게 처리할지 판단하게 한다. 
이 설정을 사용하면 보통 여러 공백이 공백 하나로 합쳐진다. 
*/

.asis { white-space :pre; }

 

텍스트 장식

: 이는 강조점을 두기 위해 사용하며 웹 페이지에서 사용자의 시선이 중요한 내용이나 경로에 머물게 해준다. 

텍스트 장식은 글자 기준이 아니라 전체 텍스트 블록에 적용된다. 이 말은 자식 엘리먼트가 부모에 설정된 텍스트 장식 스타일을 재정의할 수 없다는 뜻이다.

 

/*
underline: 텍스트 아래에 선을 긋는다. 
overline: 텍스트 위에 선을 긋는다. 
line-throught: 텍스트 가운데를 통과하는 선(취소선)을 긋는다. 
none: 다른 곳에서 설정한 텍스트 장식 스타일을 재정의한다. 
*/
a { text-decoration: none;}