텍스트 관련 스타일

글자색을 지정하는 속성

color 속성
- 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때 사용
- 사용할 수 있는 속성값은 16진수, rgb(rgba), hsl(hsla), 색상 이름
- 기본형 :
```
      color: <색상>
```
- 색상을 표현하는 방법 :

-(예시) 1 : rgb와 rgba로 표현

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .color1 {
            color: rgb(0, 0, 0);
        }
        .color2 {
            color: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <h1 class="color1">예시 1</h1>
    <h1 class="color2">예시 2</h1>
</body>
</html>

-(결과) 1 :

-(예시) 2 : 16진수로 표현

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        h1 {
            color: #0000ff;
        }
    </style>
</head>
<body>
    <h1>예시 1</h1>
</body>
</html>

-(결과) 2 :

-(예시) 3: 영문명으로 표현

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>예시 1</h1>
</body>
</html>

-(결과) 3:

-(예시) 4: hsl과 hsla로 표현

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .color1 {
            color: hsl(120, 100%, 50%);
        }
        .color2 {
            color: hsla(60, 100%, 50%, 0.5);
        }
    </style>
</head>
<body>
    <h1 class="color1">예시 1</h1>
    <h1 class="color2">예시 2</h1>
</body>
</html>

-(결과) 4:

텍스트를 정렬하는 속성

text-align 속성
- 문단의 텍스트 정렬 방법을 지정함
- 왼쪽 정렬, 오른쪽 정렬, 양쪽 정렬, 가운데 정렬 등을 웹문서에 지정 가능
- 정렬 방법을 지정하지 않을 경우 왼쪽 정렬이 기본(default)
- 기본형 :
```
text-align: start | end | left | right | center | justify | match-parent
```
  ┌ start : 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬함
  ├ end : 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬함
  ├ left : 왼쪽에 맞추어 문단을 정렬함
  ├ right : 오른쪽에 맞추어 문단을 정렬함
  ├ center : 가운데에 맞추어 문단을 정렬함
  ├ justify : 양쪽에 맞추어 문단을 정렬함
  └ match-parent : 부모 요소를 따라 문단을 정렬함

-(예시) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .center {
            text-align : center;
        }
        .justify {
            text-align : justify;
        }
    </style>
</head>
<body>
    <h1>예제</h1>
    <p>예시 1</p>
    <p class="center">예시 2</p>
    <p class="justify">예시 3</p>
</body>
</html>

-(결과) :

줄 간격을 조절하는 속성

line-height 속성
- 줄 간격을 원하는 만큼 조절 가능
- 정확한 단위로 크기값을 지정하거나 문단의 글자 크기를 기준으로 몇 배수인지 백분율로 지정 가능
- ex) 글자 크기가 12px인 문단의 줄 간격을 2.0으로 했다면 실제 줄 간격은 글자 크기의 2.0배인 24px이 됨

-(예시) :

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

└ 위 3개 모두 줄 간격이 24px이 됨

-(예시) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .small-line {
            line-height: 0.7;
        }
        .big-line {
            line-height: 2.5;
        }
    </style>
</head>
<body>
    <h1>예제</h1>
    <p class="small-line">이제 훈민정음을 만드는 것은 처음부터 슬기로 마련하고, 애써서 찾은 것이 아니라
    다만 그 (원래에 있는)성음(의 원리)을 바탕으로 이치를 다한 것 뿐이다.
    처음부터 이치는 둘이 아니니 어찌 천지 자연, (변화를 주관하는) 귀신과 그 사용을 같이 하지 않을 수 있겠는가?
    훈민정음 스물 여덟자는 각각 그 모양을 본떠서 만들었다.</p>
    <p class="big-line">이제 훈민정음을 만드는 것은 처음부터 슬기로 마련하고, 애써서 찾은 것이 아니라
    다만 그 (원래에 있는)성음(의 원리)을 바탕으로 이치를 다한 것 뿐이다.
    처음부터 이치는 둘이 아니니 어찌 천지 자연, (변화를 주관하는) 귀신과 그 사용을 같이 하지 않을 수 있겠는가?
    훈민정음 스물 여덟자는 각각 그 모양을 본떠서 만들었다.</p>
</body>
</html>

-(결과) :

텍스트의 줄을 표시하거나 없애 주는 속성

