[HTML+CSS] 텍스트 스타일 : 글자 색, 간격, 공백 속성 정리

[HTML+CSS] 텍스트 스타일 : 글자 색, 간격, 공백 속성 정리 - travelbeeee

2020. 4. 7. 16:56

안녕하세요, 여행벌입니다.

오늘은 CSS 속성 중 텍스트 관련된 속성들에 대해서 배워보겠습니다.

color 속성 : 글자 색 지정하기

color : <색상>;

color 속성을 이용하면 글자에 색을 지정해줄 수 있습니다. 색상 값은 16진수나 rgb, rgba, hsl 또는 색상 이름으로 표기할 수 있습니다.

color : #ff0000; // 16진수 표현법
color : rgb(0, 200, 0); // rgb 표현법
color : rgba(0, 200, 0, 0.5); // rgba 표현법
color : blue; // 색상이름 표현법

rgba 의 마지막 값은 rgb와 다르게 투명도를 줄 수 있습니다.

text-decoration 속성 : 텍스트에 줄 표시하기 / 없애기

text-decoration : none | underline | overline | line-through

text-tranform 속성 : 텍스트 대, 소문자 변환하기

text-tranform : none | capitalize | uppercase | lowercase | full-width

full-width 속성값의 전각 문자란 고정 폭 영문자 너비의 두 배 정보 너비의 문자입니다.

text-shadow 속성 : 텍스트에 그림자 효과 추가하기

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

그림자 값을 여러개 사용하면 그래픽으로 처리한 듯한 텍스트를 만들 수도 있습니다. 아래에서 예시로 다뤄보겠습니다.

white-space 속성 : 공백 처리하기

white-space : normal | nowrap | pre | pre-line | pre-wrap

letter-spaceing / word-spacing 속성 : 텍스트 간격 조절하기

letter-spacing : normal | <크기>

word-spacing : normal | <크기>

letter-spacing 속성은 낱 글자 사이 간격을 조절하고, word-spacing 속성은 단어와 단어 사이 간격을 조절합니다. 주로 letter-spacing 속성을 이용해서 자간을 조절합니다.

예시1) color 속성 사용

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color : black;
        }
        p{
            font-size : 50px;
        }
    </style>
</head>
<body>
    <p style="color : #ff0011">Likelion(16진수)</p>
    <p style="color : red">Likelion(색상이름)</p>
    <p style="color : rgb(255, 0, 0)">Likelion(rgb)</p>
    <p style="color : rgba(255, 0, 0, 0.5)">Likelion(rgba)</p>
</body>
</html>

같은 색을 여러 방법으로 적용해보았습니다.

예시2) text-shadow 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>text-transform</title>
  <style>
    body { background:#222;}  /* 문서 배경색 */
    h1 { 
      font-size:80px;  /* 글자 크기 */
      font-family:"Arial Rounded MT";  /* 글꼴 */
      letter-spacing:4px; /* 자간 */
    }
    .shadow {
      color: #000; /* 글자색 */
      text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;  /* 텍스트 그림자 */
    }
  </style>
</head>
<body>
  <h1 class="shadow">LIKELION</h1>
</body> 
</html>

이상으로 텍스트 관련 CSS 속성 정리를 마치겠습니다.

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 목록 스타일 : list 속성 정리 - travelbeeee (0)	2020.04.08
[HTML+CSS] 문단 스타일 : 텍스트 정렬, 들여 쓰기, 줄 간격 - travelbeeee (1)	2020.04.08
[HTML+CSS] 구글 웹폰트 적용하기 (0)	2020.04.07
[HTML+CSS] 글꼴 관련 스타일 - travelbeeee (0)	2020.04.06
[HTML+CSS] 전체 선택자(*) 와 태그 선택자 - travelbeeee (0)	2020.04.06

굳건하게