티스토리 뷰
[HTML] 텍스트 정렬 Style 사용방법
HTML 의 웹반응형 언어 사용시 글자 정렬을 설정 해주고 싶을때 text-align 이라는 CSS 속성을 사용하는 것이 웹 표준입니다.
예를 들어, 임의의 HTML 태그 안에 style="text-align:center" 이런 스타일을 지정하면 중앙 정렬이 됩니다.
아래의 설정 방법을 참고하세요.
좌우 맞춤 / 가운데 정렬 / 양쪽 맞춤 등 예제
파일명: example.html
(※ 스크롤 박스 사용법: 박스 안을 마우스로 클릭한 후, 키보드의 좌우 화살표키를 누르면 양옆으로 움직일 수 있습니다. 박스에서 다시 나오려면, 박스 바깥의 아무곳이나 클릭하면 됩니다.)
<html>
<head>
<style type="text/css">
/* 이해를 돕기 위해, div 박스에 테두리를 붙이는 코드 */
div { border:1px solid; padding:10px; }
</style>
</head>
<body>
<strong>왼쪽 정렬(왼쪽 맞춤)</strong> : 좌측 정렬이 기본값입니다. 즉, text-align:left 이런 스타일을 지정하지 않아도, 왼쪽 정렬이 됩니다.
<div style="text-align:left">
산길을 등지며 시가지로 내려왔었다.<br/>
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.<br/>
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.<br/>
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.<br/>
</div>
<br/><br/>
<strong>오른쪽 정렬(오른쪽 맞춤)</strong>
<div style="text-align:right">
산길을 등지며 시가지로 내려왔었다.<br/>
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.<br/>
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.<br/>
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.<br/>
</div>
<br/><br/>
<strong>가운데(중앙) 정렬</strong> : "제목" 등에서 중앙 정렬을 주로 사용합니다.
<div style="text-align:center">
산길을 등지며 시가지로 내려왔었다.<br/>
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.<br/>
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.<br/>
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.<br/>
</div>
<br/><br/>
<strong>양쪽 맞춤 (양쪽 정렬)</strong> : 워드프로세서에서처럼, 줄바꿈을 하지 않고 즉 Enter키를 치지 않고 1줄로 1문단을 이어서 써야 제대로 양쪽 맞춤이 됩니다.
<div style="text-align:justify">
산길을 등지며 시가지로 내려왔었다. 열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다. 고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다. 산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.
</div>
</body>
</html>
'Computer > HTML,PHP,Javascript' 카테고리의 다른 글
| [HTML] 텍스트 스타일, 크기, 굵기, 색상, 글꼴, 줄간격 설정 (0) | 2020.09.23 |
|---|---|
| [TISTORY] Syntax Highlight (코드 문법 강조) 플러그인 (0) | 2019.05.22 |
| TISTORY Syntax Highlighter 설치 (0) | 2015.12.06 |
| Tistroy 블로그 Adsense 광고 넣기 (상단,하단,사이드바) (0) | 2015.02.21 |
댓글