CSS 텍스트 스타일

 

 

텍스트 스타일 

텍스트 스타일은 글자와 단어들, 그리고 글자들로 이루어진 문단에서 사용되는 스타일이다.

 

 

 글자 색 지정하기 - color 속성

웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 때는 color 속성을 사용한다. 속성값은 16진수나 rgb
(또는 rgba), hsl(또는 hsla), 색상이름으로 표기할 수 있다.

h1 {color:rgb(0,200,0);} 
h2 {color:blue;}  
.accent {color:#ff0000;}

 

 

 텍스트에 줄 표시하기/없애기 - text-decoration 속성

decoration 속성을 이용하면 텍스트에 밑줄을 긋거나 취소선을 표시할 수 있다.

h1 { text-decoration: underline; } /* 밑줄을 표시한다. */
p { text-decoration: normal; }  /* 밑줄이 표시되지 않는 기본형이다. */
p { text-decoration: overline; }  /* 영역 위로 선을 그린다. */
p { text-decoration: line-through; }  /* 영역을 가로지르는 선(취소선)을 그린다. */

 

 

 텍스트 대문자, 소문자 변환하기 - text-transform 속성

영문자를 표기할 때 텍스트의 대문자, 소문자를 원하는 대로 바꿀 수 있다.

p { text-transform: none; }    /* 변환하지 않는다. */
p { text-transform: capitalize; }    /* 시작하는 첫 번째 글자를 대문자로 변환한다. */
p { text-transform: uppercase; }     /* 모든 글자를 대문자로 바꾼다. */
p { text-transform: lowercase; }     /* 모든 글자를 소문자로 바꾼다. */

 

 

 텍스트에 그림자 효과 추가하기

텍스트에 그림자 효과를 줄 수 있다.

/* 기본형 */
text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상>

• <가로 거리> : 텍스트부터 그림자까지의 가로 거리이다. 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자를 만든                       다. (필수 속성이다.)
• <세로 거리> : 텍스트부터 그림까지의 세로 거리이다. 양수 값은 글자 아래, 음수 값은 글자 위쪽에 그림잘를 만든다.                         (필수 속성이다.)
• <번짐 정도> : 그림자가 번지는 정도를 나타낸다. 양수 값은 그림자가 모든 방향으로 퍼져 나가 그림자가 크게 나타난                        다. 음수 값은 그림자가 모든 방향으로 축소되어 보인다. 기본값은 0이다.
• <색상> : 그림자 색상을 지정한다. 한가지만 지정할 수 있고 공백으로 구분해 여러 색상을 지정할 수 있다.
                기본값은 현재 글자색이다.

 

예시)

<h1 style="text-shadow: 3px 2px 2px #9bcfff; color: #121466;" >HTML5</h1>

 

여러개의 그림자 효과를 추가할 수도 있다.

.shadow {
    text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff1;
}

 

 

 공백 처리하기 - white-space 속성

텍스트와 함께 연속해 입력된 여러 개의 공백을 어떻게 처리할지 지정할 수 있다. 속성 값은 다음과 같다.

• normal : 여러 개의 공백을 하나로 표시한다. 기본값
• nowrap : 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시한다.
• pre : 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시한다.
• pre-line : 여러 개의 공백을 하나로 표시하고 영역 어비를 넘어가는 내용은 자동으로 줄을 바꿔 표시한다.
• pre-wrap : 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시한다.

 

예시)

.space {
    white-space: pre-line;
}

 

 

 텍스트 간격 조절하기 - letter-spacing 과 word-spacing 속성

텍스트 자간(글자 사이 간격)을 조절할 수 있다. letter-spacing 속성은 낱 글자 사이 간격을 조절하고 word-spacing 속성은 단어와 단어 사이 간격을 조절한다. 주로 단어 사이 간격은 수정하지 않고 letter-spacing 속성을 사용해 자간을 조절한다. 자간은 가능하면 em 단위를 사용해야 바뀌는 글꼴에 맞춰 자간이 유지된다.

 

/* 기본형 */
letter-spacing: normal | <크기>
word-spacing: normal | <크기>

 

예시)

.letter {
    letter-spacing: 0.1em;
}

 

 

문단 스타일

