정렬이란 사용자들이 알아보기 쉽게 텍스트나 태그를 왼쪽, 가운데 또는 오른쪽에 배치하는 작업을 말합니다.
가장 기본적인 텍스트 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬, 양쪽 정렬에 대해서 배워보겠습니다. 텍스트 정렬인 text-align과 관련 있는 속성값은 4가지가 존재합니다.
이해를 돕기 위해서 간단한 예제를 작성해보겠습니다. 먼저 left, right, center에 대한 간단한 예제입니다.
<!DOCYPE html>
<html>
<head>
<title>텍스트 정렬</title>
<style>
.text_center{
text-align: center;
}
.text_left{
text-align: left;
}
.text_right{
text-align: right;
}
</style>
</head>
<body>
<div class="text_left">
<span>왼쪽 정렬</span>
</div>
<div class ="text_right">
<span>오른쪽 정렬</span>
</div>
<div class="text_center">
<span>가운데 정렬</span>
</div>
</body>
</html>
위와 같이 아주 간단한 정렬 결과를 확인해볼 수 있습니다.
다음은 양쪽 정렬에 대한 코드와 결과입니다. 양쪽 정렬은 이해하기 쉽도록 양쪽 정렬 기능을 주지 않았을 때와 줬을 때를 비교하여 보여드리겠습니다. 또한 확실히 비교하기 위해서 텍스트 길이가 충분히 긴 애국가 1절 가사를 이용하였습니다!
<!DOCYPE html>
<html>
<head>
<title>텍스트 정렬</title>
<style>
.text_initial{
text-align: initial;
}
.text_justify{
text-align: justify;
}
</style>
</head>
<body>
<div class="text_initial">
<span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</span>
</div>
<br>
<div class="text_justify">
<span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</span>
</div>
</body>
</html>
오른쪽 끝에 **'만'**부분을 보시면 양쪽 정렬을 한 경우는 왼쪽과 오른쪽 여백의 크기를 맞춰주기 위해서 기존 정렬과 다른 모습을 알 수 있습니다.
위와 같은 방법으로 가로 정렬을 하며 세로 정렬을 하고 싶은 경우 padding, margin 속성을 추가하여 사용하면 됩니다. 예시로 첫 번째 예제 .text_center 코드를 수정해보겠습니다.
.text_center{
text-align: center;
**padding 10px 0px;**
}
위와 같은 방법으로 가로 정렬을 하며 세로 정렬을 하고 싶은 경우 padding, margin 속성을 추가하여 사용하면 됩니다.
padding 코드를 추가하면 기존의 글자 위치보다 더 아래쪽으로 내려간 결과를 볼 수 있습니다.
text_center{
text-align: center;
**margin: 10px 0px;**
}