Javascript & JQuery & CSS

Javascript & JQuery & CSS > text-align - left, center, right, justify (text-align 속성을 이용한 정렬)

등록일 : 2017-07-14 17:47 조회수 : 34,190

CSS 를 이용해서 데이터를 정렬하는 방법에 대해 알아보겠습니다.

그중에서 가장 많이 사용하는 text-align 속성입니다. 그 중 글자가 많을 경우 양쪽 정렬인 justify 는 아주 유용합니다.

div 내부에 글을 넣고 text-align 속성값을 각각 left, center, right, justify 4지로 표현해 보았습니다.

그리고 justify 를 제대로 이해하기 위해 기본 정렬과 justify 적용한 정렬을 별도로 만들었습니다.

	.align-left { text-align: left; }       //왼쪽정렬
	.align-center { text-align: center; }	//가운데 정렬
	.align-right { text-align: right; }		//오른쪽 정렬
	.align-justify { text-align: justify; }	// 양쪽 정렬

align-left 왼쪽정렬

align-center 중앙정렬

align-right 오른쪽정렬

align-justify 양쪽정렬 양쪽정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. 양쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. align-justify 양쪽정렬 양쪽정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. 양쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. align-justify 양쪽정렬 양쪽정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. 양쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다.

align-left 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. 왼쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. align-left 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. 왼쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. align-left 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다. 왼쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다.

목록으로