텍스트 관련 스타일

프로그래밍/HTML&CSS 2022. 8. 30. 23:10

728x90

텍스트 관련 스타일은 글자와 단어, 그리고 글자로 이루어진 문단에서 사용하는 스타일이다.

color

웹문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때는 사용한다.

color: <색상>
color: #ffff00 | rgb(0,0,255) | blue

16진수 표현법과 rgb 표현법, 색생명 표현법으로 표현이 가능하다.

16진수 표현법 : 웹 문서의 CSS에서 색상을 16진수로 표현하는 방법으로 위 코드와 같이 #기호 다음으로 6자리의 16진수로 표시한다. 포토샵 같은 그래픽 프로그램에서 색상을 지정할때 사용하는 가장 기본적인 방법이다. 16진수는 #000000(검은색)부터 #ffffff(흰색)까지 표현 가능하고 만약 색상 값이 두자리씩 중복이 될 경우 #ff0처럼 줄여서 표현이 가능하다.

rgb 표현법 : CSS에서 색상을 지정할 때 주로 사용하는 방법으로 순서대로 빨강, 초록, 파랑의 값을 0부터 255까지 표시하여 rgb(0,0,0)부터 rgb(255,255,255)까지 표현하는 방법이다. rgba 표현법도 있는데 뒤에 a는 투명도를 의미하여 예를 들어 rgb(0, 0, 255, 0.5)라고 하면 투명도를 50%로 적용하라는 의미이다.

색상명 표현법 : 생상을 표기할 때 red, yellow, black 과 같이 색상이름을 직접 기입함으로서 적용하는 방법이다.

text-align

문단의 텍스트 정렬 방법을 지정하는 속성으로 왼쪽, 오른쪽, 가운데 정렬 등을 지정 가능하다.

font-size: left | right | center | justify

종류	설명
left	왼쪽에 맞춰 문단을 정렬한다.
right	오른쪽에 맞춰 문단을 정렬한다.
center	가운데에 맞춰 문단을 정렬한다.
justify	양쪽에 맞춰 문단을 정렬한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        p{
            border: 3px dotted red;
            padding: 10px;
            margin: 20px;
        }
        .align-left{text-align: left;}
        .align-right{text-align: right;}
        .align-center{text-align: center;}
        .align-justify{text-align: justify;}
    </style>
</head>
<body>
    <p class="align-left">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime numquam, fugiat doloribus similique eius ut sapiente animi illum quas quidem, assumenda ipsum, sed nihil vel sit eligendi possimus eveniet quae.</p>
    <p class="align-right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime numquam, fugiat doloribus similique eius ut sapiente animi illum quas quidem, assumenda ipsum, sed nihil vel sit eligendi possimus eveniet quae.</p>
    <p class="align-center">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime numquam, fugiat doloribus similique eius ut sapiente animi illum quas quidem, assumenda ipsum, sed nihil vel sit eligendi possimus eveniet quae.</p>
    <p class="align-justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime numquam, fugiat doloribus similique eius ut sapiente animi illum quas quidem, assumenda ipsum, sed nihil vel sit eligendi possimus eveniet quae.</p>
</body>
</html>

line-height

두 줄 이상의 문장의 경우 줄 간 간격이 생기는데 그 간격이 좁거나 넓으면 가독성이 떨이지게 된다. line-height 속성은 줄 간 간격을 원하는 만큼 조절이 가능하다.

line-height: <원하는 크기, 정수>px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        p{border: 3px dotted red;
        padding: 10px;
        margin: 20px;}
        #small_line{ line-height: 0.7;}
        #big_line{line-height: 3;}
        #px_line{line-height: 16px;}
        #per_line{line-height: 50%;}
    </style>
</head>
<body>
    <p id="small_line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, debitis? Ea alias suscipit autem sit provident earum accusantium deserunt odit optio. Tenetur rem facere modi maxime explicabo consequatur libero dolorum.</p>
    <p id="big_line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, debitis? Ea alias suscipit autem sit provident earum accusantium deserunt odit optio. Tenetur rem facere modi maxime explicabo consequatur libero dolorum.</p>
    <p id="px_line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, debitis? Ea alias suscipit autem sit provident earum accusantium deserunt odit optio. Tenetur rem facere modi maxime explicabo consequatur libero dolorum.</p>
    <p id="per_line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, debitis? Ea alias suscipit autem sit provident earum accusantium deserunt odit optio. Tenetur rem facere modi maxime explicabo consequatur libero dolorum.</p>
</body>
</html>

text-decoration

