<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css텍스트1</title>
<style>
.letter { letter-spacing: 5px; color: #3d80eb;}
.word { word-spacing: 7px; color: rgb(227, 27, 113);}
</style>
</head>
<body>
<h2>css 텍스트1</h2>
<p>letter-spacing</p>
<p class="letter">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
<p>word-spacing</p>
<p class="word">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic rem exercitationem accusantium sequi at tempore ex architecto aliquid consequatur tempora distinctio, eaque voluptatem mollitia id accusamus velit assumenda possimus totam!</p>
</body>
</html>
16. CSS텍스트2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css텍스트2</title>
<style>
p { border: 3px solid red; padding: 10px;}
#align-left { text-align: left;}
#align-right { text-align: right;}
#align-center { text-align: center;}
#align-justify { text-align: justify;}
#indent1 { text-indent: 20px;}
#indent1 { text-indent: 5%;}
.small-line {line-height: 0.7;}
.big-line {line-height: 3;}
.px-line {line-height: 30px;}
.per-line {line-height: 50%;}
</style>
</head>
<body>
<h2>css 텍스트2</h2>
<p id="align-left" class="small-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
<p id="align-right" class="big-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
<p id="align-center" class="px-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
<p id="align-justify" class="per-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
<p id="indent1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
<p id="indent2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
</body>
</html>
17. CSS텍스트3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css텍스트3</title>
<style>
.variant { font-variant: small-caps; }
.under { text-decoration: underline;}
.through {text-decoration: line-through;}
a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: underline;}
a:active { text-decoration: underline;}
</style>
</head>
<body>
<h2>HTML(<span class="variant">Hyper Text Markup Language</span>)</h2>
<p>웹사이트의 모습을 기술하기 위한 마크업 언어.</p>
<p><span class="under">프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로[1] 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다.</span> 보면 알겠지만 애초에 이름 HTML의 ML이 마크업 언어라는 뜻이다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.</p>
<p>최초 제안자는 CERN의 물리학자 티머시 J. 버너스리이다. URL, HTTP, WWW의 전신인 Enquire 등도 그가 세트로 개발하고 제안했다. TCP/IP 통신규약을 만든 빈턴 G. 서프(Vinton Gray Cerf)와 함께 인터넷의 아버지로 불린다.</p>
<p><span class="through">나무위키에서는 아래와 같이 내용을 집어넣어 HTML을 적용시킬 수 있지만 도움말은 권장하지 않는 문법이고, 지원 종료 가능성이 있는 문법이므로 나무위키에서는 HTML 태그를 사용하지 않는 것을 추천한다.</span></p>
<p><a href="https://namu.wiki/w/HTML">출처: 나무위키</a></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css텍스트5</title>
<style>
p {display: inline-block; width: 200px; border: 1px solid red;}
.txt1 {white-space: nowrap; overflow: hidden; text-overflow: clip;}
.txt2 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.txt3 {height: 150px; overflow: scroll;}
.txt4 {height: 150px; overflow-x: hidden; overflow-y: scroll;}
.txt5 {
border: 3px dottend deeppink;
width: 400px;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.txt5:hover {overflow: visible;}
</style>
</head>
<body>
<h2>css 텍스트5</h2>
<p class="txt1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta impedit ullam facere, nam sed ea velit minus delectus ipsa corporis, at ad explicabo ut, dolor numquam vero doloribus? Provident, adipisci?</p>
<p class="txt2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta impedit ullam facere, nam sed ea velit minus delectus ipsa corporis, at ad explicabo ut, dolor numquam vero doloribus? Provident, adipisci?</p>
<p class="txt3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta impedit ullam facere, nam sed ea velit minus delectus ipsa corporis, at ad explicabo ut, dolor numquam vero doloribus? Provident, adipisci?</p>
<p class="txt4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta impedit ullam facere, nam sed ea velit minus delectus ipsa corporis, at ad explicabo ut, dolor numquam vero doloribus? Provident, adipisci?</p>
<p class="txt5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta impedit ullam facere, nam sed ea velit minus delectus ipsa corporis, at ad explicabo ut, dolor numquam vero doloribus? Provident, adipisci?</p>
</body>
</html>