728x90
반응형
text-align :텍스트 정렬
- center : 중앙
- left : 왼쪽
- right : 오른쪽
- justify : 보편적으로 사용되는 정렬
vertical align : 줄 내에서의 높이 설정
- top : 상단
- middle : 중앙
- bottom : 하단
text-decoration:글자에 줄 긋기
text-decoration: solid 1px red underline;
letter-spacing : 글자 간격 설정
letter-spacing: 0px;
line-height : 줄 간격 설정
line-height: 5px; width: 100px;
word-spacing : 단어 간격 설정
word-spacing: 5px;
text-indent : 문단 첫 줄 들여쓰기 설정
text-indent: 1em;
white-space : 자동 줄 바꿈 설정
white-space: nowrap; overflow-x: auto;
<!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>08_텍스트.html</title>
<style>
* {
box-sizing: border-box;
}
div {
border: solid 3px black;
padding: 10px;
}
</style>
</head>
<body>
<h3># text-align : 텍스트 정렬</h3>
<h5>- text-align: center;</h5>
<div style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est
lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
Commodo odio aenean sed adipiscing diam donec adipiscing tristique.
Mi eget mauris pharetra et. Non tellus orci ac auctor augue.
Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis.
Egestas integer eget aliquet nibh praesent. In hac habitasse platea
dictumst quisque sagittis purus. Pulvinar elementum integer enim neque
volutpat ac.Senectus et netus et malesuada. Nunc pulvinar sapien
et ligula ullamcorper malesuada proin. Neque convallis a cras
semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam
sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod
lacinia. In tellus integer feugiat scelerisque. Feugiat in fermentum
posuere urna nec tincidunt praesent. Porttitor rhoncus dolor purus
non enim praesent elementum facilisis. Nisi scelerisque eu ultrices
vitae auctor eu augue ut lectus. Ipsum faucibus vitae aliquet nec
ullamcorper sit amet risus. Et malesuada fames ac turpis egestas sed.
Sit amet nisl suscipit adipiscing bibendum est ultricies. Arcu ac
tortor dignissim convallis aenean et tortor at. Pretium viverra
suspendisse potenti nullam ac tortor vitae purus. Eros donec ac odio
tempor orci dapibus ultrices. Elementum nibh tellus molestie nunc.
Et magnis dis parturient montes nascetur. Est placerat in egestas
erat imperdiet. Consequat interdum varius sit amet mattis
vulputate enim.Sit amet nulla facilisi morbi tempus.
Nulla facilisi cras fermentum odio eu. Etiam erat velit
scelerisque in dictum non consectetur a erat. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere.
Ut sem nulla pharetra diam. Fames ac turpis egestas maecenas.
Bibendum neque egestas congue quisque egestas diam.
Laoreet id donec ultrices tincidunt arcu non sodales neque.
Eget felis eget nunc lobortis mattis aliquam faucibus purus.
Faucibus interdum posuere lorem ipsum dolor sit.
</div>
<h5>- text-align: left;</h5>
<div style="text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est
lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
Commodo odio aenean sed adipiscing diam donec adipiscing tristique.
Mi eget mauris pharetra et. Non tellus orci ac auctor augue.
Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis.
Egestas integer eget aliquet nibh praesent. In hac habitasse platea
dictumst quisque sagittis purus. Pulvinar elementum integer enim neque
volutpat ac.Senectus et netus et malesuada. Nunc pulvinar sapien
et ligula ullamcorper malesuada proin. Neque convallis a cras
semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam
sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod
lacinia. In tellus integer feugiat scelerisque. Feugiat in fermentum
posuere urna nec tincidunt praesent. Porttitor rhoncus dolor purus
non enim praesent elementum facilisis. Nisi scelerisque eu ultrices
vitae auctor eu augue ut lectus. Ipsum faucibus vitae aliquet nec
ullamcorper sit amet risus. Et malesuada fames ac turpis egestas sed.
Sit amet nisl suscipit adipiscing bibendum est ultricies. Arcu ac
tortor dignissim convallis aenean et tortor at. Pretium viverra
suspendisse potenti nullam ac tortor vitae purus. Eros donec ac odio
tempor orci dapibus ultrices. Elementum nibh tellus molestie nunc.
Et magnis dis parturient montes nascetur. Est placerat in egestas
erat imperdiet. Consequat interdum varius sit amet mattis
vulputate enim.Sit amet nulla facilisi morbi tempus.
Nulla facilisi cras fermentum odio eu. Etiam erat velit
scelerisque in dictum non consectetur a erat. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere.
Ut sem nulla pharetra diam. Fames ac turpis egestas maecenas.
Bibendum neque egestas congue quisque egestas diam.
Laoreet id donec ultrices tincidunt arcu non sodales neque.
Eget felis eget nunc lobortis mattis aliquam faucibus purus.
Faucibus interdum posuere lorem ipsum dolor sit.
</div>
<h5>- text-align: right;</h5>
<div style="text-align: right;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est
lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
Commodo odio aenean sed adipiscing diam donec adipiscing tristique.
Mi eget mauris pharetra et. Non tellus orci ac auctor augue.
Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis.
Egestas integer eget aliquet nibh praesent. In hac habitasse platea
dictumst quisque sagittis purus. Pulvinar elementum integer enim neque
volutpat ac.Senectus et netus et malesuada. Nunc pulvinar sapien
et ligula ullamcorper malesuada proin. Neque convallis a cras
semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam
sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod
lacinia. In tellus integer feugiat scelerisque. Feugiat in fermentum
posuere urna nec tincidunt praesent. Porttitor rhoncus dolor purus
non enim praesent elementum facilisis. Nisi scelerisque eu ultrices
vitae auctor eu augue ut lectus. Ipsum faucibus vitae aliquet nec
ullamcorper sit amet risus. Et malesuada fames ac turpis egestas sed.
Sit amet nisl suscipit adipiscing bibendum est ultricies. Arcu ac
tortor dignissim convallis aenean et tortor at. Pretium viverra
suspendisse potenti nullam ac tortor vitae purus. Eros donec ac odio
tempor orci dapibus ultrices. Elementum nibh tellus molestie nunc.
Et magnis dis parturient montes nascetur. Est placerat in egestas
erat imperdiet. Consequat interdum varius sit amet mattis
vulputate enim.Sit amet nulla facilisi morbi tempus.
Nulla facilisi cras fermentum odio eu. Etiam erat velit
scelerisque in dictum non consectetur a erat. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere.
Ut sem nulla pharetra diam. Fames ac turpis egestas maecenas.
Bibendum neque egestas congue quisque egestas diam.
Laoreet id donec ultrices tincidunt arcu non sodales neque.
Eget felis eget nunc lobortis mattis aliquam faucibus purus.
Faucibus interdum posuere lorem ipsum dolor sit.
</div>
<h5>- text-align: justify;</h5>
<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est
lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
Commodo odio aenean sed adipiscing diam donec adipiscing tristique.
Mi eget mauris pharetra et. Non tellus orci ac auctor augue.
Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis.
Egestas integer eget aliquet nibh praesent. In hac habitasse platea
dictumst quisque sagittis purus. Pulvinar elementum integer enim neque
volutpat ac.Senectus et netus et malesuada. Nunc pulvinar sapien
et ligula ullamcorper malesuada proin. Neque convallis a cras
semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam
sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod
lacinia. In tellus integer feugiat scelerisque. Feugiat in fermentum
posuere urna nec tincidunt praesent. Porttitor rhoncus dolor purus
non enim praesent elementum facilisis. Nisi scelerisque eu ultrices
vitae auctor eu augue ut lectus. Ipsum faucibus vitae aliquet nec
ullamcorper sit amet risus. Et malesuada fames ac turpis egestas sed.
Sit amet nisl suscipit adipiscing bibendum est ultricies. Arcu ac
tortor dignissim convallis aenean et tortor at. Pretium viverra
suspendisse potenti nullam ac tortor vitae purus. Eros donec ac odio
tempor orci dapibus ultrices. Elementum nibh tellus molestie nunc.
Et magnis dis parturient montes nascetur. Est placerat in egestas
erat imperdiet. Consequat interdum varius sit amet mattis
vulputate enim.Sit amet nulla facilisi morbi tempus.
Nulla facilisi cras fermentum odio eu. Etiam erat velit
scelerisque in dictum non consectetur a erat. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere.
Ut sem nulla pharetra diam. Fames ac turpis egestas maecenas.
Bibendum neque egestas congue quisque egestas diam.
Laoreet id donec ultrices tincidunt arcu non sodales neque.
Eget felis eget nunc lobortis mattis aliquam faucibus purus.
Faucibus interdum posuere lorem ipsum dolor sit.
</div>
<h3># vertical align : 줄 내에서의 높이 설정</h3>
<!-- div: box를 생성하면서 영역을 지정할 때 사용 -->
<!-- span: box를 생성하지 않고 일부 내용을 선택하기 위해 사용-->
<h5>- vertical-align: top;</h5>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod <span style="font-size: 0.5em; vertical-align: top;">
tempor incididunt
</span>
ut labore et dolore magna aliqua.
</div>
<h5>- vertical-align: middle;</h5>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod <span style="font-size: 0.5em; vertical-align: middle;">
tempor incididunt
</span>
ut labore et dolore magna aliqua.
</div>
<h5>- vertical-align: bottom;</h5>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod <span style="font-size: 0.5em; vertical-align: bottom;">
tempor incididunt
</span>
ut labore et dolore magna aliqua.
</div>
<h3># text-decoration: 글자에 줄 긋기</h3>
<ul>
<li style="text-decoration: solid 1px red underline;">
Lorem ipsum dolor sit amet, consectetur adipiscing
</li>
<li style="text-decoration: solid 1px red line-through;">
Lorem ipsum dolor sit amet, consectetur adipiscing
</li>
<li style="text-decoration: wavy 1px red underline;">
Lorem ipsum dolor sit amet, consectetur adipiscing
</li>
</ul>
<h3># letter-spacing : 글자 간격 설정</h3>
<ul>
<li style="letter-spacing: -5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
<li style="letter-spacing: 0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
<li style="letter-spacing: 5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
<li style="letter-spacing: 10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
</ul>
<h3># line-height : 줄 간격 설정</h3>
<ul>
<li style="line-height: 5px; width: 100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
<li style="line-height: 10px; width: 100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
<li style="line-height: 15px; width: 100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
<li style="line-height: 20px; width: 100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
</ul>
<h3># word-spacing : 단어 간격 설정</h3>
<ul>
<li style="word-spacing: 5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
<li style="word-spacing: 10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
<li style="word-spacing: 15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
<li style="word-spacing: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>
</ul>
<h3># text-indent : 문단 첫 줄 들여쓰기 설정</h3>
<ul>
<li style="text-indent: 1em;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est
lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
</li>
<li style="text-indent: 2em;">
Lorem ipsum dolor sit amet, consectetur adipiscing eliLorem ipsum dolor sit amet, consectetur adipiscing
elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est
lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
</li>
<li style="text-indent: 3em;">
Lorem ipsum dolor sit amet, consectetur adipiscing eliLorem ipsum dolor sit amet, consectetur adipiscing
elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est
lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
</li>
</ul>
<h3># white-space : 자동 줄 바꿈 설정</h3>
<ul>
<li style="white-space: normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est
lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
</li>
<li style="white-space: nowrap; overflow-x: auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing eliLorem ipsum dolor sit amet, consectetur adipiscing
elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est
lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
</li>
</ul>
</body>
</html>728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] 글꼴 (0) | 2023.06.07 |
|---|---|
| [CSS] 그림자(shadow) (0) | 2023.06.07 |
| [CSS] 단위(px, mm, cm, in) (0) | 2023.06.04 |
| [CSS] 여백(margin, padding) (0) | 2023.06.04 |
| [CSS] 테두리(border) (0) | 2023.06.04 |
