고정 헤더 영역
상세 컨텐츠
본문
반응형
direction 속성 - 글자 쓰기 방향 지정하기
- direction 속성을 이용하면 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지 설정할 수 있다.
direction : ltr | rtl
속성
- ltr : 왼쪽에서 오른쪽으로 (left-to-right) 텍스트를 표시한다. 기본값이다.
- rtl : 오른쪽에서 왼쪽으로 (right-to-left) 텍스트를 표시한다.
text-align 속성 - 텍스트 정렬하기
- 화면에 표시할 때 왼쪽에 배치할 건지, 가운데에 정렬할 것인지 설정이 가능하다. text-align 속성을 이용해 텍스트를 정렬할 수 있다.
text-align : start | end | left | right | center | justify | match-parent
속성
- start : 현재 텍스트의 줄의 시작 위치를 맞추어 문단을 정렬한다.
- end : 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다.
- left : 왼쪽에 맞추어 문단을 정렬한다.
- right : 오른쪽에 맞추어 문단을 정렬한다.
- center : 가운데에 맞추어 문단을 정렬한다.
- justify : 양쪽에 맞추어 문단을 정렬한다.
- match-parent : 부모 요소를 따라 문단을 정렬한다.
<html>
<head>
<meta charset="utf-8">
<style>
.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">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세!</p>
<p class="align-right">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세!</p>
<p class="align-center">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세!</p>
<p class="align-jutify">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세!</p>
</body>
</html>
text-justify 속성 - 정렬 시 공백 조절하기
- 양쪽 정렬에 사용했던 text-align에서 justify 속성은 양쪽으로 정렬되지만 미세하게 간격을 조절할 필요가 있을 경우 text-justify 속성을 이용한다.
text-justify : auto | none | inter-word | distribute
속성
- auto : 웹 브라우저에서 자동으로 지정한다.
- none : 정렬하지 않는다.
- inter-word : 단어 사이의 공백을 조절해 정렬한다.
- distribute : 인접한 글자 사이의 공백을 똑같이 맞추어 정렬한다.
<html>
<head>
<meta charset="utf-8">
<style>
html, body { width: 100%; height: 100%; }
.justify-inter-word { text-justify: inter-word; }
.justify-distribute { text-justify: distribute; }
</style>
</head>
<body>
<div style="width: 300px;">
<p class="justify-inter-word">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</p>
<p class="justify-distribute">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</p>
</div>
</body>
</html>
text-indent 속성 - 텍스트 들여쓰기
- 텍스트가 많은 문서일 경우, 문단의 첫 글자를 조금씩 들여 쓰면 문단의 시작을 쉽게 알아볼 수 있다. 문단을 들여 쓰게 도와주는 text-indent 속성이 있다.
text-indent: <크기> | <백분율>
속성
- 크기 : 단위와 함께 들여 쓸 크기를 지정한다. 음수 값도 사용할 수 있다.
- 백분율 : 부모 요소의 너비를 기준으로 상대적 크기를 지정한다.
<html>
<head>
<meta charset="utf-8">
<style>
.indent1 { text-indent: 15px; }
.indent2 { text-indent: 5%; }
</style>
</head>
<body>
<p class="indent1">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</p>
<p class="indent2">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</p>
</body>
</html>반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 목록 스타일 (0) | 2021.04.23 |
|---|---|
| [CSS 기초] 문단 스타일 (2) (0) | 2021.04.21 |
| [CSS 기초] 텍스트 스타일 (0) | 2021.04.19 |
| [CSS 기초] 글꼴 관련 스타일 (2) (0) | 2021.04.16 |
| [CSS 기초] 글꼴 관련 스타일 (1) (0) | 2021.04.15 |
댓글 영역