이전에는 direction: ltr; / direction: rtl; 을 사용하여 왼쪽에서 오른쪽, 오른쪽에서 왼쪽 정렬방식을 사용했으나 현재는 text-align을 통해 정렬이 가능하고, white-space를 사용하여 텍스트 출력을 그대로 가능하게 할지 선택이 가능하다.
- text-align: left | right | center | justify;
left는 왼쪽정렬, right는 오른쪽정렬, center는 중간정렬, justify는 균등하게 정렬한다. - white-space: normal | nowrap | pre | pre-line | pre-wrap;
공백을 어떻게 처리할지 정의한 내용으로, white-space: pre의 경우 연속된 공백과 줄바꿈을 그대로 사용할 수 있다.
들여쓰기를 하고싶은 경우에는 text-indent: 값;을 사용하여 원하는 만큼을 들여쓰기 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{text-align: left;}
.p2{text-align: right;}
.p3{text-align: center;}
.p4{text-align: justify; text-indent: 10px;}
.p5{white-space: pre;}
.p6{text-indent: 20px;}
</style>
</head>
<body>
<p class="p1">1.(left) Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio accusamus alias fuga amet deserunt, magni repellat ipsa ea placeat rem consequuntur quam quia soluta laboriosam ratione quidem suscipit dicta molestias!</p>
<p class="p2">2.(right) Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae, magnam earum sit nisi sunt nesciunt itaque obcaecati, totam reprehenderit aliquam recusandae. Amet ullam sint in dolorem mollitia culpa neque cumque?</p>
<p class="p3">3.(center) Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem alias unde ea cumque rerum perspiciatis, placeat dicta repellendus soluta quibusdam praesentium quo ex laborum accusamus commodi quos, aut eius facilis.</p>
<p class="p4">4.(justify) Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil distinctio nemo nesciunt exercitationem tenetur dolorum provident alias esse labore aliquid officia cupiditate natus, voluptates omnis eos dolorem doloribus rem explicabo?</p>
<p class="p5">5.(white-space:pre) Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Asperiores dolorum odit dignissimos unde. Corporis natus iste voluptatum eius.
Impedit illum vero provident odit alias facere voluptas delectus aliquid dolorem atque.</p>
<p class="p6">6.(들여쓰기)Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil distinctio nemo nesciunt exercitationem tenetur dolorum provident alias esse labore aliquid officia cupiditate natus, voluptates omnis eos dolorem doloribus rem explicabo?</p>
</html>
글자 사이 간격과 단어 사이 간격 조절
글자와 글자 사이의 간격은 letter-spacing: 속성 값 , 단어와 단어 사이의 간격은 word-spacing: 속성 값으로 조정을 할 수 있지만 현재 대부분 text-align을 통해 조정을 하게 되면서 많이 사용되고 있지 않다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{word-spacing:1.2em;}
.p2{letter-spacing:0.5em;}
</style>
</head>
<body>
<p >Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="p1">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="p2">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</html>
문단에 대한 줄간격
문단 사이에도 줄 간격을 줄 수 있다.
- line-hegith: 값;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:nth-of-type(1){
line-height: 3px;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<p>Explicabo aperiam omnis dignissimos sint quam aspernatur! </p>
</div>
<hr>
<div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<p>Explicabo aperiam omnis dignissimos sint quam aspernatur! </p>
</div>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS3의 박스모델 (0) | 2024.07.07 |
|---|---|
| CSS에서 배경에 이미지를 넣어보자 (0) | 2024.07.04 |
| CSS에서 배경에 그라데이션을 넣어보자 (0) | 2024.07.03 |
| CSS로 list-style을 변경해보자 (0) | 2024.07.03 |
| CSS의 overflow 기능에 대해 알아보자 (0) | 2024.07.02 |
| CSS에서 텍스트에 색과 그림자를 입혀보자 (0) | 2024.07.02 |
| CSS에서 폰트를 꾸며보자 (0) | 2024.07.01 |
| CSS3의 기본 문법에 대하여 (0) | 2024.07.01 |