text-decoration 속성은 텍스트의 밑줄을 긋거나 취소선을 의미하고 하이퍼링크의 기본 밑줄을 지우는데도 사용된다.

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

종류	설명
none	하이퍼 링크 등으로 인한 밑줄을 지우는데 사용
underline	밑줄을 표시
overline	윗줄을 표시
line-through	취소선 표시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        a{text-decoration: none; color: greenyellow;}
        .under{text-decoration: underline;}
        .though{ text-decoration: line-through;}
    </style>
</head>
<body>
    <h2>HyperText Mark-up Language</h2>
    <p><a href="https://namu.wiki/w/HTML">출처 : HTML(나무위키)</a></p>
    <p> "Hyper Text Mark-up Language" 의 약자. <span class="under">웹 페이지의 모습을 기술하기 위한 규약.</span> 프로그래밍 언어가 아니라 마크업 언어[1]다. 헷갈리지 않도록 하자.[2] 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.</p>
    <p>최초 제안자는 CERN의 물리학자 티머시 J. 버너스리이다. URL, HTTP, WWW의 전신인 Enquire 등도 그가 세트로 개발하고 제안했다. TCP/IP 통신규약을 만든 빈턴 G. 서프(Vinton Gray Cerf)와 함께 인터넷의 아버지로 불린다.</p>
    <p><span class="though">나무위키에서는 다음과 같이 내용을 집어넣어 HTML을 적용시킬 수 있지만 도움말에 의하면 지원 종료 가능성이 있는 비권장 문법이므로 나무위키에서는 HTML 태그를 사용하지 않는 것을 추천한다.</span></p>
    </p>
</body>
</html>

text-shadow

text-shadow는 텍스트에 그림자 효과를 줄 수 있는 속성으로 사이트의 제목처럼 강조를 하고 싶은 글자에 사용하면 가시성을 높여줄 수 있다. 밋밋한 텍스트에 입체감을 불어 넣는 효과를 준다.

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

none의 경우 효과를 지우는 속성값이다.

가로 거리에 양수값은 오른쪽을, 음수값은 왼쪽으로 그림자를 만들며, 세로거리는 양수값은 아래쪽으로, 음수값은 윗쪽으로 그림자를 만든다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        h1{font-size: 50px;}
        #shadow1 {color: deeppink; text-shadow: 0px 10px 10px;}
        #shadow2 {text-shadow: 10px 10px 3px red;}
        #shadow3 {color: white; text-shadow: 10px -10px 5px #000;}
    </style>
</head>
<body>
    <h1 id="shadow1">CSS text-shadow 속성</h1>
    <h1 id="shadow2">CSS text-shadow 속성</h1>
    <h1 id="shadow3">CSS text-shadow 속성</h1>
</body>
</html>

text-transform

text-transform 속성은 영문자를 표기할 때 텍스트의 대소문자를 원하는 대로 바꿀 수 있다.

종류	설명
none	줄을 표시하지 않는다.
capitalize	첫번째 글자를 대문자로 변환한다.
lowercase	모든 글자를 소문자로 변환한다.
uppercase	모든 글자를 대문자로 변환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        .trans1{text-transform: lowercase;}
        .trans2{text-transform: uppercase;}
        .trans3{text-transform: capitalize;}
    </style>
</head>
<body>
    <h3>프로그래밍 언어</h3>
    <ul>
        <li class="trans1">Java</li>
        <li class="trans2">JavaScript</li>
        <li class="trans3">React</li>
    </ul>
</body>
</html>

간격 조절 속성

letter-spacing : 글자와 글자 사이의 간격을 조절하는 속성

word-spacing : 단어와 단어사이 간격을 조절하는 속성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        .letter { letter-spacing: 5px; color: rgb(40, 38, 136);}
        .word {word-spacing: 7px; color: #ffcccc;} 
    </style>
</head>
<body>
    <p><span class="letter">CSS의 letter-spacing 속성 테스트</span></p>
    <p><span class="word">CSS의 word-spacing 속성 테스트</span></p>
</body>
</html>

728x90

저작자표시

'프로그래밍 > HTML&CSS' 카테고리의 다른 글

박스 모델(box model), 컨텐츠(content) 영역 (0)	2022.09.01
배경 관련 스타일 (0)	2022.08.31
글꼴 관련 스타일 (0)	2022.08.29
선택자(selector) (3) (0)	2022.08.28
선택자(selector) (2) (0)	2022.08.27

ABOUT ME

내 이야기 꾸러미 내 이야기 꾸러미

'프로그래밍 > HTML&CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > HTML&CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바