CSS3 - Font & Text

이소라·2021년 6월 25일

1. font-size

font-size : 텍스트의 크기를 정의

<!DOCTYPE html>
<html>
  <head>
    <style>
      .font-size-40 { font-size: 40px; }
      .font-size-2x { font-size: 2.0em; }
      .font-size-150ps { font-size: 150%; }
      .font-size-large { font-size: large; }
    </style>
  </head>
  <body>
    <p>default font size: 16px</p>
    <p class="font-size-40">font-size: 40px</p>
    <p class="font-size-2x">font-size: 2.0em</p>
    <p class="font-size-150%">font-size: 150%</p>
    <p class="font-size-large">font-size: large</p>
  </body>
</html>

2. font-family

font-family: 폰트를 지정, 컴퓨터에 해당 폰트가 없으면 적용 X
폰트를 여러 개 지정 가능
- 첫 번째 지정한 폰트가 없으면, 다음에 지정된 폰트를 적용
- 마지막에 지정하는 폰트는 대부분의 OS에 설치되어 있는 generic-family 폰트 (Serif, Sans-serif, Mono space)
폰트명을 따옴표로 감싸줌 (폰트명이 한 단어일 경우, 안해도 됨)

<!DOCTYPE html>
<html>
  <head>
    <style>
      .serif {
      	font-family: "Time New Roman font", Time, Serif;
      }
      .sans-serif {
      	font-family: Arial, Helvetica, sans-serif;
      }
      .monospace {
      	font-family: "Courier New", Courier, monospace
      }
    </style>
  </head>
  <body>
    <h1>font-family</h1>
    <p class="serif">Time New Roman font</p>
    <p class="sans-serif">Arial font</p>
    <p class="monospace">Courier New font</p>
  </body>
</html>

3. font-style / font-weight

font-style : 이탤릭체 지정 (normal/ italic/ oblique)
font-weight : 폰트 굵기 지정 (100 ~ 900 or normal/ bold / lighter/ bolder)

<!DOCTYPE html>
<html>
  <head>
    <style>
      p { font-size: 2.0em; }
      
      .italic {
      	font-style: italic;
      }
      .light {
      	font-weight: lighter;
      }
      .thick {
      	font-weight: bold;
      }
      .thicker {
      	font-weight: 900;
      }
    </style>
  </head>
  <body>
    <p>normal style</p>
    <p class="italic">font-style: italic</p>
    <p class="light">font-weight: lighter</p>
    <p class="thick">font-weight: bold</p>
    <p class="thicker">font-weight: 900</p>
  </body>
</html>

font shorthand

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

font-variant : small-caps;
소문자를 대문자로 만듬 (단, 크기는 대문자보다 작음)

/* size | family */
font: 2em "Open Sans" , serif;

/* style | size | family */
font: italic 2m "Open Sans", sans-serif;

/* style | variant |  weight | size/line-height | family*/
font: italic small-caps bolder 16px/1.2 monospace;

/* style | variant |  weight | size/line-height | family*/
font: italic small-caps bolder 16px/3 cursive;

5. line-height

line-height : 텍스트의 높이를 지정

<!DOCTYPE html>
<html>
  <head>
    <style>
      .small {
      	line-height: 70%; /* 16px * 70% */
      }
      .big {
      	line-height: 1.2; /* 16px * 1.2 */
      }
      
      .lh-3x {
      	line-height: 3.0; /* 16px * 3 */
      }
    </style>
  </head>
  <body>
    <p>
      default line-height<br>
      default line-height<br>
      대부분의 브라우저의 default line-height은 약 110% ~ 200%<br>
    </p>
    
    <p class="small">
      line-height: 70%<br>
      line-height: 70%<br>
    </p>
    
    <p class="big">
      line-height: 1.2<br>
      line-height: 1.2<br>
    </p>
    
    <p class="lh-3x">
      line-height: 3.0<br>
      line-height: 3.0<br>
    </p>
  </body>
</html>

