[CSS]폰트 관련 속성

font-size

• 요소의 폰트 사이즈를 변경해 줄 수 있는 속성입니다.

<div>
  <p class="text">
	example text <!-- font-size 12px! -->
  </p>
</div>

.text {
  font-size: 12px;
}

font-style

• 요소의 폰트 스타일(이탤릭체)를 변경해 줄 수 있는 속성입니다.
• italic의 경우 필기체로 표시하는 폰트도 있습니다.
• 상속받은 값을 무시하고 싶을 때는 font-style: normal을 사용합니다.

<div>
  <p class="default">
    Hello world!  <!-- 이탤릭체! -->
  </p>
  <p class="text">
	example text <!-- 이탤릭체! -->
  </p>
</div>

.default {
  font-style: oblique;
}
.text {
  font-style: italic;
}

💡 HTML 태그 중에 <em>도 이탤릭체로 표현이 되나 강조를 하기 위함이지 스타일적으로 이탤릭체를 쓰기 위함이 아닙니다.

font-weight

• 요소의 폰트의 굵기를 설정할 수 있는 속성입니다.

<div>
  <p class="default">
    Hello world! <!-- normal! -->
  </p>
  <p class="text">
	example text <!-- bold! -->
  </p>
</div>

.default {
  font-weight: 400; <!-- normal -->
}
.text {
  font-weight: bold; <!-- 굵게 표시(700) -->
}

font-family

• 요소의 글꼴을 선택할 수 있는 속성입니다.
• 기본 글꼴은 브라우저 혹은 OS에 의해 정해집니다.

<div>
  <p class="default">
    Hello world!
  </p>
  <p class="text">
	example text
  </p>
</div>

.default {
  /* 우선순위는 앞에 있으며 출력할 수 없는 경우 뒤의 폰트를 출력합니다. */
  font-family: Verdana, Arial, Helvetica;
}
.text {
  /* 두 단어 이상으로 이루어진 경우에는 ""로 묶어주는 경우가 많습니다. */
  font-family: "Lucida Console"
}

line-height

• 줄의 높이를 설정해 주는 속성입니다.
  line-height mdn

<div>
  <p class="default">
    Lorem ipsum dolor<br>
    sit amet
  </p>
  <p class="text">
    Lorem ipsum dolor<br>
    sit amet
  </p>
</div>

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

.text {
  font-family: 'Franklin Gothic Medium'
}

font, shorthand (단축 속성)

• font 관련된 속성들을 한 줄로 표현할 수 있는데 shorthand라 부릅니다.
• 필수: font-size, font-family
• 선택: font-style, font-variant, font-weight, line-height
• font-style, font-weight는 font-size보다 앞에 있어야 합니다.
• line-height는 font-size/line-height 형태로 작성해야 합니다.
• font-family는 마지막에 있어야 합니다.

.text {
  font-size: 20px;
  line-height: 1.7;
  font-style: italic;
  font-weight: 100;
  font-family: 'Times New Roman', Times, serif;
  /* 위와 아래는 동일합니다. */
  font: italic 100 20px/1.7, 'Times New Roman', Times, serif
}

.text {
  font-style: italic;
  /* font 내부에 font-weight만 적고 font-style을 따로 적으면 적용이 되지 않습니다. */
  font: 100 20px/1.7, 'Times New Roman', Times, serif
}

letter-spacing

• 글자간의 간격을 설정해 줄 수 있는 속성입니다.

word-spacing

• 단어간의 간격을 설정해 줄 수 있는 속성입니다.

text-align

• 텍스트를 정렬하는 방법을 명시하는 속성입니다.
• span 속성은 사용할 수 없고, 길이가 어느 정도 있는 div나 p같은 태그는 가능합니다.

.text {
  text-align: left; /* center, right */;
}

text-indent

• 텍스트를 들여쓰기하는 방법을 명시하는 속성입니다.
• 상속이 가능합니다.

text-decoration

• 텍스트 위, 중간, 아래에 선을 만들 수 있는 속성입니다.
• 속성값을 여러개 사용하여 여러 선을 만들 수 있습니다.

word-break

• 텍스트가 자신의 컨텐츠박스 밖으로 오버플로 할 때 줄을 바꿀지 지정하는 속성입니다.
• 값에 따라서 동양권 언어와 서양권 언어가 다르게 동작합니다.

text-transform

• 대문자, 소문자, 앞글자만 대문자 등 텍스트의 형태를 바꿀 수 있는 속성입니다.
• 사용할 수 있는 언어가 한정적이라 한국어에는 적용되지 않는 속성입니다.
• 표시되는 글자만 달라질뿐 HTML에 작성한 글자가 바뀌는 것은 아닙니다.