font와 text

CSS는 이 폰트(font)에 관한 다양한 기능을 제공합니다. 글꼴의 크기, 색, 정렬, 글꼴 변경, 두께, 행간 등 다양한 내용에 대한 속성을 지정할 수 있습니다

font

폰트는 여기 정리된 내용 이외에도 다양한 옵션이 제공됩니다

font-size

폰트의 크기 지정

p { font-size: 2.0em; }

font-style

기울어짐(italic)을 지정

p{ font-style: italic; } - normal / italic / oblique 중 지정

font-weight

폰트의 굵기 지정

• 값 : 100 ~ 900, normal / bold / lighter / bolder

p { font-weight: lighter; }

font family

font family는 폰트 여러 개를 묶어서 정의하는 속성입니다. 폰트가 해당 컴퓨터에 설치되어있지 않으면 적용되지않습니다

예) font-family: arial, verdana, "Helvetica Neue", serif;

사용하고자 하는 폰트들을 나열한 뒤 마지막은 글꼴계열(font family)로 마무리합니다

CSS의 대표적인 글꼴계열들은 다음과 같습니다

serif : 바탕체
sans-serif : 고딕체 - 대부분 고딕체
monospace : 고정너비글꼴 - 가로 폭이 동등하다
cursive : 필기체
fantasy : 장식 글꼴

폰트명이 한단어면 ', "로 감싸주지 않아도 됩니다

첫번째 폰트가 없다면 주어진 값들을 순서대로 이동하며 폰트를 적용합니다

글자가 깨지는 걸 막기위해 마지막은 대부분의 OS에 설치된 generic-family 폰트(Serif, Sans-serif, Mono space)를 지정하는게 일반적입니다

font

font는 일종의 단축 속성으로 그 순서는 다음과 같습니다. 필수 요소와 선택 요소로 구성되어 있습니다

font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory)

font: 2em "Open Sans", serif;
font: italic 2em "Open Sans", sans-serif;

text

text는 여기 정리된 내용 이외에도 다양한 변형이 가능합니다

color

색 지정

text-align

문자의 수평 정렬 정의

inline요소 같은 경우는 너비가 없기 때문에 정렬이 불가능합니다

• 값 : left, right, center, justify
  
  

text-decoration

문자의 장식선 유무 및 위치 설정

• 값 : none, underline, line-thoruough...

a 요소의 underline을 제거할 때 사용되기도 합니다

text-indent

들여 쓰기, 내어쓰기 가능 - 음수도 가능

line-height

행간(텍스트 높이) 지정

• 값 : 폰트 사이즈의 n배수(32px), %(200%), 배수(배율을 단위 없이 숫자만, 2)

line-height는 지정하면 텍스트가 세로의 가운데에 위치하려는 성질을 가져서 텍스트 수직정렬에도 사용됩니다

예) 감싸는 요소의 height와 텍스트 요소의 line-height를 일치시키면 수직 중앙 정렬됨

letter-spacing

글자 사이의 간격을 지정

letter-spacing: 2px;
letter-spacing: -1px;

white-space 속성

white space는 공백(space), 들여쓰기(tab), 줄바꿈(line break)을 뜻하는 데, html에서는 공백, 들여쓰기는 최대 1번까지만 인식되고 줄바꿈은 무시됩니다

이런 동작을 제어하기위해 사용되는 속성이 white-space입니다

text-overflow

부모 영역을 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트의 처리 방법을 정의합니다

단 몇가지 조건이 있어야 사용 가능한 속성입니다

• 너비를 가지고 있어야합니다/block요소 - overflow가 일어나기위해
• 자동 줄바꿈을 방지하기위해 white-space 속성의 값이 nowrap이여야 합니다
• overflow 속성의 값이 visible 이외의 값이여아합니다

그러면 이제 다음과 같은 값을 설정할 수 있게 됩니다

word-wrap

사이트 링크(https://poiemaweb.com/css3-font-text)처럼 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리를 위해 사용됩니다

p { word-wrap: break-word; }

word-break

word-wrap과 비슷하게 단어가 길어 영역을 벗어난 텍스트의 처리를 정의합니다

word-wrap은 단어를 고려해서(,.- 같은 문자를 참고해서) 줄을 바꾸지만, word-break: break-all;은 이런 과정 없이 강제로 부모 요소에 맞춰 개행합니다

p {word-break: break-all;}

웹 폰트

웹 브라우저 자체가 로컬 프로그램이기 때문에, 기존에는 사용자가 가지고 있는 종류의 폰트만 사용 가능 했습니다

하지만 폰트가 웹 디자인에서 차지하는 중요한 요소가되면서 어디서나 폰트를 적용하고자 하는 필요가 생겼고 그래서 나온 방법이 웹 폰트입니다

사용자가 가지고 있지 않은 폰트를 서버에서 다운받아 웹 페이지에서 사용할 수 있게 하는 방법입니다

다만 이럴 경우 페이지 로드에 필요한 시간, 비용이 증가합니다

CDN 방식

CDN링크를 사용해 폰트를 가져올 수도 있습니다

구글에서 제공하는 구글 폰트에서 원하는 폰트를 선택하고 다음과 같은 구문으로 가져올 수 있습니다

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

* { font-family: 'Nanum Gothic', sans-serif; }

@import의 url 함수는 서버/지정된 url에서 파일을 찾아 다운로드합니다

서버 폰트 로딩 방식

CDN은 간편하지만 로컬에 비해서는 로딩 속도가 느린 단점이 있습니다. 만약 여러개의 폰트를 이런 방식으로 사용하면 더욱 느려질 것입니다

또한 CDN을 제공하지 않는 폰트는 사용할 수 없다는 단점이 있습니다

이런 단점을 극복하기위해 서버 폰트 로딩 방식이 만들어 졌습니다

@font-face 규칙으로 폰트를 등록하고 font-family 속성으로 폰트를 선택하여 사용합니다

@font-face {
  font-family: myFontName;
  src: url("myFont.woff");
}

* { font-family: myFontName, sans-serif; }

서버에 폰트 파일을 올려두고, 요청이 오면 클라이언트로 전송해줍니다

다만 이 방법은 브라우저별로 지원하는 폰트 파일 형식이 다르기 때문에 별도의 설정을 해줘야합니다

@font-face {
  font-family:"Nanum Gothic";
  src:url("NanumGothic.eot"); /* IE 9 호환성 보기 모드 대응 */
  src:local("☺"),             /* local font 사용 방지. 생략 가능 */
      url("NanumGothic.eot?#iefix") format('embedded-opentype'), /* IE 6~8 */
      url("NanumGothic.woff") format('woff'); /* 표준 브라우저 */
}

* { font-family: "Nanum Gothic", sans-serif; }

영어와 한글을 섞어서 사용할 경우 영어 -> 한글 순으로 지정해야합니다. 그렇기 않으면 영문에 한글 폰트가 지정됩니다

출처 및 참고

https://www.wschools.com/css/default.asp
https://poiemaweb.com/css3-font-text
https://opentutorials.org/course/3086