All about {Web}

[CSS] Text Property (속성 ) : word-spacing

☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정

14. word-spacing 글자 간격을 지정
word-spacing 속성은 단어와 단어 간의 공간을 지정한다.
- 버전 :  CSS 1
모든 주요 브라우저에서 지원
- 속성값 (value)
normal :  기본값(default), 브라우저 기본 스타일로 나타냄
length :  px, cm, em 단위로 단어 간격을 직접 지정하며 음수도 허용
inherit :  지정 요소의 단어 간격 속성을 부모(상위) 요소로부터 상속받음

/* 구문 */
{ word-spacing:value; }

/* example */
div { word-spacing:30px; }

[CSS] Text Property (속성 ) : white-space

☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정

13. white-space 요소 안의 공백 처리 방법을 지정
white-space 속성은 엘리먼트 안에서 공백문자를 어떻게 처리할지 지정한다.
- 버전 :  CSS 1
모든 주요 브라우저에서 지원
- 속성값 (value)
normal :  기본값(default), 브라우저 기본 스타일로 나타냄, 연속공백과 줄바꿈을 통합
nowrap :  연속공백은 통합하고 줄바꿈은 하지 않음
pre :  연속공백, 줄바꿈 모두 하지 않고 원본 그대로 나타남
pre-line :
pre-wrap :
inherit :  지정 요소의 빈공간 속성을 부모(상위) 요소로부터 상속받음

/* 구문 */
{ white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit; }

/* example */
div { white-space:nowrap; }

[CSS] Text Property (속성 ) : text-overflow

☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정

10. text-overflow 해당 영역을 벗어난 글자들의 상태를 지정
text-overflow 속성은 글자들이 속한 영역에서 벗어났을 때 어떤 방식으로 보여줄지를 지정한다.
- 버전 :  CSS 3
- firefox를 제외한 모든 주요 브라우저에서 지원
- 속성값 (value)
clip :  문자를 해당 영역까지만 나타내고 짜른다
ellipsis :  문자를 해당 영역까지만 나타내되 “…”을 사용하여 표시한다
string :  ..

/* 구문 */
{ text-overflow:clip|ellipsis|string; }

/* example */
div {
text-overflow:ellipsis;
}



[CSS] Text Property (속성 ) : text-transform

☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정

09. text-transform 텍스트의 대문자화 상태를 지정
text-transform 속성은 텍스트의 대문자화 속성을 지정한다.
- 버전 :  CSS 1
모든 주요 브라우저에서 지원
- 속성값 (value)
none :  기본값(default), 대문자화 없이 기본 상태로 지정
capitalize :  각 단어의 첫 번째 문자를 대문자로 지정
uppercase :  모든 문자를 대문자로 지정
lowercase :  모든 문자를 소문자로 지정
inherit :  지정 요소의 텍스트 대문자화 속성을 부모(상위) 요소로부터 상속받음

/* 구문 */
{ text-transform:value; }

/* example */
h1 { text-transform:uppercase; }
h2 { text-transform:capitalize; }



[CSS] Text Property (속성 ) : text-indent

☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정

07. text-indent 첫 번째 줄의 텍스트 들여쓰기를 지정
text-indent 속성은 텍스트 블럭 안에서 첫 번째 줄의 들여쓰기 값을 지정한다.
- 버전 :  CSS 1
모든 주요 브라우저에서 지원
- 속성값 (value)
length :  px, pt, cm, em 단위로 들여쓰기를 지정
% :  부모요소의 너비값을 % 로 계산하여 들여쓰기를 지정
inherit :  지정 요소의 들여쓰기 속성을 부모(상위) 요소로부터 상속받음

/* 구문 */
{ text-indent:value; }

/* example */
p { text-indent:50px; }



[CSS] Text Property (속성 ) : text-decoration

☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정

06. text-decoration 텍스트의 꾸밈을 지정
text-decoration 속성은 텍스트에 효과를 주는 것으로 line 스타일과 관련이 있다.
- 버전 :  CSS 1
모든 주요 브라우저에서 지원
- 속성값 (value)
none :  기본값(default), 꾸밈없는 기본텍스트 상태
underline :  텍스트 아래에 라인을 지정(밑줄 효과)
overline :  텍스트 위에 라인을 지정(윗줄 효과)
line-through :  텍스트 중앙에 라인을 지정
blink :  텍스트에 깜빡임 효과를 지정(blink 속성은 IE, Chrome, Safari 브라우저는 지원하지 않음)
inherit :  지정 요소의 텍스트 꾸밈 속성을 부모(상위) 요소로부터 상속받음

/* 구문 */
{ text-decoration:value; }

/* example */
h1 { text-decoration:overline; }
h2 { text-decoration:line-through; }
h3 { text-decoration:underline; }



[CSS] Text Property (속성 ) : text-align

☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정

05. text-align 텍스트의 수평방향 정렬을 지정
text-align 속성은 요소 안의 텍스트 수평 정렬 값을 지정한다.
- 버전 :  CSS 1
모든 주요 브라우저에서 지원
- 속성값 (value)
left :  왼쪽으로 텍스트를 정렬
right :  오른쪽으로 텍스트를 정렬
center :  중앙으로 텍스트를 정렬
justify :  각 줄의 정렬을 동일한 너비로 일정하게 양쪽 정렬
inherit :  지정 요소의 텍스트 정렬 속성을 부모(상위) 요소로부터 상속받음

/* 구문 */
{ text-align:value; }

/* example */
div { text-align:left; }
p { text-align:right; }


[CSS] Text Property (속성 ) : line-height

☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정

04. line-height 텍스트 줄 간격을 지정
line-height 속성은 텍스트 줄간의 간격을 지정한다(자간에서는 음수값이 허용되지면 여기 행간은 음수값이 허용되지 않는다).
- 버전 :  CSS 1
모든 주요 브라우저에서 지원
- 속성값 (value)
normal :  기본값(default), 줄 간격이 기본값으로 지정
number :  지정된 수 만큼 글자 폰트크기와 곱하여서 줄 간격을 지정
length :  직접 간격을 지정
% :  해당 폰트 크기의 %만큼을 계산하여 줄 간격에 지정
inherit :  지정 요소의 줄 간격 속성을 부모(상위) 요소로부터 상속받음

/* 구문 */
{ line-height:value; }

/* example */
div { line-height:90% }
p { line-height:3; }


[CSS] Text Property (속성 ) : letter-spacing

☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정

03. letter-spacing 글자간 간격 너비를 지정
letter-spacing 속성은 텍스트 내에서 문자 간의 간격의 좁고 넓음의 여부를 지정한다.
- 버전 :  CSS 1
모든 주요 브라우저에서 지원
- 속성값 (value)
normal :  기본값(default), 자간 간격이 기본값으로 지정
length :  직접 간격을 지정하며 음수값도 허용됨
inherit :  지정 요소의 자간 속성을 부모(상위) 요소로부터 상속받음

/* 구문 */
{ letter-spacing:value; }

/* example */
h1 { letter-spacing:2px; }
h2 { letter-spacing:-3px; }


[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; }