티스토리 뷰
텍스트 관련 스타일의 핵심
font-family - 글꼴 지정하는 속성
font-size - 글자 크기를 지정
font-weight - 글자 굵기를 지정
color - 글자 색을 지정
text-align - 텍스트 정렬 방법을 지정
line-height - 줄 간격 조절
글꼴 관련 스타일
글꼴 같은 경우는 해당하는 사용자가 글꼴이 없을 경우를 생각해야 하기 때문에 body { font-family:"맑은고딕", 돋움, 굴림 }
이런식으로 맑은 고딕으로 설정 했지만 해당 글꼴이 없을 경우 차례대로 돋음 글꼴이 되도록 설정하고 그것마저
없으면 굴림으로 나오도록 하는 설정이다.
영문 기본 글꼴에는 sans-serif체와 serif체 등이 있고 한글은 굴림, 궁서, 돋움, 바탕체가 있다.
1.@font-face - 웹 폰트
CSS3의 웹 폰트 기능을 사용하면 웹 문서안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방법이다.
먼저 https://fonts.google.com/earlyaccess 로 접속하면 영문 글꼴 외의 다른 글꼴들이 나열되어 있다. 여기서
'Nanum Gothic'의 link항목에 있는 소스를 복사한다. 이때 [Example] 항목을 보면 글꼴 이름을 'Nanum Gothic'으로 지정한다는 것을 알 수 있다. 글꼴 이름을 기억하자
*찾는방법
controll+f 로 찾는 글꼴 검색
파란 동그라미를 따라 클릭하고 밑에 fmaily selected 클릭
위에 찾는 url이 나와있다. 그리고 url 밑에 보면
font-family : ' Nanum Gothic '으로 쓰라는 형식이 나와있다. 참고해서 쓰자!
그리고 밑에 처럼 적용해주면 된다.
1-2. 직접 웹 폰트 업로드해 사용하기
그러나 웹 사이트에서 제공하는 폰트가 아니거나 자신이 따로 가지고 있는 ttf폰트를 변환해 사용한다면 여기서 설명한 방법으로 직접 업로드 해야한다. 컴퓨터에서 사용하는 글꼴은 트루타입 유형이고 파일 확장자는 *.ttf 이다. 하지만 트루타입 유형의 글꼴은 파일 크기가 너무 크기 때문에 다른 글꼴이 등장 했다. 바로 eot와 woff다. ttf파일을 woff로 변환하려면 http://people.mozilla.com/~jkew/woff/를 이용하고
ttf파일을 eot파일로 변환 하려면 http://eotfast.com 사이트를 이용하면된다.
*글꼴 저작권에 조심하자
ttf파일을 eot나 woff로 변환해 웹 폰트로 사용하려면 허락이 필요하다. ttf글꼴을 구입했더라도 그것이 웹 폰트 사용까지 허락한 것은 아니기 때문에 무조건 웹 폰트로 변환해 사용해서는 안된다. 글꼴 사용에 대해서는 사용권 범위가 까다롭기 때문에 반드시 사전에 확인을 해야한다!!
font-family: 값으로 글꼴 이름을 써주고 src에 주소를 넣는데 로컬에서의 변환된 trana를 찾고 못찾으면 확장자를 붙여서 찾게 하고 eot가 안열리면 woff로 열도록 하고 그거마저 안되면 ttf로 열도록 쓴 구문이다.
2. font-size - 글자 크기 조절하기
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
절대크기 - 브라우저에서 지정한 글자 크기
상대크기 - 부모요소의 글자 크기를 기준으로 더 크게 표시하거나 더 작게 표시한다 사용가능한 값은 larger, smaller 다.
크기 - 브라우저와 상관없이 글자 크기를 직접 지정
백문율 - 부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시한다.
글자 크기의 단위
em - 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절
ex - x-height. 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절
px - 픽셀. 모니터에 따라 상대적 크기가 된다. (고정 값)
pt - 포인트. 일반 문서에서 많이 사용하는 단위다.
보통 절대 크기와 px(웹), em(모바일)를 많이 사용한다.
em 단위 사용하기
em은 사용하는 글꼴의 대문자 M을 기준으로 하므로 그 발음을 따 em이라는 단위를 사용한다. 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 놓고 상대적 값을 계산해 다른 요소들의 글자 크기를 조절한다. 만약 지정한 크기가 없다면 <body> 요소의 크기 16px이 기본 값 1em으로 지정이 된다.
3. font-weight - 글자 굵기 지정하기
font-weight: normal | bold | bolder | lighter | 100 ~ 900 (100단위로)
normal - 일반적인 형태로 기본값
bold, bolder, lighter - 굵게, 원래 굵기보다 더 가늘게, 원래보다 더 굵게
100~900 - 세밀히 두께 지정하기
4. font-variant - 작은 대문자로 표시
영어 글꼴에서는 '작은 대문자'라는 독특한 설정도 가능하다. 대문자를 소문자 크기에 맞추어 작게 표시하는것이다.
font-variant: normal | small-caps
nomal - 일반적인 형태로 표시한다.
small-caps - 작은 대문자로 표시한다.
5. font-style - 글자 스타일 지정하기
글자를 이탤릭체로 표시하는 방법이다.
font-style: normal | italic | oblique
normal - 일반적인 형태로 표시합니다.
italic, oblique - 이탤릭체로 표시합니다.
6. font 모든 글꼴 속성 한꺼번에 묶어 표현하기
그외 알아두면 좋은 옵션들
7. Color - 글자 색 지정하기
색상을 여러가지 방식이 존재 하는데 color:blue 같은 이름이나 color: rgb(0,200,0); 이나 16진수인 color: #ff0000; 이 있다.
8. text-decoration - 텍스트에 줄 표시하기/없애기
text-decoration: none | underline | overline | line-through
none - 밑줄을 표시하지 않는다.
underline - 밑줄 긋는다.
overline - 영역 위로 선을 그린다.
line-throung - 영억을 가로지르는 선(취소선)
9. text-transform - 텍스트 대,소문자 변환하기
영문자를 표기할 때 텍스트의 대,소문자를 원하는대로 바꿀수 있는 기능
text-transform:none | capitalize | uppercase | lowercase | full-width
capitalize - 시작하는 첫 번째 글자를 대문자로
uppercase - 모든 글자를 대문자로
lowercase - 모든 글자를 소문자로
full-width - 가능한 모든 문자를 전각 문자로 변환한다.
(고정 폭 영문자 너비의 두배정도 너비의 문자이며 절반은 반각문자라 부른다.)
10. text_shadow - 텍스트에 그림자 효과 추가하기
본문에서 자주 사용하면 좀 지저분할 수 있지만 사이트 제목이나 강조해야 할 글자에 사용하면 글자를 눈에 띄게 만들 수 있다.
text-shadow: none | <가로거리><세로거리><번짐정도><색상>
가로거리 - 텍스트부터 그림자까지의 가로거리를 입력한다. 양수 값은 글자 오른쪽 음수값은 왼쪽에 그림자를 만듬, 필수 속성
세로거리 - 텍스트부터 그림자까지의 세로거리를 입력한다. 양수 값은 글자 아래쪽 음수값은 위쪽에 그림자를 만듬, 필수 속성
번짐정도 - 그림자가 번지는 정도를 나타낸다. 양수값은 모든방향으로 퍼지기 때문에 그림자가 크게 표시 음수는 모든방향 축소 기본값 0
색상 - 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수 있다. 기본 값은 현재 글자색이다.
pre-line - 여러개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시한다.
pre-wrap - 여러개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시한다.
12. letter-spacing 과 word-spacing - 텍스트 간격 조절하기
강조하고 싶은 단어의 간격을 살짝 띄워서 여유있게 표시하는 방법이다. 마 치 이 렇 게 말이다.
letter-spacing: <크기>, word-spacing: <크기>
13. direction - 글자 쓰기 방향 지정하기
direction: ltr | rtl
ltr - 왼쪽에서 오른쪽으로 텍스트 표시, 기본값
rtl - 오른쪽에서 왼쪽으로 텍스트를 표시
14. text-align - 텍스트 정렬하기
text-align: start | end | left | right | center | justify | match-parent
start - 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다.
end - 현재 텍스트 줄 끝 위치에 맞추어 문단을 정렬한다.
left - 왼쪽에 맞춰 문단 정렬
right - 오른쪽 맞춰 문단 정렬
center - 가운데 맞추어 문단 정렬
justify - 양쪽에 맞추어 문단 정렬
match-parent - 부모 요소에 따라 문단을 정렬 부모가 start라면 거기에 맞춘다.
15. text-indent - 텍스트 들여쓰기
문단의 첫 글자를 조금씩 들여쓰면 문단의 시작을 쉽게 알아볼 수 있어서 사용한다.
text-indent: <크기> | <백분율> text-indent: 15px // 15px만큼 들여쓰기
크기 - 단위와 함께 들여 쓸 크기를 지정 음수값도 사용 가능
백분율 - 부모 요소의 너비를 기준으로 상대적 크기를 지정
16. line-height - 줄 간격 조절하기
줄 사이(위,아래)의 길이를 조절하는거다.
line-height: <숫자> | <크기> | <백분율> | inherit
17. text-overflow - 넘치는 텍스트 표현하기
white-space: nowrap으로 지정해 줄 바꿈을 하지 않을 때는 텍스트가 기준선을 벗어나 넘칠 수도 있다 이럴때 자르거나 ...표현으로 처리한다.
text-overflow: clip | ellipsis
clip - 넘치는 텍스트를 자릅니다.
ellipsis - 말 줄임표(...)로 잘린 텍스트가 있다고 표시한다.
'front-end > CSS' 카테고리의 다른 글
| CSS 포지셔닝 (0) | 2018.11.13 |
|---|---|
| CSS 레이아웃을 위한 스타일(border,margin,padding등) (0) | 2018.11.13 |
| 색상과 배경을 위한 스타일(background 관련) (0) | 2018.11.12 |
| CSS 목록 스타일(불릿 없애기등) (0) | 2018.11.12 |
| CSS 기초(태그 선택자, class 선택자, id 선택자) (0) | 2018.11.11 |