Font 스타일

📍 글꼴 관련 속성

• font-family : 글꼴 종류를 지정한다.
• font-size : 글자 크기를 지정한다.
• font-style : 글자를 이텔릭체로 표시할지 지정한다.
• font-weight : 글자 굵기를 지정한다.
• font-variant : 소문자를 작은 대문자로 바꾸는 속성
  * font-variant : small-caps 가 그 역할을 함.

📂 글짜 관련 속성 MDN

🧷 웹 폰트
사용자의 컴퓨터에 설치된 폰트와 상관없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트

📂 구글 웹 폰트
구글 웹 폰트 사이트에 방문하여 <link> 또는 @import 문을 사용(style 태그 안에)하여 웹 폰트에 적용 할 수있다.

📍 단위

• px : 픽셀 단위
• rem : 루트 요소의 글꼴 크기

font-size: 2rem; //최상위 태그인 html 에 적용된 크기의 2배.

• em : 요소의 글꼴 크기

font-size: 2em; // 본인이 속한 요소의 사이즈의 2배(부모요소가 없을땐 html의 기준으로 함)

• vw : viewport 너비의 1%
• vh : viewport 높이의 1%

📂 그 외 단위 MDN

📂 색상키워드 표기법 MDN

📍 글자 관련 속성

• text-align : block element, table-cell box 안에서 글자를 가로 정렬 하는데 사용한다.
• line-height : 줄 간격을 설정한다.
  -> 사용자가 읽기 편한 간격 : 자간 < 어간 < 행간 순으로 넓어야 한다.
  • default : 1.25 / 1.5 이상 줘야 글 읽기가 용이하다.
• letter-spacing : 글자 사이의 간격
• word-spacing : 단어 사이의 간격, 픽셀 단위나 em으로 조정할 것
• text-indent : 들여쓰기
• text-transform : 대문자로 또는 소문자로 바꾸는 속성
  • uppercase : 대문자로 바꾸는 값, lowercase : 소문자로 바꾸는 값
• text-decoration : 글자를 꾸미는 데 사용한다.
  • <a>태그에 밑줄을 없앨 때 많이 사용
• text-shadow : 글자에 그림자를 넣는데 사용한다.

text-shadow: 10px 10px 3px darkgray; //x축,y축,번짐의 정도,색상 

• list-style : list 의 스타일을 바꿔준다.

📂 추가적인 글자 관련 속성