WEB/CSS

[CSS] CSS text-align 을 통한 데이터(텍스트)정렬 방법 알아보기

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 는 아래의 이미지와 같이 가운데 쪽으로 데이터를 정렬시켜준다.

저작자표시 비영리

'WEB > CSS' 카테고리의 다른 글

[CSS] CSS opacity 를 이용한 background 의 투명도 조절 (0)	2021.03.15
[CSS] CSS background 와 background-color의 차이 알아보기. (0)	2021.03.13
[CSS] CSS white-space 개행문자를 처리하는 방법 알아보기. (0)	2021.03.10
[CSS] CSS 백그라운드 이미지 가운데 정렬하는 / 반복없애는법 (0)	2021.03.09
[CSS] CSS 포지션(position) Relative / Absolute 알아보자! (0)	2020.10.15

Contents

새소식

인기 검색어