[CSS] 03

텍스트 표현

글꼴 관련 스타일

• 글꼴을 지정하는 font-family 속성
  웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다. 글꼴이 없을 경우를 대비하여 두번째, 세번째 글꼴까지 지정하기도 한다. 이때 쉼표로 글꼴을 구분할 수 있다.
  body 태그 스타일에서 한 번 정의하면 문서 전체에 적용된다.

body { font-family: "맑은 고딕", 돋움, 굴림 }

+텍스트 글꼴을 지정할 때 맑은 고딕과 같이 두 단어 이상으로 된 글꼴 이름은 한 덩어리라는 것을 알 수 있도록 큰 따옴표로 묶는다.

• 글자 크기를 지정하는 font-size 속성
  글자 크기의 단위는 px(픽셀)이나 pt(포인트) 등으로 지정할 수 있고 백분율을 사용할 수도 있다.

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

• 이탤릭체로 글자를 표시하는 font-style 속성
  기울어진 글자를 표시하고자 할때 사용한다.

font-style: italic

• 글자 굵기를 지정하는 font-weight 속성
  미리 만들어진 예약어나 숫잣값을 사용해 굵기를 지정할 수 있다.
  100~900 사이에서 400은 normal, 700은 bold에 해당한다.

font-weight: normal

웹 폰트 사용하기

• 웹 폰트
  웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야 한다. 즉 기존에 가지고 있던 웹 폰트를 사용했다면 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드해야 한다.
  웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 다운로드된다. 결국 사용자 시스템에 없는 글꼴이더라도 웹 제작자가 의도한 대로 텍스트를 보여줄 수 있다.

• 웹 폰트 업로드하고 사용하기
  컴퓨터에서 사용하는 글꼴은 트루타입(TrueType)이고 파일 확장자는 *.ttf이다. 하지만 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기에 적절하지 않기 때문에 EOT, WOFF, WOFF2와 같은 글꼴을 사용한다.

• 구글 폰트 사용하기

1. 구글 폰트 사이트에 접속
2. 적용할 글씨체를 선택 후 [+ Select this style] 클릭
3. [@import] 속성의 코드를 각각 복사하여 style 태그 다음과 요소에 각각 붙여 넣기

두가지 폰트를 적용한 화면이다.

텍스트 관련 스타일

• 글자색을 지정하는 color 속성
  웹 문서에서 텍스트의 글자색을 바꿀 때는 color 속성을 사용한다.
  color를 사용할 수 있는 속성값은 16진수나 rgb, hsl 또는 색상 이름이다.
  비쥬얼 스튜디오를 사용하면 색상표를 사용할 수 있어 색상을 지정하기 편리하다.

• 텍스트를 정렬하는 text-align 속성
  start: 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다.
  end: 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다.
  left: 왼쪽에 맞추어 문단을 정렬한다.
  right: 오른쪽에 맞추어 문단을 정렬한다.
  center: 가운데에 맞추어 문단을 정렬한다.
  justify: 양쪽에 맞추어 문단을 정렬한다.
  match-parent: 부모 요소를 따라 문단을 정렬한다.

p {
text-align: center;
}

• 줄 간격을 조절하는 line-height 속성
  줄 간격을 원하는 만큼 조절할 수 있다.

p { font-size: 12px; line-height: 24px; }