[CSS3] Typography

🖋CSS사용 시 Typo에 해당되는 속성을 알아보겠다.

디자이너들이 설정한 부분을 setting 할 때, 사용되는 속성들을 다뤄본다.

1. font size

폰트의 사이즈를 조절한다.

.text{
  font-size: 16px;
  }

폰트 사이즈를 조절할 때 사용 가능 단위는 3가지 px, em, rem이다.

(font size를 조절할 때는 주로 px이 많이 사용된다.)

---

📏 px 

✔절대 단위

 

📏 em (equal to capital M: 대문자 M사이즈를 기준으로 한다.)

✔상대 단위(기준에 따라 달라지는 단위)

✔실제로 적용된 폰트 사이즈이다. 

.text{
  font-size: 16px;
  }
  
p{
  font-size: 1em;
  }

상단의 코드가 실제로 적용된 폰트 사이즈(부모 요소)가

16px이니 1em은 16px로 설정이되는 것이다.

(1em = 16px)

 

📏 rem(root em: root뿌리 즉, 가장 높은 부모 요소 HTML)

✔상대 단위

✔root뿌리 즉,HTML의 가장 큰 부모 요소인 html에 적용된 폰트 사이즈이다.

html{
  font-size: 16px;
  }
  
.text{
  font-size: 16px;
  }
  
p{
  font-size: 3em;
  }

상단의 코드가 html에 적용된 폰트 사이즈(부모 요소)가

16px이니 1em은 16px로 설정이되는 것이다.

(3em = 48px)

---

2. line height

이 속성은 줄의 높이 즉, 줄 간격을 의미한다.

.text{
  font-size: 16px;
  line-height:1.5;
  }

단위는 동일하게 px, em, rem을 사용할 수 있다.

line height를 사용할때는 주로 em을 많이 사용한다.

 

line height를 사용할때는 크기에 상관없이 무조건 line height의 중단에 글씨가 배치된다.

 

3. letter spacing

글자와 글자 사이의 자간

.text{
  font-size: 16px;
  line-height:1.5;
  letter-spacing:-0.3em;
  }

단위는 px, em이다.(rem은 잘 사용 안 함)

letter spacing을 사용할 때는 주로 em을 많이 사용한다.

 

4. font family

font 서체를 사용할 때 사용되는 속성이다.

.text{
  font-size: 16px;
  line-height:1.5;
  letter-spacing:-0.3em;
  font-family:"Poppins",sans-serif;
  }

.text {	
  font-family: "Poppins";/*Poppins 적용*/
  font-family: "Poppins", sans-serif;/*Poppins 적용, 없다면 sans-serif계열 적용*/
  font-family: "Poppins", "Roboto", sans-serif;/*Poppins 적용,Roboto적용, 없다면 sans-serif계열 적용*/
}

5. font weight

font의 굵기를 나타내는 속성이다.

.text{
  font-size: 16px;
  line-height:1.5;
  letter-spacing:-0.3em;
  font-family:"Poppins",sans-serif;
  font-weight: 400;
  /*100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 */
  }

사용 단위는 100씩 끊어진다.

{400(regular),700(bold)이 많이 사용된다}

6. color

원하는 글씨 색상 설정

.text{
  font-size: 16px;
  line-height:1.5;
  letter-spacing:-0.3em;
  font-family:"Poppins",sans-serif;
  font-weight: 400;
  color: #ffff;
  /* hex | rgb | rgba*/
  }

사용되는 단위는 hex, rgb, rgba 3가지가 있다.

hex: #fff

rgb: 빛의 3 원색

rgba: 빛의 3 원색에 알파 추가(알파는 빛의 투명도를 의미)

 

 

---

7. text align

text의 정렬을 나타내는 속성이다.

.text {
  text-align: center;
  /* left | center | right*/
}

8. text indent

text를 들여쓰기 할 때 사용되는 속성이다.

.text {
  text-align: center;
  text-indent:100;
}

9. text transform

text를 변형한다.(알바펫 베이스 된 문자들에 적용.)

.text {
  text-align: center;
  text-indent: 100;
  text-transform: none;
  /* none | capitalize | uppercase | lowercase  */
}

10. text decoration

text 줄을 끊는 것과 관련된 속성이다.

.text {
  text-align: center;
  text-indent: 100;
  text-transform: none;
  text-decoration: none;
  /* none | underline | line-through | overline  */
}

11. font-style

font에 style을 적용하는 것(주로 italic을 사용한다.)

.text {
  text-align: center;
  text-indent: 100;
  text-transform: none;
  text-decoration: none;
  font-style: italic;
  /* normal | italic | oblique */
}