여기서는 텍스트를 정렬하는 속성인 text-align을 다룹니다.
text-align의 값으로 올 수 있는 값은 아래와 같습니다.
- left
- right
- center
- justify
예제 text-align.html
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: justify;
border:1px solid gray;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan iaculis tristique. Pellentesque eu erat mattis est semper condimentum. Nunc sed facilisis turpis. Mauris vulputate, purus in suscipit accumsan, dolor lorem elementum mi, non congue metus urna vitae tortor. Duis dictum ipsum non neque elementum iaculis. Sed sodales purus nisl, gravida pellentesque metus vehicula vitae. Suspendisse sed justo ut lorem molestie consectetur. Nullam efficitur quis velit ut scelerisque. Integer at velit pharetra neque efficitur varius.
Vestibulum interdum tellus sed tellus pretium vulputate. Vestibulum a mattis ante. Ut at metus eget eros dictum tristique. Proin sodales nulla eget enim pulvinar imperdiet. Aliquam et congue quam. Duis blandit dui faucibus lorem auctor, ut laoreet dolor aliquet. Vestibulum nec placerat ligula, vitae vehicula neque. Nulla dictum dui et vehicula mattis. Aenean non erat non diam sollicitudin posuere.
Donec placerat felis in elementum ullamcorper. Duis tellus nunc, eleifend non molestie eget, ornare ut risus. Morbi sit amet nunc ante. Donec vestibulum tortor nec massa vestibulum suscipit. Quisque faucibus pulvinar erat, vitae gravida tortor commodo vitae. Suspendisse malesuada urna eu imperdiet tincidunt. Curabitur non scelerisque nulla. Nullam pellentesque ante ex, eget varius odio lacinia nec. Cras sed ligula vitae odio dictum semper ut sed eros. Vivamus sollicitudin elementum felis a accumsan. In vitae mi at sem molestie bibendum nec quis libero. Fusce sed tortor ultrices, maximus risus nec, tincidunt orci.
In hac habitasse platea dictumst. Maecenas congue arcu nulla, vel pharetra mauris condimentum vel. Quisque sit amet sapien arcu. Vestibulum eu consectetur ante, vel iaculis justo. Proin in ipsum vel eros auctor rhoncus sed vel lacus. Vestibulum suscipit dolor eget nunc accumsan semper. In ac porta libero. Pellentesque risus ipsum, egestas sit amet rhoncus eu, finibus sit amet felis. Nunc gravida nulla non elit porttitor, sed maximus arcu semper. Ut nulla ante, ornare nec quam sed, venenatis viverra odio. Ut vitae odio nisi. Nam vitae ullamcorper nulla. Sed eu fermentum velit. Pellentesque id dolor metus. Nullam pharetra pharetra enim, pretium convallis metus ultrices eget. Sed cursus vestibulum orci in cursus.
Integer commodo varius ornare. Vivamus lacus urna, scelerisque nec lectus porta, interdum commodo dolor. Curabitur sagittis diam quis tellus semper commodo. Ut non orci consectetur, cursus urna et, tincidunt est. Donec mollis vulputate tempus. Aliquam sapien leo, venenatis at ligula vitae, vestibulum finibus ipsum. Donec pulvinar pretium mattis. Mauris risus augue, eleifend et suscipit ac, convallis vel nisl. Fusce tincidunt fringilla vulputate. Ut porttitor lorem vitae sodales finibus.
</p>
</body>
</html>
