CSS 폰트 관련 속성에 대해서 정리해보았다.

color

color : 요소의 글씨 및 글씨 장식의 전경색과 currentcolor의 값을 설정한다.

• color 값이 들어갈 자리에 currentcolor 값을 주면 부모로부터 색상을 상속받는다.

• 가장 대표적이며 거의 모든 웹사이트에서 빠지지 않고 등장한다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/color

font-size

font-size : 폰트의 크기를 지정한다.

• 단위 혹은 키워드로 사용된다.

• 일반적으로 px, em, % 등의 단위를 사용한다.
  --> 별도의 지정이 없을 경우 대부분 브라우저의 기본값은 16px = 1em 이다.

• small, medium, large 같은 키워드도 존재하나, 잘 사용하지 않는다.
  ✅ 정확한 크기를 지정해주는 것이 일반적으로 좋다.

Example

.text {
  font-size: 12px;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/font-size

font-style

font-style : 폰트 글씨체를 지정한다.

• 기본값은 normal 이다.

• 일반적으로 이탤릭체를 만들기 위해 많이 사용된다.

• 이탤릭체를 위해서는 italic 또는 oblique 를 사용한다.

• <em> 혹은 <i> 태그를 사용해서도 이탤릭체를 출력할 수 있지만,
  태그를 사용하는 것은 어디까지나 강세를 주기 위함이므로
  단순 스타일링이 목적이라면 CSS style 을 사용하자!

Example

.text {
  font-style: italic;
}

🦊 MDN Link : https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

font-weight

font-weight : 폰트의 가중치(weight)나 굵기(boldness)를 명시한다.

• 기본값은 noraml = 400 이다.

• bold, lighter, bolder 와 같은 키워드,
  혹은 100 단위의 숫자로 지정한다.

• 폰트마다 지원하는 굵기의 정도가 약간씩 다를 수 있다.

• font-style 에서와 비슷한 맥락으로
  <strong> 태그로 글씨를 굵게 출력하는 것과는 의미가 다르다.

Example

.text {
  font-weight: bold;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/font-weight

font-family

font-family : 요소에 우선 순위가 지정된 font family 이름과
generic family 이름을 지정할 수 있게 해준다.

• generic family : 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해준다.
  ex) serif, sans-serif, monospace, ...

• font family 이름이 여러개 나열되어있으면 앞에서부터 차례대로
  현재 PC 에서 사용 가능한 폰트를 불러온다.
  --> 사용 가능한 폰트가 없을 경우 generic family 폰트를 불러온다.

Example

.text {
  font-family: 'Times New Roman', Times, serif;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/font-family

line-height

line-height : 줄 상자의 높이를 설정한다.

• 일반적으로 텍스트 줄 사이의 거리를 설정하는 데 사용된다.
  --> 폰트 크기의 위/아래로 여백을 준다.

• 기본값은 1.0 ~ 1.2 이다.
  --> 폰트가 만들어질 때 기본적으로 디자인된다.

• 폰트 크기가 동일해도 요소의 전체 높이는 다를 수 있다.

• 폰트의 종류에 따라 요소들의 높이가 뒤죽박죽 되는 현상을 막을 수 있다.

Example

p {
  line-height: 2.0;
}

🦊 MDN Link : https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

font (단축속성)

font : 폰트와 관련된 여러가지 속성들을 한줄로 묶어 표현한다.

• CSS shorthand (단축속성) 종류에 속한다.

• 다음 속성의 값을 포함해야 한다. --> 필수이다.
  <font-size>
<font-family>

• 다음 속성의 값을 포함할 수 있다. --> 필수는 아니다.
  <font-style>
<font-variant>
<font-weight>
<line-height>

• font : font-style font-weight font-size/line-height font-family
  순서로 작성해야 한다.

• ❗️ 개별속성을 먼저 작성했다고 해서 단축속성에서 빼먹으면 안된다!
  --> 개별로 선언한 스타일이 initial 로 돌아간다.

Example

.text {
  font: italic bold 20px/1.7 "Times New Roman", Times, serif;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/font

letter-spacing & word-spacing

• letter-spacing : 글자들 간의 간격을 지정한다.
• word-spacing : 단어들 간의 간격을 지정한다.

• 디폴트로 글꼴에 따라 적합한 여백이 정해져있다.
  --> 개발자가 임의로 지정하고싶을 때 사용한다.

• 너무 큰 값은 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로따로 보인다.

• 반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없다.

• 디폴트값에 선언해준 너비만큼 추가(+) 하는 방식으로 사용된다.
  --> 음수도 가능하다.

Example

.text {
  letter-spacing: 5px;
  word-spacing: -1px;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/letter-spacing

text-align

text-align : 블록 요소나 표의 칸 상자의 가로 정렬을 설정한다.

• 왼쪽, 오른쪽, 중앙 정렬 등의 속성이 있다.
  --> left, right, center, ...

• Block 요소에만 적용이 가능하다.

Example

.container {
  text-align: center;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/text-align

text-indent

text-indent : 들여쓰기를 설정한다.

• Block 요소에만 적용이 가능하다.

• px, %, em, ... 등의 단위를 사용하여 지정할 수 있다.
  ✅ % 단위는 브라우저 창의 크기에 따라 출력되는 모습이 유동적으로 변한다.

Example

.paragraph1 {
  text-indent: 30%;
}

.container {
  text-indent: 50px;
}

🦊 MDN Link : https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

text-decoration (단축속성)

text-decoration : 글씨의 장식(선) 색을 지정합니다.

• font 속성과 마찬가지로 각각의 속성을 개별적으로 선언 가능하지만,
  text-decoration 같은 경우는 일반적으로 단축속성이 더 많이 사용된다.

• CSS shorthand = 단축속성 = 한줄에 속성을 모두 선언한다.

• 이 속성은 다음 CSS 속성들의 약어이다.
  text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness

• line 속성에는 underline, overline, line-through, ... 등이 있다.
  --> 중복해서 사용할 수 있다.

• style 속성에는 solid, double, dotted, ... 등이 있다.

• 선언된 속성 외에 상속된 속성이 같이 적용된다.

• font 단축속성과는 다르게 선언 순서에 제한이 없다.
  --> 대신 같은 속성끼리는 붙어있어야 한다!

Example

span {
  text-decoration: line-through red 2px wavy;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/text-decoration

word-break

word-break : 텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 때 줄을 바꿀 지 결정한다.

• 기본값은 normal 이다.

• break-all = 오버플로(Overflow) 를 방지하기 위해 줄 바꿈이 발생할 수 있다.
  (한중일 텍스트 제외)

• keep-all = 한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않는다.
  비 CJK 텍스트에서는 normal과 동일하다.

Example

p[lang="en"] {
  word-break: break-all;
}

p[lang="ko"] {
  word-break: keep-all;
}

• 영어 문단은 자동 줄바꿈이 일어나고, 한글 문단은 원래 발생했던 자동 줄바꿈이 막힌다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/word-break

text-transform

text-transform : 한국어에는 적용되지 않는다.
문장의 대문자화, 소문자화, 단어 첫글자 대문자화와 같은 스타일을 지정한다.

• uppercase, lowercase, capitalize, ... 등의 속성이 있다.

• 실제 html 내용이 변경되는 것은 아니며, 눈에 보이는 스타일만 바뀔 뿐이다.

Example

p {
  text-transform: capitalize;
}

🦊 MDN Link : https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform