CSS3 - CSS 스타일 - 텍스트에 관련된 속성 사용법 1 (7)

CSS3 - CSS 스타일 - 텍스트에 관련된 속성 사용법 1 (7)

오늘은 CSS3의 일곱번째 내용으로 CSS 스타일 속성 중 텍스트에

 관련된 내용에 대해서 가볍게 알아 보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.)

css 스타일 - 텍스트란?

 

먼저 css 에서 텍스트란 텍스트의 장식 기능을 제공하는 스타일로 예를 들어

텍스트정렬, 텍스트 색상, 텍스트 변환 등의 기능을 말하며

이러한 텍스트의 속성은 아래 표와 같습니다.

속성	내용
color	텍스트의 색상을 변경
direction	텍스트 작성 방향 지정 (가로, 세로)
letter-spacing	글자 사이 간격을 지정
line-height	텍스트 줄의 높이 지정
text-align	텍스트의 수평 정렬
text-decoration	텍스트의 장식을 지정
text-indent	텍스트 들여쓰기 지정
text-shadow	텍스트 그림자 효과
text-transform	대소문자 변환 지정

 

<css 텍스트 속성 종류>

여기서 부터 위 표를 토대로 중요한 내용것들만

하나하나 살펴 보도록 하겠습니다.

1. 텍스트의 색상

텍스트의 색상은 color 속성을 사용해 텍스트의 색상을 설정 할 수 있습니다. 

예를 들어 내용은 아래와 같습니다.

<color 속성 사용법>

color 컬러 속성은 위와 같이 색상 키워드 또는 

16진수 10진수 코드로 입력이 가능 합니다.

2. 텍스트의 정렬

텍스트의 정렬은 text-align 속성을 사용하는데

사용법은 아래와 같은 방법으로 사용 됩니다.

<text-align 속성 사용법>

text-align속성은 위처럼 center, left, right, inherit, justify 등

텍스트를 정렬 할 수 있는 값을 가지고 있습니다. ^^

1. center : 가운데 정렬

2. left : 왼쪽 정렬

3. right : 오른쪽 정렬

4. justify : 양쪽 정렬

5. inherit : 부모 태그의 속성 값을 상속 받는다.

 

3. 텍스트 장식

텍스트 장식에 사용되는 속성 text-decoration은 설정되거나 삭제 할 수 있는데

이는 텍스트 장식의 링크에 붙는 줄을 주로 제가할 때 사용이 되며

아래와 같은 방법으로 사용 됩니다.

<text-decoration 속성 사용법>

text-decoration 속성은 위 와 같은 속성

blink, inherit, line-through, none, overline, underline 등

속성 값을 가지고 있습니다.

1. underline : 밑줄 긋기

2. none : 밑줄 또는 기본 텍스트 장식 제거

3.  overline : 텍스트 위에 선 긋기

4. blink : 링크 걸기 (가능한 사용하지 않는 것 을 권합니다.)

5. line-through : 텍스트 가운데 선 긋기

6. inherit : 값을 상속 받는다.

여기까지 텍스트 속성의 색상, 정렬, 장식 등을

알아 보았으며 이 다음 포스팅에 나머지 속성을 이어 설명 하도록 하겠습니다.

이상 CSS3 - CSS 스타일 - 텍스트에 관련된 속성 사용법 - 1 (7)에 

관련된 포스팅을 마치도록 하겠습니다.