[CSS] Text Property (속성 ) : direction
[CSS] Text Property (속성 ) : direction
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
02. direction - 텍스트 방향을 설정
텍스트가 쓰여지는 방향을 지정
- 모든 주요 브라우저에서 지원
- 기본값 : ltr , 상속 : yes , 버전 : CSS2
ltr - left to right , rtl - right to left
- 속성값 (property)
ltr : 기본값(default), 쓰기방향이 왼쪽에서 오른쪽으로 지정
rtl : 쓰기방향이 오른쪽에서 왼쪽으로 지정
inherit : 지정 요소의 텍스트 방향 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */
{ direction:value; }
/* example */
div { direction:rtl; }
/* value */
ltr : 기본값(default), 쓰기방향이 왼쪽에서 오른쪽으로 지정
rtl : 쓰기방향이 오른쪽에서 왼쪽으로 지정
inherit : 지정 요소의 텍스트 방향 속성을 부모(상위) 요소로부터 상속받음
'Web Design > CSS & CSS3' 카테고리의 다른 글
| [CSS] Text Property (속성 ) : line-height (0) | 2018.05.01 |
|---|---|
| [CSS] Text Property (속성 ) : letter-spacing (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : color (0) | 2018.05.01 |
| Google Prettify - 티스토리에 소스코드 표시 (0) | 2018.04.25 |
| SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시 (0) | 2018.04.24 |
[CSS] Text Property (속성 ) : color
[CSS] TEXT Property (14개의 속성 ) : color
☞ Text 관련 속성(Property)
Property |
Description |
example |
01.color |
텍스트의 색상 설정 |
p { color: blue; } |
02.direction |
텍스트 방향을 설정 ( ltr, rtl ) |
p { direction: rtl; } |
03.letter-spacing |
글자 사이의 여백 설정 |
p { lettet-spacing : 3px } |
04.line-height |
줄 높이를 정하는 속성 |
p { lettet-spacing : 3px } |
05.text-align |
텍스트의 정렬 (left, right, center) |
p { text-align : center; } |
06.text-decoration |
선으로 텍스트를 꾸밀 수 있게 해주는 속성 |
|
07.text-indent |
들여쓰기 또는 내어쓰기 속성 |
|
08.text-shadow |
글자에 그림자 효과를 주는 속성 |
|
09.ext-transform |
대문자 또는 소문자로 바꾸는 속성 |
|
10.ext-overflow |
글자 자르기 |
|
11.unicode-bidi |
※ 참조 |
|
12.vertical-align |
세로 정렬 방식 설정 |
|
13.white-space |
요소 안의 공백 처리 방법을 지정 |
|
14.word-spacing |
단어 사이의 간격을 정하는 속성 |
|
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
01. color : 글자의 색상 설정
- 색상 표현방법
CSS 에서 사용할 수 있는 색상코드는 Hexadecimal color(가장 많이 사용하는 방법), RGB color, RGBA color, HSL color, HSLA color, Predefined/Cross-browser color names 처럼 다양한 종류가 있다.
A. 색상이름 표기법 : 색상이름으로 표기 ex) red, blue, black, white
B. 16진수 표기법 :
- 0~f까지의 범위로 6자리 숫자 표기 #000000, #ffffff ( 0은 검정색, f는 흰색 )
- 기본은 6자리 수 로 표기하나 같은 수가 2개씩이면 세자리로도 표현가능
- ex) #000000=#000 , #ffffff=#fff
C. rgb, rgba 표기법 :
- red, green, blue 약자 rgb -0~255 까지의 색레벨
- rgb (색상값, 색상값, 색상값) ex) rgb(0,0,255) - 파란색, rgb(255,0,0) - 빨간색
- rgba (색상값, 색상값, 색상값, 투명도) ex) rgb(0, 255, 0, 0.5) - 투명도 0.5의 초록색
example)
<!--Hexadecimal color-->
{ color:#00ff00; }
<!--RGB color-->
{ color:rgb(255,0,0); }
<!--RGBA color-->
{ color:rgba(255,0,0,0.5); }
<!--HSL color-->
{ color:hsl(120,65%,75%); }
<!--HSLA color-->
{ color:hsla(120,65%,75%,0.3); }
<!--Predefined/Cross-browser color names-->
HTML과 CSS에서 사용 가능한 색상 이름은 147가지이다. 아래 예제처럼 red, blue, yellow 등으로 사용할 수 있다.
{ color:purple; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
| [CSS] Text Property (속성 ) : letter-spacing (0) | 2018.05.01 |
|---|---|
| [CSS] Text Property (속성 ) : direction (0) | 2018.05.01 |
| Google Prettify - 티스토리에 소스코드 표시 (0) | 2018.04.25 |
| SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시 (0) | 2018.04.24 |
| CSS Property (속성 ) : Font (0) | 2018.04.16 |
