CSS 텍스트 서식, 서체(font) 사용하기 (1)

와 진짜 분량 개많다..

 

오늘은 CSS 텍스트에 대해 정리를 할 것이다..

내가 새로 알게 된 정보 위주로 정리 예정. 

 

1. 서체의 사용

CSS는 텍스트의 서식을 지정하는 다양한 방법을 제공한다.

서체를 정하고, 서체의 색상과 크기, 줄 간격 등

다양한 속성을 조정하고

표제어나 글머리 기호 목록, 

일반 텍스트 단락에 시각적이 효과를 더할 수 있다.

 

CSS 스타일에 서체를 명시할 땐 font-family 속성을 사용한다.

 

p {

font-family: Arial;

}

 

 

하지만 최근 들어 브라우저는 웹 서체(Web Font)를 지원한다.

사이트를 볼 때 다운되는 서체를 웹 서체라고 한다.

웹 서체도 font-family 속성을 사용하지만,

@font-face 지시어(directive)라는 CSS 명령어를 사용해서

웹브라우저에게 해당 서체를 다운로드 하라고 알려야 사용할 수 있다.

 

 

또한, 주요 서체가 없을 경우 사용할 대안 서체까지

명시하는 것이 일반적인 관습이다.

 

p {

font-family: Arial, Helvetica, sans-serif, "Times New Roman";

}

 

서체 이름이 하나 이상의 단어로 구성되어 있다면 "따옴표" 필수.

 

 

2. 웹 서체의 사용

웹 서체를 사용하려면 두 개의 명령어가 필요하다. 

 

1) @font-face

지시어는 웹 브라우저에게 서체 이름과 다운받을 위치를 알려준다.

 

2) font-family

일단 @font-face를 사용해 서체를 다운받으라 알린 다음에

일반 서체와 동일하게 font-family를 통해 사용할 수 있다. 

 

3. @font-face 지시어의 사용법

@font-face 지시어는 일반적인 스타일과 마찬가지로

스타일시트 안에 둔다.

 

만약에 League Gothic 서체를 사용한다면

League_Gothic-webfont.ttf 같은 이름의

파일이 특정 폴더 안에 있을 것이다.

 

사용자의 브라우저가 이 서체를 다운받도록 하려면,

스타일시트에 @font-face 지시어를 사용하면 된다.

 

@font-face {

font-family: "League Gothic";

src: url('fonts/League_Gothic-webfont.ttf');

}

 

src는 브라우저에게 서버의 어디에서

서체를 다운받아야 하는지를 알리는 역할을 한다.

 

 

4. CSS 텍스트 대문자로 고치기

CSS의 text-transform 속성을 이용하면

모든 텍스트를 대문자나 소문자로 만들 수 있고,

각 단어의 첫 글자만 대문자로 만들 수도 있다.

 

이렇게 모두 대문자로 바뀌는 것을 확인할 수 있다.

 

 

font-variant 속성은 소문자를 보통 대문자보다

살짝 작은 대문자로 표시한다.

많은 분량의 텍ㅅ트에 적용하면 가독성을 해치지만,

엄숙한 분위기를 내는 표제어나 캡션에 활용하면 좋다.

 

 

5. CSS 텍스트 밑줄 없애기

아 그리고 text-decoration으로 밑줄을 칠 때도 있는데

none 키워드를 사용하면 모든 장식효과를 꺼버릴 수 있다.

(링크 아래쪽에 들어간 밑줄을 없애고 싶다면) 

 

원래 이랬던 애를

 

 

 

이렇게 밑줄을 없앨 수 있다...

 

 

6. CSS 텍스트 그림자 효과

text-shadow 속성은 네 가지 정보가 필요하다.

 

1) 수평 오프셋 (horizontal offset)

텍스트의 왼쪽 또는 오른쪽으로 얼마나 멀리 그림자가

떨어질 것인지를 결정하는 수치

 

2) 수직 오프셋 (vertical offset)

텍스트 위 또는 아래로 얼마나 멀리 그림자가

떨어지는지를 결정하는 수치

 

3) 그림자의 가장자리가 번지는 정도 (bluerriness)

 

4) 그림자 색상 (color)

 

텍스트에 더하는 그림자 개수에는 제한이 없다.

 

따라서 

 

text-shadow: -4px 4px 3px #666, 1px -1px 2px #000;

 

이런식으로 입력 가능

 

 

2탄은 내일....