프로그래밍/HTML&CSS
텍스트 관련 스타일
하와이블루
2022. 8. 30. 23:10
728x90
텍스트 관련 스타일은 글자와 단어, 그리고 글자로 이루어진 문단에서 사용하는 스타일이다.
color
웹문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때는 사용한다.
color: <색상>
color: #ffff00 | rgb(0,0,255) | blue16진수 표현법과 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