컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post 일본어 가운뎃점, '가운데 점' 입력 방법; Japanese 'Katakana Middle...Python/파이썬] 이진파일 열기/읽기/출력 예제: Binary File Open-Rea...C, Perl에서, 연 파일을 닫아야 하는 이유는? fclose() close()로Python/파이썬] 텍스트 파일 열기/읽기/출력 예제: Text File Open-Rea...Python/파이썬] 표준 에러 출력으로, 에러 메시지 출력하는 법: STDERRPython/파이썬] 외부 명령어 실행 함수, 외부 프로그램 호출 실행; System, E...Java/자바] 일시 중지/정지 Pause 시키기; Enter키를 누르면 계속됩니다 메시지...Java/자바] 올해가 윤년인지 평년인지 여부 판단; Current Year is Leap...Java/자바] 특정 연도, 윤년 여부 판단 메소드(함수); is Leap Year 사용법...Excel/엑셀 VBA] 1, 2, 3, 4분기 구하기 (사분기); Quarter of t...

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>




위의 코드, 브라우저 출력 결과 화면


왼쪽 정렬(왼쪽 맞춤) : 좌측 정렬이 기본값입니다. 즉, text-align:left 이런 스타일을 지정하지 않아도, 왼쪽 정렬이 됩니다.
산길을 등지며 시가지로 내려왔었다.
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.





오른쪽 정렬(오른쪽 맞춤)
산길을 등지며 시가지로 내려왔었다.
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.





가운데(중앙) 정렬 : "제목" 등에서 중앙 정렬을 주로 사용합니다.
산길을 등지며 시가지로 내려왔었다.
열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다.
산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.





양쪽 맞춤 (양쪽 정렬) : 워드프로세서에서처럼, 줄바꿈을 하지 않고 즉 Enter키를 치지 않고 1줄로 1문단을 이어서 써야 제대로 양쪽 맞춤이 됩니다.
산길을 등지며 시가지로 내려왔었다. 열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다. 고개를 들어 보니, 머리 위로 희미한 햇빛이 비치고 있었다. 산길 위에 서서, 빗속의 먼 어딘가를 하염없이 바라보는 듯한 암울한 기분에서 헤어날 수 없었다.






글이 아닌, 그림(이미지;사진)을 좌우/가운데로 정렬하는 법: ▶▶ HTML-CSS] 이미지/사진, 화면 가운데(중앙)로, 우측으로 정렬 방법; IMG Center Right

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top