텍스트 표현 스타일(2)

텍스트 표현 스타일(2)

2025. 9. 14. 20:16ㆍ웹 기초/css

텍스트 관련 스타일

color

글자색을 변경하기 위해서 color 속성을 사용함.

color : <색상>

색상 표현 방식

16진수 표시법 : #ffff00처럼 16진수로 표시. 기본적으로 RRGGBB로 표시해 줌.
hsl, hsla 표시법 : hsl은 hue(색상), saturation(체도), lightness(명도)의 줄임말. hsla는 alpha(불투명도)가 추가됨.

hue 표기법
-색상을 색상환으로 표시하여 0도와 360도 에는 빨간색, 120도에는 초록색, 240도에는 파란색을 배치하함.
-채도는 %로 표기하는 데, 아무것도 섞이지 않으면 체도가 가장 높음.
-명도는 %로 표기하는 데, 가장 어두운 게 0%이고 100%를 흰색으로 표시함.
-알파값은 0부터 1 사이의 값으로 지정하여서 투명도를 지정함.

ex)
hsla(0, 100%, 50%, 0.5)
H (Hue): → 빨간색을 의미.
S (Saturation): → 채도 최대치, 아주 선명한 색
L (Lightness): → 중간 밝기, 너무 어둡거나 밝지 않음.
A (Alpha): → 50% 투명도, 반투명 상태.

영문명 : yellow, red, blue처럼 영문명으로 지정.

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

            .nanum-pen-script-regular { 
                font-family: "Nanum Pen Script", cursive;
                font-weight: 400;
                font-style: normal;
            }

            h1 {
                color: hsla(0, 100%, 50%, 0.5); 
            }

            p {
                color: green; 
            }

            .accend {
                color: #0000ff; 
            }
        </style>
    </head>
    <body>
        <h1>인공지능(AI)의 시대</h1>
        <h1 class="nanum-pen-script-regular">AI는 인간의 상상력을 확장시킵니다</h1>
        <p>AI는 다양한 분야에서 활용되고 있으며, 우리의 삶을 변화시키고 있습니다.</p>
        <p class="accend">AI 기술은 의료, 교육, 예술 등 여러 산업에 혁신을 가져옵니다.</p>
    </body>
</html>

rgb와 rgba : red, green, blue의 색상을 0~255의 숫자로 섞는 비율을 조정. rgba는 alpha, 즉 투명도를 조정함.

h1 {rgba(0, 0, 255, 0.4)}

text-align

텍스트 정렬 방법을 지정.

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>AI Text Align Example</title>
    <style>
        p {
            border: 1px solid #aaa;
            padding: 8px;
            margin: 10px 0;
            background: #f9f9f9;
        }
        .start { text-align: start; }
        .end { text-align: end; }
        .left { text-align: left; }
        .right { text-align: right; }
        .center { text-align: center; }
        .justify { text-align: justify; }
        .match-parent { text-align: match-parent; }
    </style>
</head>
<body>
    <p class="start">AI는 인공지능의 약자로, 인간의 학습, 추론, 문제 해결 능력을 컴퓨터가 모방하도록 하는 기술입니다.</p>
    <p class="end">AI는 인공지능의 약자로, 인간의 학습, 추론, 문제 해결 능력을 컴퓨터가 모방하도록 하는 기술입니다.</p>
    <p class="left">AI는 인공지능의 약자로, 인간의 학습, 추론, 문제 해결 능력을 컴퓨터가 모방하도록 하는 기술입니다.</p>
    <p class="right">AI는 인공지능의 약자로, 인간의 학습, 추론, 문제 해결 능력을 컴퓨터가 모방하도록 하는 기술입니다.</p>
    <p class="center">AI는 인공지능의 약자로, 인간의 학습, 추론, 문제 해결 능력을 컴퓨터가 모방하도록 하는 기술입니다.</p>
    <p class="justify">AI는 인공지능의 약자로, 인간의 학습, 추론, 문제 해결 능력을 컴퓨터가 모방하도록 하는 기술입니다.</p>
    <div style="text-align: right;">
        <p class="match-parent">AI는 인공지능의 약자로, 인간의 학습, 추론, 문제 해결 능력을 컴퓨터가 모방하도록 하는 기술입니다.</p>
    </div>
</body>
</html>

line-height

문단마다 줄 간격을 지정해 줌.
정확히 문단 글자 크기를 지정해 줄 수도 있지만 글자 크기를 기준으로도 배수로 지정가능.

p{font-size : 14px; line-height : 28px;}
p{font-size : 14px; line-height : 4.0;}
p{font-size : 14px; line-height : 600%;}

