패스트캠퍼스 챌린지 13일차 - Part1. Ch8

이번에는 글꼴과 관련된 속성들을 살펴보자.

• font-style : 글자의 기울기를 설정하는 속성으로 기본값은 기울기가 없는 normarl이다. italic은 이텔릭체(기울어진 글자) 이다.
• font-weight : 글자의 두께(가중치)를 설정하는 속성이다. 기본값은 normal, 400이며 두껍게는 bold, 700 이다. 100-900 사이의 100단위의 값을 입력할 수 있다.
• font-size : 글자의 크기를 지정한다. 기본 크기는 16px이며 px, em, rem 등 의 단위로 값 지정이 가능하다.
• line-height : 한 줄의 높이를 설정하는 속성으로 행간과 유사하다고 보면 된다. 숫자를 입력하면 요소의 글꼴 크기의 배수로 지정되며, 단위를 이용해 설정할 수도 있다. 배수를 사용하는 방법을 권장한다.
• font-family : 글꼴을 지정하는 속성이다. 원하는 글꼴 후보를 쉼표로 구분해 여러개 명시할 수 있다. 마지막에 필수로 글꼴계열을 작성해줘야 한다. 앞에 명시한 글꼴들을 적용할 수 없을 경우 글꼴계열 중에서 아무 폰트를 가져와 출력한다. 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어줘야 한다!! (ex. font-family : 글꼴1, "글꼴2", ... 글꼴계열;)

 

참고로 글꼴 계열은 크게 serif(바탕체 게열), sans-serif(고딕체 계열), monospace(고정너비 글꼴 계열), cursive(필기체 계열), fantasy(장식 글꼴 계열)의 5가지로 볼 수 있다. 

---

다음은 문자와 관련된 속성들이다.

• color : 글자의 색상을 지정하는 속성이다. 기본값은 검정색, rgb(0, 0, 0)이다. 값으로는 전에 배웠던 색상 표현 방법을 이용해 넣어주면 된다.
• text-align : 문자의 정렬 방식을 지정하는 속성으로 왼쪽 정렬 left가 기본값이다. right는 오른쪽 정렬, center는 가운데 정렬, justify는 양쪽 정렬이다.
• text-decoration : 단순하게 문자의 장식(선)을 추가하는 속성이다. underline은 밑줄, overline은 윗줄, line-through는 중앙 선이다. a 태그에는 underline이 기본값으로 들어간다.
• text-indent : 첫 줄의 들여쓰기는 지정하는 속성이다. 음수 값을 넣어주면 내어쓰기로 적용된다

---

13일차!!!

 

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa