웹 폰트
font-family 속성에는 한 개 이상의 글꼴을 지정할 수 있음
입력한 글꼴 뒤에 쉼표 입력하여 다른 글꼴을 입력함
font-family: Arial, helvetica, sans-serif;이 경우 글꼴 적용 시에 잘못 입력된 글꼴이거나 시스템에 설치되어 있지 않다면 요소에 적용되지 않게 된다.
따라서 웹 서버로부터 이를 제공받아 사용할 수 있는 웹 전용 글꼴인 웹폰트를 통해 이러한 문제가 발생하는 것을 방지할 수 있음.
폰트 속성
- font-size
글자 크기 지정 / 속성 값 유형 : 수치와 단위font-size: 32px; - font-weight
글자 두께 지정 / 속성 값 유형 : 별도의 키워드font-weight: 900; //900; 가장 두꺼운 두께 //100~900으로 설정 - line-height
행 높이 지정 / 속성 값 유형 : 수치와 단위line-height: 16px; //글꼴과 폰트 사이즈에 따라 달라짐 - text-align
텍스트 정렬 방식 지정 / 속성 값 유형 : 별도의 키워드text-align: left; //왼쪽 정렬 //left, right, center, justify(양 끝 정렬) - text-decoration
텍스트 줄 긋기 / 속성 값 유형 : 별도의 키워드
글자 크기 지정
- rem
루트 요소의 글자 크기를 배수로 계산하여 적용하는 상대 단위
=>루트 요소 : 문서의 시작부분즉, <html> 태그를 의미 - em
부모 요소의 글자 크기를 배수로 계산하여 적용하는 상대 단위font-size: 0.5em; //부모 요소의 0.5배 글자 크기
게임회사 주니어 개발pm에서 프론트엔드 개발자로 전향하는 과정