2021-03-11
text-align을 이용하면 블록 속성의 태그들의 내부 데이터(텍스트)를 정렬을 할 수 있다. 구체적으로 해당 태그에 어떤 속성들이 있는지 알아보도록 하자.
- left ( 왼쪽 정렬 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
/* 정렬위치를 좀더 자세히 보기 위한 */
/* 넓이 태그와 배경 태그 */
width: 300px;
height: 25px;
background: gray;
/* ----------------- */
text-align: left;
}
</style>
</head>
<body>
<div>
Hello Wrold!
</div>
</body>
</html>
div의 영역에서의 정렬된 위치를 좀 더 명시적으로 파악하기 위해서 넓이와 높이 그리고 배경을 지정해 주었다.
text-align : left는 아래의 이미지와 같이 왼쪽으로 데이터를 정렬시켜준다.
- right ( 오른쪽 정렬 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
/* 정렬위치를 좀더 자세히 보기 위한 */
/* 넓이 태그와 배경 태그 */
width: 300px;
height: 25px;
background: gray;
/* ----------------- */
text-align: right;
}
</style>
</head>
<body>
<div>
Hello Wrold!
</div>
</body>
</html>
text-align : right 는 아래의 이미지와 같이 오르쪽 쪽으로 데이터를 정렬시켜준다.
- center ( 가운데 정렬 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
/* 정렬위치를 좀더 자세히 보기 위한 */
/* 넓이 태그와 배경 태그 */
width: 300px;
height: 25px;
background: gray;
/* ----------------- */
text-align: center;
}
</style>
</head>
<body>
<div>
Hello Wrold!
</div>
</body>
</html>
아마 가장 많이 사용될 내부데이터 가운데 정렬방법이다. text-align : center 는 아래의 이미지와 같이 가운데 쪽으로 데이터를 정렬시켜준다.
