읽으면서 배우는 CSS, 폰트 설정

읽으면서 배우는 CSS, 폰트 설정

출처: Code Academy

1. 글꼴 변경

CSS를 통해 글꼴을 변경하는 방법, 어렵지 않습니다. 

아래 코드를 보면 글꼴과 관련되었기 때문에 'font-family' 를 사용해서 글꼴을 변경해 줍니다. 

출처: Code Academy

글꼴을 여러개 지정할 수 있는데 여러개를 지정하는 이유는 해당 서체가 없을 때 차선책으로 다음 글꼴을 사용하도록 해주는 것입니다. 가장 먼저 적은 것이 기본이며 해당 글꼴이 없을 경우 다음 글꼴로 표시 됩니다. 

2. 폰트 사이즈 변경

폰트 사이즈는 'font-size'를 통해 변경할 수 있습니다. 폰트 사이즈는 3가지 단위를 사용하는데 아래 그림과 같습니다. 실제로 사용하는 방법은 그 다음 그림과 같습니다. 

실제 사이즈를 적용하는 방법입니다. 

3. 줄 간격 변경

각종 문서 프로그램, 블로그 등에서도 줄 간격 설정이 가능합니다. CSS에서 줄 간격 설정은 'line-height'를 사용하여 가능합니다. 

실제로 line-height 값을 '1em' 과 '2em'을 줬을 때 차이를 보겠습니다. 

   

4. 단어 사이 간격

단어 사이 간격도 변경 가능합니다. 'word-spacing' 를 통해서 단어 사이 간격을 변경할 수 있습니다. 

여기서 단위도 줄 간격과 동일하게 'em'을 사용합니다. 사용 방법은 아래 그림과 같습니다. 

5. 글자 간 간격

글자 간 간격도 변경 가능합니다. 'letter-spacing' 를 통해서 글자 한자 한자 간의 사이 간격을 변경할 수 있습니다. 단어 사이 간격과 차이점은 단어 사이 간격은 각 단어 간 간격 즉, 스페이스바를 사용한 뒤 단어 간 간격을 말하는 것이고, 글자 간 간격은 한글자 한글자 간 간격을 의미합니다. 

6. 두껍게(볼드체)

폰트를 두껍게 나타내는 방법입니다. 강조할 때 사용하기도 하죠?  'font-weight'를 사용합니다. 

font-weight 다음에 올 수 있는 값은 bold와 숫자로 100, 200, 300 ... 900까지 사용할 수 있습니다. 

100은 thin 즉 얇은 글꼴, 200~400은 보통 두께, 500~900은 두꺼운 글자체를 의미합니다. 

7. Italic

기울여 쓰기를 하고 싶다면 font-style을 사용할 수 있습니다. 

8. 대문자, 소문자로 만들기

영문에만 해당하지만 모두 대문자나 소문자로 만드는 방법은 'text-transform'을 사용합니다. 

모두 대문자로 사용하려면 'uppercase'를 사용하고 모두 소문자로 사용하려면 'lowercase'를 사용합니다. 

9. 정렬

글자를 좌우로 정렬할 수 있는 기능 입니다. 'text-align' 을 사용하여 정렬하면 됩니다. 

사용하는 값은 'right', 'left', 'center'을 사용할 수 있다.