line-height은 텍스트 수직 정렬에도 응용되어 사용
수직 중앙 정렬 예제
: a 요소의 line-height 값과 a 요소를 감싸는 div 요소의 line-height값을 일치시킴

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        width: 150px;
        height: 70px;
        background-color: #FF6A00;
        border-radius: 30px;
        box-shadow: 5px 5px 5px #A9A9A9;
      }
      
      .button > a {
      display: block;
      font: italic bold 2em/70px Arial, Helvetica, sans-serif;
      text-decoration: none;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="button">
      <a href="#">Click</a>
    </div>
  </body>
</html>

6. letter-spacing

letter-spacing : 글자 사이의 간격을 지정

<!DOCTYPE html>
<html>
  <head>
    <style>
      .loose {
      	letter-spacing: 2px;
      }
      
      .tight {
      	letter-spacing: -1px;
      }
    </style>
  </head>
  <body>
    <p>The letter-spacing property increases or decreases the space between characters in a text.</p>
    <p class="loose">The letter-spacing property increases or decreases the space between characters in a text.</p>
    <p class="tight">The letter-spacing property increases or decreases the space between characters in a text.</p>
  </body>
</html>

7. text-align

text-align : 텍스트의 수평 정렬을 지정

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 { text-align: center; }
      h3 { text-align: right; }
      p.left { text-align: right; }
      p.justify { text-align: justify; } /* Stretches the lines so that each line has equal width */
      a { text-align: center; }
    </style>
  </head>
  <body>
    <h1>text-align</h1>
    <h3>2021.06.25</h3>
    
    <p class="left">The text-align property specifies the horizontal alignment of text in an element. 
      left : aligns the text to the left
      right : aligns the text to the right
      center : centers the text
      justify : stretches the lines so that each line has equal width
      initial : sets this property to its default value
      inherit : inherits this property from its parent element
    </p>
    
    <p class="justify">The text-align property specifies the horizontal alignment of text in an element. 
      left : aligns the text to the left
      right : aligns the text to the right
      center : centers the text
      justify : stretches the lines so that each line has equal width
      initial : sets this property to its default value
      inherit : inherits this property from its parent element</p>
    
    <a href="#">Reference</a>
  </body>
</html>

a 요소가 inline 요소이므로, a 요소에 대한 중앙 정렬 적용 안 됨
a 요소에 display: block;을 지정하면, 중앙 정렬 적용 가능

8. text-decoration

text-decoration
- 링크 underline을 제거 가능
- 텍스트에 underline, overline, line-through를 추가 가능

<!DOCTYPE html>
<html>
  <head>
    <style>
      a { text-decoration: none; }
      
      p:nth-of-type(1) { text-decoration: overline; }
      p:nth-of-type(2) { text-decoration: line-through; }
      p:nth-of-type(3) { text-decoration: underline; }
    </style>
  </head>
  <body>
    <a href="#">text-decoration: none</a>
    
    <p>text-decoration: overline</p>
    <p>text-decoration: line-through</p>
    <p>text-decoration: underline</p>
  </body>
</html>

9. white-space

white space : 공백(space), 들여쓰기(tab), 줄바꿈(line break)를 의미함
html에서 기본적으로 연속된 공백(space), 들여쓰기(tab)는 1번만 실행됨
text는 부모의 가로 영역을 벗어나지 않고 자동 줄바꿈(wrap)됨

property 값	line break	sapce/tab	wrapping
normal	무시	1번만 반영	O
nowrap	무시	1번만 반영	X
pre	반영	그대로 반영	X
pre-wrap	반영	그대로 반영	O
pre-line	반영	1번만 반영	O

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        padding: 10px;
        margin: 40px;
        border-radius: 6px;
        border-color: gray;
        border-style: dotted;
      }
      
      .normal { white-space : normal; }
      .nowrap { white-space: nowrap; }
      .pre { white-space: pre; }
      .pre-wrap { white-space: pre-wrap; }
      .pre-line { white-space: pre-line; }
    </style>
  </head>
  <body>
    <h1>white-space</h1>
    
    <div class="normal"><h3>normal</h3>white-space
      This property specifies how white-space inside an element is handled.</div>

    <div class="nowrap"><h3>nowrap</h3>white-space
      This property specifies how white-space inside an element is handled.</div>

    <div class="pre"><h3>pre</h3>white-space
      This property specifies how white-space inside an element is handled.</div>

    <div class="pre-wrap"><h3>pre-wrap</h3>white-space
      This property specifies how white-space inside an element is handled.</div>

    <div class="pre-line"><h3>pre-line</h3>white-space
      This property specifies how white-space inside an element is handled.</div>
  </body>
