23.03.09 / 글꼴, 문자

[ font-style ]

• 기울기
• 이텔릭체 글자를 표시할 때 사용한다.

<값>

• normal : 기울기 없음
• italic : 기울어진 글자
• oblique : 기울어진 글자

 

[ font-weight ]

• 두께

<값>

• normal : 기본 두께 (400)
• bold : 두꺼운 글씨 (700)
• 100~900까지 숫자를 작성 하지만 400 또는 700을 주로 사용.

 

[ font-size ]

• 글자 크기
• 브라우저 기본 글자 크기 16px
• 단위 : px, em, rem

 

[ line-height ]

• 줄 높이

<값>

• 숫자를 작성(배수 사용을 권장한다. 왜? 코드를 다시 작성하지 않고 유지가 가능하기 때문
• line-height: 50px; 대신 line-height: 2; =>내가 작성한 폰트 사이즈의 2배 간격

 

[ font-family ]

• 폰트(서체)를 지정한다.
• font-family : 글꼴1, 글꼴2, 글꼴3,......,글꼴 계열;
• 글꼴 후보를 쉼표로 구분해서 여러개 명시 가능
• 마지막 글꼴 계열은 필수작성 (serif : 바탕체 계열 / sans-serif : 고딕체 계열)
• 우리가 후보를 작성하면 후보 중 브라우저가 사용할 수 있는 폰트를 찾는다 -> 가장 먼저 작성한 폰트를 찾는다 -> 사용 못 하면 다음 폰트 찾기 -> 반복 -> 사용 가능한 폰트를 찾으면 그 뒤에 있는 후보는 무시한다. -> 후보 중에 사용가능한 폰트가 없다면 가장 뒤에 적힌 글꼴 계열에 맞는 폰트 중 사용 가능한 폰트를 화면에 출력한다. (글꼴 계열이 필수 작성인 이유)

 

[ color ]

• 글자 색상

[ text-align ]

문자의 정렬 방식

<값>

• 기본 값 : left (글자는 왼쪽 부터 써지니까)
• right
• center
• justify : 양쪽 정렬

 

[ text-decoration ]

문자 장식(선 추가)

<값>

• none : 장식 없음
• underline : 밑 줄
• line-through : 중앙선(취소선)

[ list-style ]

목록 스타일

<값>

• none : 목록 스타일 없음
• disc : 채워진 원
• circle : 빈 원 모양
• square : 채워진 사각형
• decimal : 1부터 시작하는 수
• " " 안에 이모지나 텍스트 입력 시 원하는 모양으로 목록 스타일 사용 가능