본문 바로가기
HTML | CSS/CODEIT;

CSS 핵심 개념 : 텍스트 스타일링 정리

by ♡˖GYURI˖♡ 2023. 8. 28.
728x90

글자 색 color

  <span class="red">빨강</span>
  <span class="orange">주황</span>
  <span class="yellow">노랑</span>
  .red {
    color: #F23030;
  }

  .orange {
    color: #F28705;
  }

  .yellow {
    color: #F2CB05;
  }

 

글자 크기 font-size

 <span class="large">크게</span>
 <span class="medium">중간</span>
 <span class="small">작게</span>
 .large {
    font-size: 24px;
  }

  .medium {
    font-size:  16px; 
  }

  .small {
    font-size: 8px;
  }

 

글꼴 font-family

  <html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins&display=swap" rel="stylesheet">
  </head>
  <body>
    <p id="with-poppins">Poppins 있는 노토 산스 케이알</p>
    <p id="without-poppins">Poppins 없는 노토 산스 케이알</p>
  </body>
  </html>
  #with-poppins {
    font-family: Poppins, "Noto Sans KR", sans-serif;
  }

  #without-poppins {
    font-family: "Noto Sans KR", sans-serif;
  }

 

글자 굵기 font-weight

  <span class="bold">굵게</span>
  <span class="regular">중간</span>
  <span class="light">얇게</span>
  .bold {
    font-weight: 600;
  }

  .regular {
    font-weight: 400; 
  }

  .light {
    font-weight: 200;
  }

 

줄 높이 line-height

줄과 줄 사이의 간격을 조절할 때 CSS에서는 줄의 높이로 조절함

줄 높이의 값인 line-height는 단위 없이 쓰는 글자 크기에 상대적인 값임

예를 들어서 font-size가 16px이라면 line-height: 1은 16px * 1 = 16px이 되고, line-heigh: 1.5는 16px * 1.5 = 24px이 되는 식임

  <p class="loose">
    넓게<br>
    넓게<br>
    넓게
  </p>
  <p class="regular">
    보통<br>
    보통<br>
    보통
  </p>
  <p class="tight">
    좁게<br>
    좁게<br>
    좁게
  </p>
  .loose {
    font-size: 16px;
    line-height: 1.7; /* 16px * 1.7 = 27.2px */
  }

  .regular {
    font-size: 16px;
    line-height: 1.5; /* 16px * 1.5 = 24px */
  }

  .tight {
    font-size: 16px;
    line-height: 1; /* 16px * 1 = 16px */
  }

 

텍스트 꾸미기 text-decoration

텍스트에 밑줄을 넣거나, 취소선을 넣거나 하는 데 사용하는 속성

속성 값으로는 none, underline, line-through 등이 있음

이 중에서도 none은 <a> 태그에 기본으로 들어 간 밑줄을 없애는 데 많이 사용함

그 외에 underline도 많이 쓰고, 가끔 line-through를 사용하기도 함

  <a href="https://codeit.kr">
    링크
  </a>
  <br>
  <a class="none" href="https://codeit.kr">
    밑줄 없는 링크
  </a>
  <br>
  <span class="underline">
    밑줄
  </span>
  <br>
  <span class="line-through">
    취소선
  </span>
 .none {
    text-decoration: none;
  }

  .underline {
    text-decoration: underline;
  }

  .line-through {
    text-decoration: line-through;
  }