'텍스트 스타일 지정' 태그의 글 목록

텍스트 스타일 지정

[CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용 2024.03.23

[CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용

리버 River 2024. 3. 23. 21:38

2024. 3. 23. 21:38

1. 글꼴 관련 스타일

font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

🍒 font-family : 웹 문서에서 사용할 글꼴을 지정

➡️ 2개 이상 지정할 때 이름 사이에 쉼표(,)를 넣어 구분

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

🍒 font-size : 글자 크기 지정. 단위는 px(픽셀) 이나 pt(포인트) 등으로 지정할 수 있고 백분율도 가능

키워드 사용하여 글자 크기 지정

xx-small < x-small < small < medium < large < x-large < xx-large

단위 사용하여 글자 크기 지정
1em = 16px, 12pt

em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
rem : 문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
ex : 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정
px : 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정
pt : 포인트라고 하며, 일반 문서에 많이 사용

font-style: normal | italic | oblique

🍒 font-style : 글자를 이탤릭체로 표시할 때 사용

font-weight: normal | bold | bolder | lighter | 100 | ... | 900

🍒 font-weight : 글자 굵기를 지정. 100~900사이에서 400은 normal, 700은 bold에 해당

2. 웹 폰트 사용

웹 폰트 업로드하고 사용하기

🍒 컴퓨터에서 사용하는 글꼴은 트루타입(TrueType)이고 파일 확장자는 *.ttf

▶️ 파일 크기가 커서 웹에서 사용하기엔 적절하지 x

🍒 웹에 적합한 글꼴 : EOT embedded open type / WOFF web open font format

@font-face {
    font-family: <글꼴 이름>; <!-- 글꼴 파일 이름과 같은 이름으로 사용 -->
    src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ....]; <!-- 글꼴 파일의 경로 -->
    }

⚡️ local()문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인해야 한다.

@import 방식

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

        h1 {
                font-family: "Nanum Pen Script", cursive;
                font-weight: 400;
                font-style: normal;
            }

    </style>
</head>
<body>

<h1>안녕하세요~</h1>

</body>

link 방식

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        /* link 방식 적용. Nanum Brush Script 폰트 적용 */
        * {
            padding: 0;
            margin: 0;
        }

        p {
            margin: 40px;
        }

        .test {
            font-family: "Nanum Pen Script", cursive;
            font-weight: 400;
            font-style: normal;
        }

    </style>
</head>

3. 텍스트 관련 스타일

1) 글자색 지정하는 color 속성

color: <색상>

hsl과 hsla

· hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말

· hsla는 hsl에 alpha(불투명도)를 추가한 것을 의미

<style>
  h1 { 
    color:#0000ff;   /* 16진수 표기법 */
  } 
  p {
    color:green;  /* 색상 이름 */
  }
  .accent {
    color:hsl(0, 100%, 50%);  /* hsl 표기법 */
    font-weight:bold;
  }
</style>

rgb와 rgba로 표현하는 방법

· rgb는 red, green, blue의 줄임말

· 하나도 섞이지 않았을 때는 0으로 표시, 가득 섞였을 때는 255로 표시

· rgba에서 맨 끝의 a(alpha)는 불투명도 값을 나타내며 0~1의 값 중에서 사용할 수 있다.

<!--파란색 지정 -->
h1 { color: rgb(0, 0, 255); }

2) 텍스트 정렬하는 text-align 속성

text-align: start | end | left | right | center | justify | match-parent

종류	설명
start	현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬
end	현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬
left	왼쪽에 맞추어 문단 정렬
right	오른쪽에 맞추어 문단 정렬
center	가운데에 맞추어 문단 정렬
justify	양쪽에 맞추어 문단 정렬
match-parent	부모 요소를 따라 문단 정렬

🍒 왼쪽 정렬이 기본값. 양쪽 정렬과의 차이는 왼쪽 정렬에서는 오른쪽에 여백이 생기지만 양쪽 정렬에서는 여백이 없다.

4) 줄 간격을 조절하는 line-height 속성

🍒 line-height 속성을 이용하면 줄 간격을 원하는 만큼 조절할 수 있다.

🍒 텍스트를 세로 가운데 정렬할 때 height 값과 똑같이 추가하면 된다.

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

5) 텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

🍒 텍스트에 밑줄을 긋거나 취소선을 표시하는 속성

ex. 하이퍼링크 적용하면 기본적으로 밑줄이 생김

<p style="text-decoration:none">none</p>
<p style="text-decoration:underline">underline</p>
<p style="text-decoration:overline">overline</p>

6) 텍스트에 그림자 효과를 추가하는 text-shadow 속성

text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

<가로 거리> : 텍스트로부터 그림자까지의 가로 거리로 필수 속성.
양수값은 오른쪽, 음수값은 왼쪽
<세로 거리> : 텍스트로부터 그림자까지의 세로 거리로 필수 속성.
양수값은 아래쪽, 음수값은 위쪽
<번짐 정도> : 그림자가 번지는 정도. 양수값은 모든 방향으로 퍼짐, 음수값은 모든 방향으로 축소
<색상> : 그림자 색상을 지정

7) 텍스트의 대소 문자를 변환하는 text-transform 속성

👾 capitalize : 첫 번째 글자를 대문자로 변환
👾 uppercase : 모든 글자를 대문자로 변환
👾 lowercase : 모든 글자를 소문자로 변환
👾 full-with : 가능한 한 모든 문자를 전각 문자로 변환

8) 글자 간격을 조절하는 letter-spacing, word-spacing 속성

🍒 letter-spacing 속성은 글자와 글자 사이의 간격을 조절

🍒 word-spacing 속성은 단어와 단어 사이 간격을 조절

<head>
  <style>  
    p {
      font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      font-size:80px;
      text-shadow:3px 3px 1px #ccc;  /* 오른쪽 아래로 파란색 그림자 */
    }
    .spacing1 {
      letter-spacing:0.2em;  /* 글자 간격 0.2em */
    }
    .spacing2 {
      letter-spacing:0.5em;  /* 글자 간격 0.5em */
    }      
  </style>
</head>
<body>
  <p>CSS</p> 
  <p class="spacing1">CSS</p>
  <p class="spacing2">CSS</p>
</body>

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] position 속성, z-index (1)	2024.03.25
[CSS] 목록 스타일, 표 스타일 (1)	2024.03.23
[CSS] 배경 이미지 지정과 속성 (0)	2024.03.22
[CSS] 고급 선택자 \| 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소 (0)	2024.03.21
[CSS] 수직 중앙 정렬 방법, overflow와 scroll (0)	2024.03.21

ID_ allriver