강의목표

• 텍스트의 스타일,폰트 조정법
• 텍스트의 위치 조정법

폰트 종류와 웹 폰트

• 크기, 종류, 형태

• font-family(폰트 종류)

  font-family: '폰트이름1' '폰트이름2';
  

  • 복수의 폰트를 적용하거나 하이픈이 들어간 폰트라면 작은 따음표로 묶어줘야한다.
  • 복수의 폰트를 지정해주는 이유 ⇒ 사용자가 해당 폰트가 없을 경우 다음 폰트를 적용한다.
    • 그래서 마지막 순번의 폰트는 기본 폰트를 넣어 폰트문제는 없도록 해야한다.
    • 일반 글꼴
      • sans-serif
      • serif
      • cursive
      • fantasy
      • monospace
  • 폰트 파일을 함께 업로드한 뒤, 업로드한 경로를 통해 원하는 폰트를 적용할 수 있다.
  • 혹은 웹폰트!

웹 폰트

• 링크를 통해 폰트를 불러오는 방식

• 구글폰트를 적용하는 예제다

  @import url('<https://fonts.googleapis.com/>
  css2?family=Nanum+Pen+Script&display=swap');
  h1 , p{
  	font-family: 'Nanum Pen Script', cursive;
  	color : blue;
  }
  

폰트의 크기와 형태

• font-style
  • normal(기본)
  • italic(기울인 스타일, 이텔릭체)
  • oblique(기울인 스타일, 일텔릭체 x)
• font-weight
  • 키워드나 숫자로 조절함
  • normal = 400
  • bold = 700
• font
  • 이 속성으로 한번에 설정 가능하다.
  • style,weight,size,family 순서로 한번에 작성 가능
  • style, weight는 생략 가능

텍스트 정렬

• text-align
  • 문장 정렬
  • left ⇒ 좌
  • center ⇒ 중앙
  • right ⇒ 우
  • justify ⇒ 양쪽 정렬
• line - height
  • 문장 간격 조절
  • 숫자를 값으로 받음
    • 숫자 같은 경우 간격 픽셀은 다음과 같이 계산된다.
      • 실제 간격 픽셀 값 = 기준 픽셀(font-size) * 숫자 값
    • 픽셀 값인 경우 그냥 딱 그 값 들어간다.
  • 참고로 문장 하단 끝과 끝 사이의 거리가 기준이 아니고 문장 마다 위 아래로 마진이 있어 마진의 크기를 조절해 준다고 생각하면 된다.
• letter-spcing
  • 자간 조절
  • px값을 받는다