Please Enable JavaScript!
Gon[ Enable JavaScript ]

스타일시트 CSS text-align 을 이용한 정렬 방법

스타일시트 CSS

스타일시트 CSS text-align 을 이용한 정렬 방법

 

CSS 를 이용해서 데이터를 정렬하는 방법에 대해 알아보겠습니다. 그중에서 가장 많이 사용하는 text-align 속성입니다. 그 중 글자가 많을 경우 양쪽 정렬인 justify 는 아주 유용합니다.

 

▼ 아래는 text-align 을 이용한 4가지 정렬 방법을 적용한 전체소스입니다. div 내부에 글을 넣고 text-align 속성값을 각각 left, center, right, justify 4지로 표현해 보았습니다. 그리고 justify 를 제대로 이해하기 위해 기본 정렬과 justify 적용한 정렬을 별도로 만들었습니다. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title> 정렬 </title>
<style type="text/css">
.vi{
border-radius: 5px;
	background-color: #2e5b86;
	border-style: solid;
border-color: #5d5d5d;
    	border-width: 2px;
    	color: #FFFFFF;

	margin-bottom: 5px;
	padding:15px
}
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }
</style>
 </head>

 <body>
  <div id="" class="align-left vi">align-left 왼쪽정렬</div>
  <div id="" class="align-center vi">align-center 중앙정렬</div>
  <div id="" class="align-right vi">align-right 오른쪽정렬</div>
  <div id="" class="align-justify vi">
  	align-justify 양쪽정렬<br/><br/>양쪽정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. 
  	양쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다.</div>
  <div id="" class="vi">
  	기본정렬 <br/><br/>양쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. 
  	양쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다.</div>
 </body>
</html>

▼ 아래 그림은 div 에 들어가 있는 텍스트들의 위치 적용 결과입니다. 영어 단어의 의미대로 글자가 정렬되며 justify 는 양쪽 정렬을 의미합니다. 그러니까 글자의 양쪽 끝 공간을 동일하게 주기 위해서 글 간격이 조절되는 것입니다. 스타일시트 CSS text-align 을 이용한 정렬 방법

 

▼ 좀더 이해를 돕기 위해 양쪽 정렬과 기본 정렬의 오른쪽 끝으로 가보시기 바랍니다. 아래 그림처럼 안했을때와 했을 때의 차이가 있죠. 적용했을 때는 왼쪽과 공간이 동일하죠. 이렇게 긴 문장일수록 양쪽정렬을 해 주는 것이 훨씬 보게 좋습니다.

스타일시트 CSS text-align 을 이용한 정렬 방법


Posted by 녹두장군

댓글을 달아 주세요

  1. 초보 2020.06.29 14:13  댓글주소  수정/삭제  댓글쓰기

    감사합니다 덕분에 양쪽 정렬에 대해 제대로 이해하고 갑니다.