[CSS] Text Property (속성 ) : word-spacing
[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; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : white-space (0) | 2018.05.02 |
---|---|
[CSS] Text Property (속성 ) : vertical-align (0) | 2018.05.02 |
[CSS] Text Property (속성 ) : unicode-bidi (0) | 2018.05.02 |
[CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : white-space
[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; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : word-spacing (0) | 2018.05.02 |
---|---|
[CSS] Text Property (속성 ) : vertical-align (0) | 2018.05.02 |
[CSS] Text Property (속성 ) : unicode-bidi (0) | 2018.05.02 |
[CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : vertical-align
[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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
12. vertical-align - 요소의 수직 정렬에 대한 지정
vertical-align 속성은 요소의 수직 정렬 상태를 지정한다.
- 버전 : CSS 1
- 모든 주요 브라우저에서 지원
- 속성값 (value)
length
%
baseline
sub
super
top
text-top
middle
bottom
text-bottom
inherit : 지정 요소의 수직정렬 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */ { vertical-align:value; } /* example */ img.a { vertical-align: baseline; } img.b { vertical-align: text-top; } img.c { vertical-align: text-bottom; } img.d { vertical-align: sub; } img.e { vertical-align: super; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : word-spacing (0) | 2018.05.02 |
---|---|
[CSS] Text Property (속성 ) : white-space (0) | 2018.05.02 |
[CSS] Text Property (속성 ) : unicode-bidi (0) | 2018.05.02 |
[CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : unicode-bidi
[CSS] Text Property (속성 ) : unicode-bidi
☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
11. unicode-bidi - direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
- 버전 : CSS 2
- 모든 주요 브라우저에서 지원
- 속성값 (value)
/* 구문 */ { unicode-bidi: normal|embed|bidi-override|initial|inherit; } /* example */ div { direction: rtl; unicode-bidi: bidi-override; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : white-space (0) | 2018.05.02 |
---|---|
[CSS] Text Property (속성 ) : vertical-align (0) | 2018.05.02 |
[CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-shadow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-overflow
[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; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : vertical-align (0) | 2018.05.02 |
---|---|
[CSS] Text Property (속성 ) : unicode-bidi (0) | 2018.05.02 |
[CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-shadow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-indent (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-transform
[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; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : unicode-bidi (0) | 2018.05.02 |
---|---|
[CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-shadow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-indent (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-decoration (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-shadow
[CSS] Text Property (속성 ) : text-shadow
☞ 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 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
08. text-shadow - 글자에 그림자를 주는 속성
text-shadow 는 글자에 그림자를 주는 속성이다. 그림자의 수평 수직 거리를 지정하고 흐림정도와 색상값을 따로 줄 수 있다.
- 버전 : CSS 3
- IE 10 이하 버전을 제외한 모든 주요 브라우저에서 지원
- 속성값 (value)
h-shadow : 글자의 수평 그림자 위치를 지정하며 음수값도 허용
v-shadow : 글자의 수직 그림자 위치를 지정하며 음수값도 허용
blur : 흐림정도의 값을 지정
color : 색상값을 지정
/* 구문 */ { text-shadow:h-shadow v-shadow blur color; } /* example */ div { text-shadow:2px 2px #ff0000; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-indent (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-decoration (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-align (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-indent
[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; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : text-shadow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-decoration (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-align (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : line-height (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-decoration
[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; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : text-shadow (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : text-indent (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-align (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : line-height (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : letter-spacing (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-align
[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; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : text-indent (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : text-decoration (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : line-height (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : letter-spacing (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : direction (0) | 2018.05.01 |