문단 스타일은 텍스트 정렬이나 들여쓰기, 줄 간격 등을 조절한다.

 

 

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

direction 속성은 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지 결정한다. 속성값으로는 다음과 같다.

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

예시)

.direction {
    direction: ltr;
}

 

 

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

text-align 속성은 문단의 텍스트 정렬 방법을 지정한다. 속성값은 다음과 같다.

• start : 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다(left-to-right 언어일 경우 왼쪽으로 정렬되고 right-to-left 일 경우 오른쪽으로 정렬된다.)
• end : 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다. (left-to-right 언어일 경우 오른쪽으로 정렬되고 right-to-left 일 경우 왼쪽으로 정렬된다.)
• left : 왼쪽에 맞추어 문단이 정렬한다.
• right : 오른쪽에 맞추어 문단이 정렬한다.
• center : 가운데에 맞추어 문단이 정렬한다.
• justify : 양쪽에 맞추어 문단이 정렬한다.
• match-parent : 부모 요소를 따라 문단을 정렬한다. 단, 부모 요소의 속성 값이 start, end 일 경우 left-to-right 인지 right-to-left 인지 구분하여 left 혹은 right 값으로 계산해 적용된다.

 

예시)

.align {
    text-align: center;
}

 

 

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

텍스트 정렬을 결정할 때 text-align 값이 justify 일 경우, 양쪽 끝에 맞추기 때문에 글자와 단어 사이의 간격이 어색하게 벌어질 수 있다. 이때 간격을 어떻게 조절해 정렬할 것인지 지정하기 위해 text-justify 속성을 사용한다. 속성값은 다음과 같다.

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

 

예시)

.align {
    text-align: justify;
    text-justify: inter-word;
}

 

 

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

텍스트가 많을 문서일 경우 문단의 첫 글자를 조금씩 들여써 문단의 시작을 쉽게 알아볼 수 있다. text-indent 속성은 문단의 첫 글자를 얼마나 들여쓸지 결정한다. 크기 값과 백분율 값을 사용할 수 있다.

.indent1 { text-indent: 15px; }
.indent2 { text-indent: 5%; }

 

 

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

line-height 속성으로 문단의 줄 간격을 조절할 수 있다. 숫자와 크기, 백분율로 줄간격을 결정할 수 있다.

/* 모두 다 줄간격 30px 을 나타낸다. */
p { font-size: 15px; line-height: 30px; }
p { font-size: 15px; line-height: 2.0; }
p { font-size: 15px; line-height: 200%; }

 

 

 넘치는 텍스트 표기하기 - text-overflow 속성, overflow 속성

white-space 속성값을 nowrap 로 지정하는 등 줄바꿈을 하지 않을 때는 텍스트가 기준선을 벗어나 넘칠 수도 있다. 이렇게 넘치는 텍스트를 어떻게 할 것인지 지정하는 것이 text-overflow 속성이다. 속성값은 다음과 같다.

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

 

* 영역에 넘치는 텍스트를 감추기 위해서는 overflow 속성의 속성값을 hidden 으로 지정해야 한다. overflow 속성값을 visible 로 지정하면 넘치는 텍스트가 보여진다.

 

예시)

<style>
    .space {
        width: 300px;
        white-space: nowrap;   /* 줄바꿈 사용 안함 */
        border: 1px solid #ccc;
        overflow: hidden;      /* 넘치는 부분 감춤 */
        text-overflow: ellipsis;  /* 밀 줄임표(...) 사용 */
    }
</style>

<p class="space">
    당사의 로렘 입숨 툴은 웹 디자이너, 웹마스터, 콘텐츠 마케터를 대상으로 개발되었습니다. 아직 생성되지 않은 콘텐츠를 위한 플레이스홀더 텍스트가 필요하다면, 추가 비용이 없으며 완전히 무료인 이 툴을 이용하면 됩니다. 이 방식으로 그래픽 디자이너와 전문 개발자는 보다 중요한 작업인 그래픽 항목 생성, 페이지 레이아웃 개발 등의 작업에 집중할 수 있습니다. 웹 페이지 출시 전에 로렘 입숨 텍스트를 발행 텍스트로 전화할 수 있습니다. 해당 텍스트 없이는 웹 페이지의 품질은 충분히 실현될 수 없습니다.
</p>