</html>

float 대신 inline-block을 사용한 가로 정렬 예제

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA compatible" content="ie=edge">
    <title>Infinite looping Crousel Slider</title>
    <style>
      @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
      
      body {
      	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      	color: #58666e;
      	background-color: #f0f3f4;
      }
      .carousel-view {
        /* 자식 컨텐츠 너비에 맞춤 */
        display: inline-block;
        position: relative; /* the element is positioned relative to its normal position */
        margin: 0 auto;
        border: 1px dotted red;
      }
      
      .carousel-container {
        /* 자식 컨텐츠의 줄바꿈을 무시하여 1줄로 가로 정렬함 */
        white-space: nowrap;
        /* inline-block 레벨 요소 뒤에 공백 (엔터, 스페이스)가 있는 경우, 정의하지 않은 space(4px)가 자동 저장됨, 이를 회피하는 방법 */
        font-size: 0;
        margin: 0;
        padding: 0;
      }
      
      .carousel-item {
        display: inline-block;
        list-style: none; /*list-style : set all the list style at once */
        padding: 5px;
      }
      
      .carousel-item:last-child {
      	margin-right: 0;
      }
      
      .carousel-control {
        position: absolute; /* The element is positioned relative to its first positioned ancestor element */
        top: 50%;
        transform: tsranslateY(-50%); /* translation using only the value for Y-axis */
        font-size: 2em;
        color: #fff;
        background-color: transparent;
        border-color: transparent;
        cursor: pointer;
        z-index: 99; /* an element with greater stack order is always in front of an element of with a lower stack order */
      }
      
      carousel-control:focus {
      	outline: none;
      }
      
      carousel-control.prev {
      	left: 0;
      }
      
      carousel-control.next {
      	right: 0;
      }
    </style>
  </head>
  <body>
    <div id="carousel" class="carousel-view">
      <button class="carousel-control prev">&laquo;</button> 
      /* &laquo : double left angle quote */
      <ul class="carousel-container">
        <li class="carousel-item">
          <a href="#">
            <img src="http://via.placeholder.com/400x150/3498db/fff&text=1">
          </a>
        </li>
        <li class="carousel-item">
          <a href="#">
            <img src="http://via.placeholder.com/400x150/3498db/fff&text=2">
          </a>
        </li>
        <li class="carousel-item">
          <a href="#">
            <img src="http://via.placeholder.com/400x150/3498db/fff&text=3">
          </a>
        </li>
      </ul>
      <button class="carousel-control next">&raquo;</button> 
      /* &raquo : double right angle quote */
    </div>
  </body>
</html>

11. word-wrap

word-wrap : 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트 처리 방법

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      div {
        width: 150px;
        height: 150px;
        padding: 10px;
        margin: 40px;
        border-radius: 6px;
        border-color: gray;
        border-style: dotted;
      }
      
      .word-wrap { word-wrap: break-word; }
    </style>
  </head>
  <body>
    <h1>word-wrap</h1>
    
    <div>
      Floccinaucinihilipilification https://poiemaweb.com/css3-font-text
    </div>
    
    <div class="word-wrap">
      Floccinaucinihilipilification https://poiemaweb.com/css3-font-text
    </div>
  </body>
</html>

12. word-break

word-break : 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트 처리 방법
word-wrap은 단어를 어느정도 고려해서 개행하지만, word-break: break-all;는 단어를 고려하지 않고 부모 영역에 맞춰서 강제 개행함

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      div {
        width: 150px;
        height: 150px;
        padding: 10px;
        margin: 40px;
        border-radius: 6px;
        border-color: gray;
        border-style: dotted;
      }
      
      .word-wrap { word-wrap: break-word; }
      .word-break { word-break: break-all; }
    </style>
  </head>
  <body>
    <h1>word-wrap</h1>
    
    <div>
      Floccinaucinihilipilification https://poiemaweb.com/css3-font-text
    </div>
    
    <div class="word-wrap">
      Floccinaucinihilipilification https://poiemaweb.com/css3-font-text
    </div>
    
    <div class="word-break">
      Floccinaucinihilipilification https://poiemaweb.com/css3-font-text
    </div>
  </body>
</html>