반응형
=================================
=================================
=================================
출처ㅣ http://mwultong.blogspot.com/2007/01/html-css-text-align-tag.html
HTML-CSS] 텍스트 중앙(가운데) 정렬, 양쪽/우측/좌측 맞춤 태그; Text Align Tag
Tuesday, January 30, 2007
텍스트나 문단은 기본적으로 "왼쪽 맞춤"입니다. 즉, 왼쪽에 찰싹 붙어 있습니다. 이것을 가운데나 오른쪽 또는, 워드프로세서처럼 "양쪽 맞춤"으로 정렬하는 방법입니다. 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>
<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>
위의 코드, 브라우저 출력 결과 화면
왼쪽 정렬(왼쪽 맞춤) : 좌측 정렬이 기본값입니다. 즉, text-align:left 이런 스타일을 지정하지 않아도, 왼쪽 정렬이 됩니다.
오른쪽 정렬(오른쪽 맞춤)
가운데(중앙) 정렬 : "제목" 등에서 중앙 정렬을 주로 사용합니다.
양쪽 맞춤 (양쪽 정렬) : 워드프로세서에서처럼, 줄바꿈을 하지 않고 즉 Enter키를 치지 않고 1줄로 1문단을 이어서 써야 제대로 양쪽 맞춤이 됩니다.
산길을 등지며 시가지로 내려왔었다.
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.
오른쪽 정렬(오른쪽 맞춤)
산길을 등지며 시가지로 내려왔었다.
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.
가운데(중앙) 정렬 : "제목" 등에서 중앙 정렬을 주로 사용합니다.
산길을 등지며 시가지로 내려왔었다.
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.
양쪽 맞춤 (양쪽 정렬) : 워드프로세서에서처럼, 줄바꿈을 하지 않고 즉 Enter키를 치지 않고 1줄로 1문단을 이어서 써야 제대로 양쪽 맞춤이 됩니다.
산 길을 등지며 시가지로 내려왔었다. 열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다. 고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다. 산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.
글이 아닌, 그림(이미지;사진)을 좌우/가운데로 정렬하는 법:
▶▶ HTML-CSS] 이미지/사진, 화면 가운데(중앙)로, 우측으로 정렬 방법; IMG Center Right
반응형
728x90
=================================
=================================
=================================
//출처: http://blog.naver.com/hee0133?Redirect=Log&logNo=120117010679
div로 css코딩을 하는데.. 세로 정렬 해결법
table의 td는 style의 vertical-align을 지정하여, 텍스트와 이미지를 배치할 수 있지만,
div 태그안에서는 vertical-align이 적용되지 않습니다.
<div style=" #position: absolute; #top: 100%; display: table-cell; vertical-align: bottom;">
<div style=" #position: relative; #top: -100%">
내용을 하단으로...
</div>
</div>
</div>
<div style=" #position: absolute; #top: 100%; #left: 50%; display: table-cell; vertical-align: bottom; text-align: center;">
<div style=" #position: relative; #top: -100%; #left: -50%;">
내용을 하단 중앙으로...
</div>
</div>
</div>
<div style="display: table; width: 500px; height: 100px; #position: relative; overflow: hidden; border: 1px solid red;">
<div style=" #position: absolute; #top: 50%; #left: 50%; display: table-cell; vertical-align: middle; text-align: center;">
<div style=" #position: relative; #top: -50%; #left: -50%;">
내용을 가운데로...
</div>
</div>
</div>
그리고 display: table-cell;이 적용된 태그는 테이블의 셀과 동일하게 취급하기 때문에
td와 마찬가지로 vertical-align을 사용할 수 있습니다.
CSS # 핵(#position과 #top, #left)을 이용해서 텍스트의 위치를 배치하고,
div 태그안에서는 vertical-align이 적용되지 않습니다.
div에 vertical-align을 지정하려면 아래와 같이 합니다.
x:left, y:bottom 정렬
<div style="display: table; width: 500px; height: 100px; #position: relative; overflow: hidden; border: 1px solid red;"><div style=" #position: absolute; #top: 100%; display: table-cell; vertical-align: bottom;">
<div style=" #position: relative; #top: -100%">
내용을 하단으로...
</div>
</div>
</div>
x:center, y:bottom 정렬
<div style=" #position: absolute; #top: 100%; #left: 50%; display: table-cell; vertical-align: bottom; text-align: center;">
<div style=" #position: relative; #top: -100%; #left: -50%;">
내용을 하단 중앙으로...
</div>
</div>
</div>
x:center, y:center 정렬
<div style="display: table; width: 500px; height: 100px; #position: relative; overflow: hidden; border: 1px solid red;">
<div style=" #position: absolute; #top: 50%; #left: 50%; display: table-cell; vertical-align: middle; text-align: center;">
<div style=" #position: relative; #top: -50%; #left: -50%;">
내용을 가운데로...
</div>
</div>
</div>
display: table;은 table 태그 이외의 것을 table처럼 화면에 표시하도록 합니다.
그리고 display: table-cell;이 적용된 태그는 테이블의 셀과 동일하게 취급하기 때문에
td와 마찬가지로 vertical-align을 사용할 수 있습니다.
하지만 IE에서는 display: table;과 display: table-cell;을 모두 지원하지 않기 때문에,
CSS # 핵(#position과 #top, #left)을 이용해서 텍스트의 위치를 배치하고,
IE 이외의 브라우저에서는 vertical-align과 text-align 값으로 위치를 조정합니다.
=================================
=================================
=================================
반응형
'WEB' 카테고리의 다른 글
| asp 연산자 조건문 관련 (0) | 2013.06.19 |
|---|---|
| [Asp] switch case 문 (0) | 2013.06.19 |
| [asp] 특정문자가 포함된 문자열 찾기, 문자열 길이 등등 문자열 관련 (1) | 2013.06.19 |
| html 텍스트 말줄임 (0) | 2011.10.28 |
| HTML 자동 줄바꿈, 자동 늘리기 (0) | 2011.08.17 |
댓글 영역