text-decoration 속성
- 텍스트에 밑줄을 긋거나 취소선을 표시함
- 텍스트에 하이퍼링크를 적용하면 밑줄이 생기는데 text-decoration 속성을 사용하여 없앨 수 있음

-(예시) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Exmaple</title>
</head>
<body>
    <h1>예제</h1>
    <p style="text-decoration:none">예시 1</p>
    <p style="text-decoration:underline">예시 2</p>
    <p style="text-decoration:overline">예시 3</p>
    <p sytle="text-decoration:line-through">예시 4</p>
</body>
</html>

-(결과) :

텍스트에 그림자 효과를 주는 속성

text-shadow 속성
- 그림자 효과를 줌
- 텍스트를 좀 더 입체감 있게 보여줄 수 있음
- 기본형 :
```
      text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>;
```
  ┌ <가로 거리> : 텍스트부터 그림자까지의 가로 거리로 필수 속성임
  │ 양수값은 글자의 오른쪽, 음수값은 글자의 왼쪽에 그림자를 만듦
  ├ <세로 거리> : 텍스트부터 그림자까지의 세로 거리로 필수 속성임
  │ 양수값은 글자의 아래쪽, 음수값은 글자의 위쪽에 그림자를 만듦
  ├ <번짐 정도> : 그림자가 번지는 정도
  │ 양수값은 그림자가 모든 방향으로 퍼져 나가서 그림자가 크게 표시됨
  │ 음수값은 그림자가 모든 방향으로 축소되어 보임
  │ 기본값은 0
  └ <색상> : 그림자 색상을 지정함
  │ 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수 있음
  │ 기본값은 현재 글자색

-(예시) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .shadow1 {
            color: red;
            text-shadow: 1px 1px black;
        }
        .shadow2 {
            text-shadow: 5px 5px 3px #ffa500;
        }
        .shadow3 {
            color: #ffffff;
            text-shadow: 7px -7px 20px #000;
        }
    </style>
</head>
<body>
    <h1 class="shadow1">예제 1</h1>
    <h1 class="shadow2">예제 2</h1>
    <h1 class="shadow3">예제 3</h1>
</body>
</html>

-(결과) :

텍스트의 대소 문자를 변환하는 속성

text-transform 속성
- 영문자를 표기할 때 텍스트의 대소 문자를 원하는 대로 바꿀 수 있음
- 영문자에만 적용되고 한글에는 적용안됨
- text-transform의 속성값 :
  ┌ none : 줄을 표시하지 않음
  ├ capitalize: 첫 번째 글자를 대문자로 변환함
  ├ uppercase : 모든 글자를 대문자로 변환함
  ├ lowercase : 모든 글자를 소문자로 변환함
  └ full-width : 가능한 한 모든 문자를 전각 문자로 변환함
  * 전각문자 : 가로와 세로의 길이 비율이 같은 문자

-(예시) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .trans1 {
            text-transform: capitalize;
        }
        .trans2 {
            text-transform: uppercase;
        }
        .trans3 {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p class="trans1">html</p>
    <p class="trans2">css</p>
    <p class="trans3">JAVASCRIPT</p>
</body>
</html>

-(결과) :

글자 간격을 조절하는 속성

letter-spacing 속성
- 글자와 글자 사이의 간격을 조절함
- px, em, 퍼센트(%)로 크기값을 조절함
word-spacing 속성
- 단어와 단어 사이의 간격을 조절함
- px, em, 퍼센트(%)로 크기값을 조절함

-(예제) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .spacing1 {
            letter-spacing: 0.2em;
        }
        .spacing2 {
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>
    <h1>예제</h1>
    <p>예시1</p>
    <p class="spacing1">예시2</p>
    <p class="spacing2">예시3</p>
</body>
</html>

-(결과) :

저작자표시

'Web Basic > CSS' 카테고리의 다른 글

표 스타일 (0)	2021.07.15
목록 스타일 (0)	2021.07.15
웹 폰트 (0)	2021.07.14
글꼴 관련 스타일 (0)	2021.07.14
CSS 기본 (0)	2021.07.11

글자색을 지정하는 속성

텍스트를 정렬하는 속성

줄 간격을 조절하는 속성

텍스트의 줄을 표시하거나 없애 주는 속성

텍스트에 그림자 효과를 주는 속성

텍스트의 대소 문자를 변환하는 속성

글자 간격을 조절하는 속성

'Web Basic > CSS' 카테고리의 다른 글

티스토리툴바