1. Font-family 속성
2. Font-size 속성
3. Font-style 속성
4. Font-weight 속성
5. Font-variant 속성
6. Font-color 속성
7. Text-align 속성
8. Vertical-align 속성
9. Text-decoration 속성
10. Text-indent 속성
11. Text-shadow 속성
12. Text-transform 속성
13. Letter-spacing 속성
14. Word-spacing 속성
15. White-space 속성
1. Font-family 속성
1. Font-family 속성은 태그 내용의 font를 정의한다.
2가지 타입의 font family 이름이 있다.
- font family : 특정 글자체 그룹 (Times New Roman, Arial)
- generic family : 비슷하게 보이는 글자체 그룹 묶음 (Serif, Monospace)
|
|
※ ,는 대체값을 나타낸다. 그리고 font-family가 한단어 이상이면 ""로 묶는다.
2. Font-family 속성은 "fallback" 시스템으로 여러 글꼴을 포함해야 한다.
(fallback : 어떤 기능이 약해지거나 제대로 동작하지 않을 때, 이에 대처하는 기능이나 동작) CSS에 글꼴을 정의할 때 하나 이상을 정의해야 한다. 그러면 사용자 PC에 어떤 이유로 그 글꼴이 없을때 다음 대체값이 선택될 수 있다. 브라우저가 글꼴을 표현할 수 없을 경우를 대비해 마지막에 generic font를 써줘서 유사한 글꼴을 알아서 선택하도록 하는것이 좋다.
|
|
2. Font-size 속성
1. Font-size 속성은 폰트의 크기를 설정한다. 웹사이트에 폰트의 크기를 설정하는 첫번째 방법은 키워드 사용이다. ( xx-small, small, medium, large, x-large )
|
|
2. Pixel이나 ems를 폰트 크기를 조작하기 위해 사용할 수 있다. 픽셀 정확도가 필요할 때 px 키워드를 사용하면 완벽하게 픽셀 단위로 글자 크기를 제어할 수 있다. Em은 글자 크기를 설정하는 다른 방법이다.(상대 크기단위) 모든 브라우저가 텍스트의 크기를 조정할 수 있다. 글꼴 크기를 설정하지 않은 경우 디폴트는 (16px = 1em)이다.
|
|
3. Font-style 속성
1. 이 속성은 일반적으로 이탤릭체를 지정하는 데 사용한다.
font-style 속성에는 normal, italic, oblique가 있다. Oblique는 이탤릭체와 비슷하지만 덜 지원된다.
|
|
4. Font-weight 속성
1. Font-weight는 글자의 굵기를 조절한다. 스타일 값은 normal, bold, bolder, lighter가 있다.
|
|
2. Font-weight에 특정 값을 줄 수도 있다. 400이 normal과 같고 700이 bold와 같다.
|
|
5. Font-variant 속성
이 속성은 모든 글자를 작은 대문자로 변환하게 한다. 값은 normal, small-caps, inherit가 있다.
|
|
6. Font-color 속성
1. 이 속성은 글자 색을 나타낸다. 색의 이름을 사용해 글자의 색을 지정할 수 있다. (red, green, blue 등)
|
|
2. 색을 정의하는 또 다른 법은 16진수값을 사용하거나 RGB값을 사용한다.
#을 붙여 6자리 0-F 값을 선택하거나 RGB각 요소를 정의한다.
|
|
7. Text-align 속성
Text-align 속성은 요소 안의 텍스트의 수평정렬을 결정한다. 기본적으로 왼쪽정렬이지만 다르게 설정할 수 있다.(left, right, center, justify). Justify는 모든 라인을 늘이고 줄여서 같은 길이로 만든다. 왼쪽과 오른쪽 마진이 신문처럼 직선이다.
|
|
8. Vertical-align 속성
Vertical-align 속성은 요소 안의 텍스트의 수직정렬을 결정한다. Top, middle, bottom을 사용한다. 테이블 태그에서 많이 사용한다.
|
|
9. Text-decoration 속성
Text-decoration 속성은 글자를 어떻게 꾸밀것인가를 결정한다.
None : 기본값으로 보통 글자를 보여준다.
Inherit : 부모 요소의 값을 복사해온다.
Overline : 글자 위에 줄을 긋는다.
Underline : 글자 밑에 줄을 긋는다.
Line-through : 글자 가운데 줄을 긋는다. <s>태그와 같다.
Blink : 글자를 깜박거리게 만들지만 대부분 브라우저에서 지원하지 않는다.
10. Text-indent 속성
Text-indent 속성은 들여쓰기 크기를 결정하는 속성이다. 값은 px,pt,cm,em,%,inherit이 있다.
|
|
11. Text-shadow 속성
1. Text-shadow 속성은 글자에 그림자 효과를 넣는다.
4가지 값을 설정한다.
1번째는 그림자와의 수평거리를 결정한다.
2번째는 그림자와의 수직거리를 결정한다.
3번째는 얼마나 뿌옇게 할 것인지를 결정한다.
4번째는 색깔을 결정한다.
|
|
2. 수직,수평거리를 표현하기 위해 px,cm,mm,in,pc,pt등의 단위도 사용하고 음수값도 사용 가능하다.
12. Text-transform 속성
Text-transform 속성은 엘리먼트의 글자의 대문자를 어떻게 설정할 것인지를 정한다.
값이 capitalize면 모든 단어의 첫글자를 대문자로 한다.
값이 uppercase면 모든 글자를 대문자로 한다.
값이 lowercase면 모든 글자를 소문자로 한다.
|
|
13. Letter-spacing 속성
Letter-spacing 속성은 글자 사이의 간격을 조정한다. Normal 값은 추가된 간격 없는 기본값이다. Px, pt, cm, mm 등의 간격을 설정할 수 있다. 음수값을 사용해 글자의 간격을 더 촘촘히 할 수 있다.
|
|
14. Word-spacing 속성
Letter-spacing과 비슷하지만 단어간의 간격을 나타낸다. 값은 normal, 숫자값, inherit이 있다. 역시 음수값도 설정 가능하다.
|
|
15. White-space 속성
White-space 속성은 엘리먼트 안에서 공백이 어떻게 처리될것인지 설정한다. 값으로는 normal, inherit, nowrap등이 있다.
Nowrap은 br태그를 만나기 전까지 한줄에 모든 텍스트를 표시하고 여러개의 연속된 공백은 하나의 공백으로 처리한다.
Pre는 여러개의 공백이나 엔터로 줄바꿈을 허용한다.
Pre-line은 엔터로 줄바꿈을 허용하지만 여러개의 공백은 하나로 처리된다.
Pre-wrap은 필요할 때 줄바꿈 한다. Pre와 비슷하게 동작하지만 div등에 의해 box의 가로크기가 한정적일 때 여러개의 공백도 유지하면서 단어 단위로 줄바꿈한다.
|
|
<연관게시글>
