동영상 강좌보기

text와 관련한 CSS속성들을 살펴보겠습니다.

Text Color(글자색)

color속성은 텍스트의 색을 설정하는데 사용됩니다. 색상은 다음과 같이 지정할 수 있습니다.

색이름 - "red"

16진수 - "#ff0000"

RGB - "rgb(255,0,0)"

색상값의 전체 목록은 CSS 색상 값을 확인하십시오.

페이지의 기본 텍스트 색은 body선택기에 정의됩니다.

body {
    color: blue;
}

h1 {
    color: green;
}

** W3C호환 CSS : color속성을 정의하는 경우 배경색도 정의해야 합니다.

Text 정렬 (텍스트 정렬)

text-align속성은 텍스트의 가로 맞춤을 설정하는데 사용됩니다.

텍스트는 왼쪽 또는 오른쪽, 가운데 맞춤, 양쪽 맞춤이 가능합니다.

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

text-align속성값이 'justify'으로 설정되면 모든 줄의 폭이 동일하고 왼쪽 및 오른쪽 여백이 동일하도록 각 줄이 늘어납니다.(예:신문 및 잡지)

div {
    text-align: justify;
}

Text Decoration(텍스트 장식)

text-decoration속성은 텍스트에서 장식을 설정하거나 제거하는데 사용됩니다.

다음 코드 text-decoration:none;은 링크에서 밑줄을 제거하는데 사용됩니다.

a { text-decoration: none; }

다음코드는 다양한 text-decoration 값의 예입니다.

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Text Transformation(텍스트 변환)

text-transform속성은 영문자같이 대소문자가 구문이 되는 텍스트에서 대문자와 소문자를 지정하는데 사용됩니다.

모든 것을 대문자 또는 소문자로 바꾸거나 각 단어의 첫 글자를 대문자로 변환하는데 사용할 수 있습니다.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Text Indentation(텍스트 들여쓰기)

text-indent속성은 텍스트의 첫번째 줄 들여쓰기를 지정하는데 사용됩니다.

p {
    text-indent: 50px;
}

Letter Spacing(글자 간격)

letter-spacing속성은 텍스트의 글자 사이 간격을 지정하는 데 사용됩니다.

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

Line Height (라인 높이)

line-height속성은 줄 사이의 간격을 지정하는데 사용됩니다.

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

Text Direction(텍스트 방향)

direction속성은 요소의 텍스트 방향을 변경하는데 사용됩니다. 일부 언어는 오른쪽에서 왼쪽으로 쓰여지는 것도 있습니다.

p {
    direction: rtl;
}

Word Spacing (단어 간격)

word-spacing속성은 텍스트의 단어 사이의 여백을 지정하는데 사용됩니다.

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

Text Shadow(텍스트 그림자)

아래 예제는 수평으로 3px(오른쪽) 수직으로 2px(아래) 빨간색의 그림자를 만듭니다.

h1 {
    text-shadow: 3px 2px red;
}