위처럼 28px만큼 문단을 띄어 쓸 수도 있지만 2.0, 200%처럼 글자크기의 두 배만큼 띄어 쓸 수도 있음.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>ssjjss</title>
    <style>
        p.line1 {
            font-size: 14px;
            line-height: 28px;
        }
        p.line2 {
            font-size: 14px;
            line-height: 4.0;
        }
        p.line3 {
            font-size: 14px;
            line-height: 600%; 
        }
    </style>
</head>
<body>
    <p class="line1">AI는 데이터를 분석하여 인간의 의사결정을 돕습니다.</p>
    <p class="line2">AI는 반복 작업을 자동화하고 효율성을 높입니다.</p>
    <p class="line3">AI는 창의적인 콘텐츠 생성에도 활용됩니다.</p>
</body>
</html>

text-decoration

밑줄이나 취소선을 표시해 줌.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>AI 텍스트 데코레이션</title>
    <style>
        .underline {
            text-decoration: underline;
        }

        .overline {
            text-decoration: overline;
        }

        .none {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p class="underline">AI는 미래 산업의 핵심 기술입니다.</p>
    <p class="overline">AI는 인간의 창의력을 보완합니다.</p>
    <p class="none">AI는 이미 우리의 일상 속에 깊숙이 들어와 있습니다.</p>
</body>
</html>

text-shadow

그림자 효과를 추가해 줌.

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

가로 거리	텍스트부터 그림자까지의 가로 거리(필수). 양숫값은 글자 오른쪽, 음숫값은 글자의 왼쪽.
세로 거리	텍스트부터 그림자까지의 새로 거리(필수). 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽.
번짐 정도	그림자의 번짐 정도. 양숫값은 모든 방향으로 퍼져나가면서 글씨가 크게 보이지만 반대로 음숫값은 모든 방향으로 축소되어짐.
색상	그림자 색상 지정.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>AI 텍스트 데코레이션</title>
    <style>
        .shadow1{
            text-shadow : 5px 5px 4px yellow
        }

        .shadow2{
            text-shadow : -5px 5px 4px hsl(172, 69%, 28%)
        }

        .shadow3{
            text-shadow: -5px 5px 7px blue;
        }
    </style>
</head>
<body>
    <p class="shadow1">AI는 미래 산업의 핵심 기술입니다.</p>
    <p class="shadow2">AI는 인간의 창의력을 보완합니다.</p>
    <p class="shadow3">AI는 이미 우리의 일상 속에 깊숙이 들어와 있습니다.</p>
</body>
</html>

text-tranformation

텍스트의 대소 문자를 지정가능.

none	줄을 표시하지 않음.
capitalize	첫 번째 글자를 대문자로 지정.
uppercase	모든 글자를 대문자로 지정.
lowercase	모든 글자를 소문자로 지정.
full-width	가능한 한 모든 문자를 전각 문자로 지정.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>AI 텍스트 데코레이션</title>
    <style>
        .t1{
            text-transform: capitalize;
        }
        .t2{
            text-transform: uppercase;
        }
        .t3{
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p class="t1">ssjjss</p>
    <p class="t2">ssjjss</p>
    <p class="t3">SsjjsS</p>
</body>
</html>

letter-spacing, word-spacing

letter-spacing : 글자와 글자 사이의 간격을 조정해 줌.
word-spacing : 단어와 단어 사이의 간격을 조정해 줌.

위의 두 가지 속성은 px, em의 단위나 백분율(%)로 크기값을 조정함.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>AI 텍스트 데코레이션</title>
    <style>
        .s1{
            font-size: 150%;
            letter-spacing: 0.2em;
        }
        .s2{
            font-size: 170%;
            word-spacing: 0.5em;
        }
    </style>
</head>
<body>
    <p class="s1">ssjjss is good</p>
    <p class="s2">life is good</p>
</body>
</html>

'웹 기초 > css' 카테고리의 다른 글

텍스트 표현 스타일(4) (1)	2025.09.15
텍스트 표현 스타일(3) (0)	2025.09.14
텍스트 표현 스타일 (2)	2025.09.14
CSS 선택자 (0)	2025.09.11
CSS 기초 (0)	2025.09.10

숭준성

숭준성

태그

최근글

댓글

공지사항

아카이브

텍스트 관련 스타일

color

색상 표현 방식

text-align

line-height

text-decoration

text-shadow

text-tranformation

letter-spacing, word-spacing

'웹 기초 > css' 카테고리의 다른 글

관련글

티스토리툴바