<CSS 기초> 10. Typography

 

 이번 장에서 배울 내용은 텍스트를 디자인 하는 것이다. 속성들을 알아보기 전에 먼저 텍스트 디자인에서의 요소들을 알아보자.

 

 위에서 왼쪽부터 글자의 크기를 나타내는 폰트사이즈, 글자의 자간을 나타내는 레터스페이스, 글자의 베이스라인, 줄간격이다.

 

1. Font-size

 가장 먼저 알아볼 속성은 역시 글자의 크기이다. 폰트사이즈는 다음과 같이 사용한다.

  font-size : 12px ;

 위는 폰트 사이즈를 12px로 하라는 의미이다. px는 절대단위인데 em과 rem 과 같은 상대단위도 사용할 수 있다. em 은 equal to capital M이라는 의미인데, 부모나 자신에게 주어진 절대단위의 사이즈를 1em 으로 받고 사용한다. rem은 root em 으로써 html을 기준으로 한다. html에 폰트사이즈가 절대단위로 주어져있다면 그것을 1rem으로 사용한다.

 

2. Line-height

 이번에는 줄간격을 알아보자. 줄간격도 px , em, rem 모두 사용가능하다.

  line-height : 1.5 ;

  주로 위와 같이 사용한다. 줄간격이다보니 폰트에 맞게 변경되어야 적절하므로 em을 사용한다. line-height는 기본값으로 em을 갖고 있으므로 굳이 em이라는 단위는 작성하지 않아도 좋다. 즉 위는 워드나 한글에서 줄간격 150%를 의미한다.

 

 참고로 줄간격을 크게 해보면 알 수 있겠지만 글자는 줄간격의 세로의 가운데에 위치한다. 너무 크게 주지 않도록 주의하자.

 

3. Letter spacing

 자간은 글자간의 간격이며, 다음과 같이 사용한다,

  letter-spacing : -0.02 em ;

 자간도 줄간격과 마찬가지로 폰트에 맞게 변경되면 좋으므로 em을 사용한다. 위는 -2%를 의미한다.

 

4. Font-family

 font-family는 텍스트의 서체를 나타낼 때 쓸 수 있다.

  font-family : "XX체", sans-serif ;

 주로 위와 같이 사용한다. 위는 XX체라는 서체를 사용하겠다는 의미인데, 뒤에 나오는 건 XX체가 없을 경우 sans-serif체를 보여주라는 의미이다. sans-serif는 기본적으로 내장되어 있는 돋음이나 고딕계열의 서체이다. serif는 명조계열의 서체를 쓸 대 사용한다.

 

5. Font-weight

 텍스트의 굵기를 별도로 지정할 수 있다.

  font-weight : 400 ;

 위와 같이 사용한다. 위는 정해진 규칙이 있는데 반드시 100단위로 작성해야 한다는 것이다. 굵기 별 숫자는 다음과 같다.

 ( 100 : Thin | 300 : Light | 400 : Regular | 500 : Medium | 700 : Bold | 900 : Black )

 

6. Color

 컬러는 말 그대로 텍스트의 색을 지정하는 속성이다.

  color : #0066ff ;

 위는 hex코드를 이용하여 색상을 표현하였다. 이 외에도 rgb와 rgba를 이용해서 표현도 가능하다. rgba의 경우에는 (0,111,255,0.5) 와 같이 4개의 숫자로 표현한다. 마지막 숫자는 알파값으로 투명도를 나타낸다. 0에 가까워질수록 투명하며 1에 가까울수록 불투명해진다.

 

7. Align

 텍스트의 정렬과 관련된 속성을 알아보자.

  text-align : left ;

 위는 문단을 왼쪽 정렬 하겠다는 의미이다. 물론 left는 기본값이다. right와 center 을 사용하여 오른쪽정렬과 가운데정렬이 가능하다.

  text-indent : 10px ;

 위의 코드를 이용하여 문단의 첫줄의 들여쓰기도 가능하다.

 

8. Transform

 텍스트 변형은 주로 알파벳을 쓰는 문자에 사용한다. text-transform 속성을 이용하여 줄 수 있으며 다음과 같은 값을 표현할 수 있다.

9. Text Decoration

 텍스트 꾸미기는 밑줄을 주는 옵션이라고 생각하면 편하다. text-decoration 속성을 이용하여 줄 수 있으며 다음과 같은 값을 표현할 수 있다.

 자주 사용할 일은 없지만 앵커태그의 밑줄을 제거할 때 none값을 자주 사용한다.

 

10. Font-Style

 이 또한 자주 사용할 일은 없지만 font-style : normal ; 을 통해서 em태그의 기울임을 없앨 수 있다. normal 외에도 기울임을 나타내는 italic과 oblique를 사용할 수 있다.

 

 

 

 

 

---

 

 

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU