안녕하세요, 여행벌입니다.
오늘은 텍스트 정렬, 들여 쓰기, 줄 간격 등 문단 스타일에 대해서 포스팅해보겠습니다.
text-align 속성 : 텍스트 정렬하기
text-align 속성은 문단의 텍스트 정렬 방법을 지정합니다. 우리가 흔히 한글에서 많이 쓰는 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬 등을 text-align 속성을 이용해서 지정할 수 있습니다.
text-align : start | end | left | right | center | justify | match-parent
direction 속성 : 글자 쓰기 방향 지정하기
direction 속성은 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지 정합니다. 한글과 영어를 비롯해 대부분의 언어는 왼쪽에서 오른쪽으로 쓰기 때문에 default 는 left-to-right 속성입니다.
direction : ltr | rtl
text-justify 속성 : 정렬 시 공백 조절하기
text-align 속성이 justify 일 경우, 양쪽 끝에 맞추기 때문에 글자와 단어 사이 간격이 벌어질 수 있습니다. 이때 간격을 조절하는 속성이 text-justify 속성입니다.
text-justify : auto | none | inter-word | distribute
text-indent 속성 : 텍스트 들여 쓰기
text-indent 속성은 문단의 첫 글자를 얼마나 들여 쓸지를 지정합니다.
text-indent : <크기> | <백분율>
line-height 속성 : 줄 간격 조절하기
문단의 첫 줄을 넘어 두 줄 이상이 되면 '줄 간격' 이 생깁니다. line-height 속성을 이용하면 줄 간격을 조절할 수 있습니다.
line-height : normal | <숫자> | <크기> | <백분율> | inherit
숫자는 배수를 의미하며, 글자 크기가 12px 일 때, 숫자로 2를 주면 줄 간격은 24px가 됩니다.
normal은 브라우저가 기본적으로 제공하는 줄 간격으로 보통 글자 크기의 1.2배 입니다.
inherit은 부모 속성을 그대로 가져온다는 뜻입니다.
text-overflow 속성 : 넘치는 텍스트 표기하기
white-space : nowrap 으로 지정해 줄 바꿈을 하지 않을 때, 텍스트가 기준선을 벗어나 넘칠 수도 있습니다. 이렇게 넘치는 텍스트를 어떻게 처리할지 text-overflow 속성을 이용해 정할 수 있습니다.
text-overflow : clip | ellipsis
예시 1) direction 속성
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size : 3em;
}
.ltr{
direction : ltr;
}
.rtl{
direction : rtl;
}
</style>
</head>
<body>
<p class="ltr">left-to-right 속성으로 글씨쓰기.</p>
<p class="rtl">right-to-left 속성으로 글씨쓰기.</p>
</body>
</html>left-to-right 속성과 right-to-left 속성으로 비슷한 문구를 써보겠습니다.
문구 자체가 바뀌지는 않았지만, 글이 써지는 순서가 바뀐 것을 확인할 수 있습니다.
예시 2) text-align 속성
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color : pink;
color : white;
font-size : 3em;
}
.left{
text-align : left;
}
.right{
text-align : right;
}
.center{
text-align : center;
}
.justify{
text-align : justify;
}
</style>
</head>
<body>
<p class="left">left 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
<p class="right">right 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
<p class="center">center 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
<p class="justify">justify 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
</body>
</html>자주 쓰이는 text-align 속성 4가지를 예시를 통해 익혀보겠습니다.
예시 3) line-height 속성
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: pink;
color: white;
font-size: 3em;
}
.ex1{
line-height : 3;
}
.ex2{
line-height : 35px;
}
.ex3{
line-height : 100%;
}
</style>
</head>
<body>
<p class="ex1">
line-height : 3(3배)<br>
서울시립대학교는 1918년 개교한 이래 지난 한 세기 동안 시대적 요청에 부응하는 인재양성과 학문연구를 통해 국가와 사회발전에 기여해 왔습니다. 대학의 노력과 시민들의 성원에 힘입어 국내 최고수준의</p>
<p class="ex2">
line-height : 35px<br>
서울시립대학교는 1918년 개교한 이래 지난 한 세기 동안 시대적 요청에 부응하는 인재양성과 학문연구를 통해 국가와 사회발전에 기여해 왔습니다. 대학의 노력과 시민들의 성원에 힘입어 국내 최고수준의</p>
<p class="ex3">
line-height : 100%(1배)<br>
서울시립대학교는 1918년 개교한 이래 지난 한 세기 동안 시대적 요청에 부응하는 인재양성과 학문연구를 통해 국가와 사회발전에 기여해 왔습니다. 대학의 노력과 시민들의 성원에 힘입어 국내 최고수준의</p>
</body>
</html>line-height 속성을 3(부모의 3배), 35px, 100%(부모 기준으로 100%) 3가지 방법으로 부여해보겠습니다. 이때, 부모는 해당 글씨의 크기가 됩니다.
이상으로 문단 스타일을 지정하는 여러가지 속성 정리를 마무리하겠습니다.
'Dev > HTML5 + CSS3' 카테고리의 다른 글
| [HTML+CSS] display, padding, margin, border 속성 정리 - travelbeeee (0) | 2020.04.09 |
|---|---|
| [HTML+CSS] 목록 스타일 : list 속성 정리 - travelbeeee (0) | 2020.04.08 |
| [HTML+CSS] 텍스트 스타일 : 글자 색, 간격, 공백 속성 정리 - travelbeeee (0) | 2020.04.07 |
| [HTML+CSS] 구글 웹폰트 적용하기 (0) | 2020.04.07 |
| [HTML+CSS] 글꼴 관련 스타일 - travelbeeee (0) | 2020.04.06 |