HyunJun 기술 블로그

CSS Text Style(font-family, font-style, text-decoration, text-transform) 본문

CSS

CSS Text Style(font-family, font-style, text-decoration, text-transform)

공부 좋아 2023. 6. 4. 23:50
728x90
반응형

1. CSS Text 관련 속성

CSS에는 텍스트의 모양을 변경하거나 효과를 주기 위한 다양한 속성이 존재한다.

 

1) color, size, weight

  • color: 글자의 색상을 지정할 수 있다.
  • font-size: 글자의 크기를 지정할 수 있다.
    • 16px 등으로 사용 가능하며 rem은 반응형에서 많이 쓰이며 html의 font-size를 비율로 가지고 온다. 
      • 1일 경우 html의 font-size와 동일 2일 경우 2배이다.
  • font-weight: 글자의 굵기를 지정할 수 있다.
  /* 글자 색상 */
  color: crimson;
  font-size: 2rem;
  font-weight: 900; /* 글자 굵기, 최대값 900, 100 단위*/

 

2) 새로운 font 적용.

새로운 font를 적용할 수 있다. (font 같은 경우 상업적으로 이용할 시 저작권 확인을 잘 해야 한다.)

구글 폰트에들어가서 원하는 폰트를 선택한다.

 

원하는 폰트에 들어왔다면 오른쪽 위에 View selected families를 클릭한 후, 오른쪽 아래에 Select Regular 400을 클릭한다.

그럼 아래와 같이 선택한 폰트가 나오게 되는데, @import를 선택한 후, <style></style>내용을 복사한다.

그리고 사용하고자 하는 스타일 시트 안에서 불러오면 되고, 마찬가지로 font-family: font-family: "Kablammo", cursive; 부분을 복사하여 사용하고자 하는 선택자에 붙여 넣어준다.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      @import url("https://fonts.googleapis.com/css2?family=Kablammo&display=swap");

      .kablammo {
        font-family: "Kablammo", cursive;
      }
    </style>
  </head>
  <body>
    <p class="normal-text">normal text</p>
    <p class="kablammo">kablammo, 한글?</p>
  </body>
</html>

 

이때 kablammo는 영어 폰트이기 때문에 영어만 나오고 있다. (영어 대문자만 지원하는 것 같다.)

한글 폰트는 다른 폰트로 사용하려면 어떻게 해야 할까?

선택했던 kablammo를 "-"를 눌러 제거한다.

 

후에 아까처럼 한글 폰트를 찾아서 선택한다. (아래처럼 여러 굵기의 폰트를 제공하기도 함)

 

그 후, 같은 방식으로 일단 불러온다.

    <style>
      @import url("https://fonts.googleapis.com/css2?family=Kablammo&display=swap");

      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@900&display=swap");

      .kablammo {
        font-family: "Kablammo", cursive;
        font-family: "Noto Sans KR", sans-serif;
      }
    </style>

 

그러면 뒤쪽의 font-family 설정이 덮어쓰게 되어 kablammo 폰트는 적용이 안된다.

 

여러 가지의 폰트를 사용할 경우 아래처럼 적용해 주면 되는데

    <style>
      @import url("https://fonts.googleapis.com/css2?family=Kablammo&display=swap");

      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@900&display=swap");

      .kablammo {
        font-family: "Kablammo", "Noto Sans KR", cursive;
      }
    </style>

여기서 font-family는 "Kablammo" 폰트를 사용한다. -> 없으면 "Noto Sans KR"을 적용한다. 없으면 -> cursive(필기체)를 사용한다가 된다. 명시한 모든 폰트가 없을 경우 폰트를 지정하지 않았을 때와 같은 기본 폰트가 적용되게 된다.

 

3) font-style

  • 기울임꼴 등 글자 스타일을 지정해 줄 수 있다.
<!-- 브라우저 기본값 -->
<p style="font-style: normal">normal</p>
<!-- 부모 요소의 font-style 속성값을 상속받습니다. -->
<p style="font-style: inherit">inherit</p>
<!-- 이탤릭체, 기울임꼴입니다. -->
<p style="font-style: italic">italic</p>
<!-- 기울임꼴입니다. -->
<p style="font-style: oblique">oblique</p>

italic와 oblique의 차이는 italic의 경우 흘려 쓴 서체, italic체 그 자체를 의미하고, oblique는 기존 폰트를 단순히 기울이기만 하는 것이다.

 

4) text-align

글자를 정렬할 기준을 설정할 수 있다. start는 left, end는 right로도 설정 가능하다.

<p style="text-align: start">start(left) <br />test</p>
<p style="text-align: center">center <br />test</p>
<p style="text-align: end">end(right) <br />test</p>

 

5) text-decoration

텍스트에 다양한 데코레이션을 줄 수 있다.

<p style="text-decoration: underline solid red">test1</p>
<p style="text-decoration: overline dotted green">test2</p>
<p style="text-decoration: line-through dashed blue">test3</p>
<a href="" style="text-decoration-color: red">test4</a>

 

6) text-transform

영문 텍스트의 대소문자를 자동으로 지정해 줄 수 있다.

<p style="text-transform: uppercase">test</p>
<p style="text-transform: lowercase">TEST</p>
<p style="text-transform: capitalize">test</p>

7) 줄 간격

텍스트의 줄 간격과 관련해서 설정을 해줄 수 있다.

  letter-spacing: 20px; /* 문자와 문자 사이 간격 */
  line-height: 100px; /* 줄 간격 */
<p style="letter-spacing: 10px; line-height: 30px">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus corrupti veniam illo modi magnam iure, soluta cum! Veritatis similique quae
  est officia alias hic mollitia tempora, perspiciatis odit dolorum necessitatibus!
</p>

728x90
반응형
저작자표시 비영리 변경금지
'CSS' Related Articles more
Comments