Tech Stock logo Tech Stock

word나 excel등에서 쓰이는 정렬과 마찬가지다.
왼쪽 가운데 오른쪽 정렬이 제일 많이 쓰이고
가끔 균등정렬 (justify)을 쓴다.

  • left : 인라인 레벨의 컨텐츠일 경우 라인박스의 왼쪽단에 맞춤
  • right : 인라인 레벨의 컨텐츠일 경우 라인박스의 오른쪽단에 맞춤
  • start : 인라인 레벨의 컨텐츠일 경우 라인박스의 시작단에 맞춤
  • end : 인라인 레벨의 컨텐츠일 경우 라인박스의 끝단에 맞춤
  • center : 인라인 레벨의 컨텐츠일 경우 라인박스의 중앙에 맞춤

다음 코드와 결과를 보자

<!DOCTYPE html>
<head>
    <style>
        .textbox{
            width: 500px;
            border: 2px solid black;
        }
        .textalign1{text-align: left;}
        .textalign2{text-align: right;}
        .textalign3{text-align: center;}
        .textalign4{text-align: start;}
        .textalign5{text-align: end;}
    </style>
</head>
<body>
    <div class = "textbox">
        <div class = "textalign1">
            <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
        </div>

        <div class = "textalign2">
            <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
        </div>

        <div class = "textalign3">
            <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
        </div>

        <div class = "textalign4">
            <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
        </div>

        <div class = "textalign5">
            <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
        </div>
        
    </div>
</body>
</html>

정렬


좀 긴 문장이 어떻게 정렬 되는지 테스트 해보자

아무런 말을 길게 자동생성해주는 사이트
여기서 generate 를 눌러서 뽑아진 글을 복사하자
링크 : Lorem Ipsum


다음과 같이 작성하고 결과물을 보자

<!DOCTYPE html>
<head>
    <style>
        .textbox1{
            width: 500px;
            border: 2px solid black;
            text-align: left;
        }
        .textbox2{
            width: 500px;
            border: 2px solid black;
            text-align: right;
        }.textbox3{
            width: 500px;
            border: 2px solid black;
            text-align: center;
        }.textbox4{
            width: 500px;
            border: 2px solid black;
            text-align: justify;
        }

    </style>
</head>
<body>
    <div class = "textbox1">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc pretium, dapibus ante vel, tristique nunc. Nulla lobortis nisl at condimentum facilisis. Aliquam mattis, nibh sit amet lacinia euismod, urna diam molestie est, sed rutrum erat metus a neque. Fusce vestibulum nisi eget magna commodo pharetra. Morbi mollis purus magna, eu bibendum lorem pulvinar quis. Nullam sodales enim in justo ullamcorper, a molestie eros varius. Vestibulum nec nibh hendrerit, tempor massa rhoncus, lobortis mi.

            Cras laoreet, lectus sollicitudin gravida elementum, erat risus luctus nisl, ultrices mattis est magna sed lorem. Maecenas diam orci, efficitur ut laoreet vitae, lobortis sit amet mauris. Aenean vitae ante maximus, sodales felis imperdiet, pretium purus. Proin nibh urna, blandit eget massa nec, tincidunt auctor risus. Pellentesque dapibus orci eu finibus placerat. Nullam ac tortor ac dolor tincidunt facilisis. Mauris tempor euismod elit. Pellentesque et congue erat. Nulla eu sem placerat, commodo erat vitae, maximus erat. Suspendisse nec varius lectus. Maecenas semper, sapien quis lobortis volutpat, ex lectus rutrum ligula, et pellentesque mauris mi in nisl. Quisque ante lectus, dignissim vel consectetur ac, laoreet vel ligula. Donec mollis sapien sapien, id bibendum ligula malesuada vitae. Sed et nunc velit.
            
            Curabitur felis odio, ultrices interdum enim eget, luctus volutpat leo. Aliquam est leo, euismod non hendrerit in, aliquam vitae ipsum. In ullamcorper sagittis accumsan. Pellentesque tincidunt velit sit amet velit tincidunt ornare. Nulla facilisi. Fusce pellentesque tellus felis, in rutrum erat imperdiet quis. Integer rutrum erat sit amet turpis lacinia condimentum. Duis pellentesque dui a est viverra, vel tincidunt magna sodales.
            
            Vestibulum vel neque ac nulla tempus sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis, urna a mollis porta, lorem libero congue massa, ac varius felis velit nec velit. Maecenas ut ante consequat, vulputate ipsum sit amet, ultricies nunc. Aliquam rutrum luctus nisi eget iaculis. Quisque eu tortor neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            
            Morbi non malesuada nisi. Fusce mollis augue ipsum, sit amet sagittis leo convallis et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum neque velit, accumsan vitae nunc et, efficitur ultrices lectus. Curabitur tincidunt viverra dictum. Aenean lacus metus, ultrices vel feugiat eget, gravida sit amet arcu. Morbi et rutrum nisi, sit amet suscipit ex. Nulla facilisi. 
        </p>
    </div>
    <div class = "textbox2">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc pretium, dapibus ante vel, tristique nunc. Nulla lobortis nisl at condimentum facilisis. Aliquam mattis, nibh sit amet lacinia euismod, urna diam molestie est, sed rutrum erat metus a neque. Fusce vestibulum nisi eget magna commodo pharetra. Morbi mollis purus magna, eu bibendum lorem pulvinar quis. Nullam sodales enim in justo ullamcorper, a molestie eros varius. Vestibulum nec nibh hendrerit, tempor massa rhoncus, lobortis mi.

            Cras laoreet, lectus sollicitudin gravida elementum, erat risus luctus nisl, ultrices mattis est magna sed lorem. Maecenas diam orci, efficitur ut laoreet vitae, lobortis sit amet mauris. Aenean vitae ante maximus, sodales felis imperdiet, pretium purus. Proin nibh urna, blandit eget massa nec, tincidunt auctor risus. Pellentesque dapibus orci eu finibus placerat. Nullam ac tortor ac dolor tincidunt facilisis. Mauris tempor euismod elit. Pellentesque et congue erat. Nulla eu sem placerat, commodo erat vitae, maximus erat. Suspendisse nec varius lectus. Maecenas semper, sapien quis lobortis volutpat, ex lectus rutrum ligula, et pellentesque mauris mi in nisl. Quisque ante lectus, dignissim vel consectetur ac, laoreet vel ligula. Donec mollis sapien sapien, id bibendum ligula malesuada vitae. Sed et nunc velit.
            
            Curabitur felis odio, ultrices interdum enim eget, luctus volutpat leo. Aliquam est leo, euismod non hendrerit in, aliquam vitae ipsum. In ullamcorper sagittis accumsan. Pellentesque tincidunt velit sit amet velit tincidunt ornare. Nulla facilisi. Fusce pellentesque tellus felis, in rutrum erat imperdiet quis. Integer rutrum erat sit amet turpis lacinia condimentum. Duis pellentesque dui a est viverra, vel tincidunt magna sodales.
            
            Vestibulum vel neque ac nulla tempus sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis, urna a mollis porta, lorem libero congue massa, ac varius felis velit nec velit. Maecenas ut ante consequat, vulputate ipsum sit amet, ultricies nunc. Aliquam rutrum luctus nisi eget iaculis. Quisque eu tortor neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            
            Morbi non malesuada nisi. Fusce mollis augue ipsum, sit amet sagittis leo convallis et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum neque velit, accumsan vitae nunc et, efficitur ultrices lectus. Curabitur tincidunt viverra dictum. Aenean lacus metus, ultrices vel feugiat eget, gravida sit amet arcu. Morbi et rutrum nisi, sit amet suscipit ex. Nulla facilisi. 
        </p>
    </div>
    <div class = "textbox3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc pretium, dapibus ante vel, tristique nunc. Nulla lobortis nisl at condimentum facilisis. Aliquam mattis, nibh sit amet lacinia euismod, urna diam molestie est, sed rutrum erat metus a neque. Fusce vestibulum nisi eget magna commodo pharetra. Morbi mollis purus magna, eu bibendum lorem pulvinar quis. Nullam sodales enim in justo ullamcorper, a molestie eros varius. Vestibulum nec nibh hendrerit, tempor massa rhoncus, lobortis mi.

            Cras laoreet, lectus sollicitudin gravida elementum, erat risus luctus nisl, ultrices mattis est magna sed lorem. Maecenas diam orci, efficitur ut laoreet vitae, lobortis sit amet mauris. Aenean vitae ante maximus, sodales felis imperdiet, pretium purus. Proin nibh urna, blandit eget massa nec, tincidunt auctor risus. Pellentesque dapibus orci eu finibus placerat. Nullam ac tortor ac dolor tincidunt facilisis. Mauris tempor euismod elit. Pellentesque et congue erat. Nulla eu sem placerat, commodo erat vitae, maximus erat. Suspendisse nec varius lectus. Maecenas semper, sapien quis lobortis volutpat, ex lectus rutrum ligula, et pellentesque mauris mi in nisl. Quisque ante lectus, dignissim vel consectetur ac, laoreet vel ligula. Donec mollis sapien sapien, id bibendum ligula malesuada vitae. Sed et nunc velit.
            
            Curabitur felis odio, ultrices interdum enim eget, luctus volutpat leo. Aliquam est leo, euismod non hendrerit in, aliquam vitae ipsum. In ullamcorper sagittis accumsan. Pellentesque tincidunt velit sit amet velit tincidunt ornare. Nulla facilisi. Fusce pellentesque tellus felis, in rutrum erat imperdiet quis. Integer rutrum erat sit amet turpis lacinia condimentum. Duis pellentesque dui a est viverra, vel tincidunt magna sodales.
            
            Vestibulum vel neque ac nulla tempus sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis, urna a mollis porta, lorem libero congue massa, ac varius felis velit nec velit. Maecenas ut ante consequat, vulputate ipsum sit amet, ultricies nunc. Aliquam rutrum luctus nisi eget iaculis. Quisque eu tortor neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            
            Morbi non malesuada nisi. Fusce mollis augue ipsum, sit amet sagittis leo convallis et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum neque velit, accumsan vitae nunc et, efficitur ultrices lectus. Curabitur tincidunt viverra dictum. Aenean lacus metus, ultrices vel feugiat eget, gravida sit amet arcu. Morbi et rutrum nisi, sit amet suscipit ex. Nulla facilisi. 
        </p>
    </div>
    <div class = "textbox4">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc pretium, dapibus ante vel, tristique nunc. Nulla lobortis nisl at condimentum facilisis. Aliquam mattis, nibh sit amet lacinia euismod, urna diam molestie est, sed rutrum erat metus a neque. Fusce vestibulum nisi eget magna commodo pharetra. Morbi mollis purus magna, eu bibendum lorem pulvinar quis. Nullam sodales enim in justo ullamcorper, a molestie eros varius. Vestibulum nec nibh hendrerit, tempor massa rhoncus, lobortis mi.

            Cras laoreet, lectus sollicitudin gravida elementum, erat risus luctus nisl, ultrices mattis est magna sed lorem. Maecenas diam orci, efficitur ut laoreet vitae, lobortis sit amet mauris. Aenean vitae ante maximus, sodales felis imperdiet, pretium purus. Proin nibh urna, blandit eget massa nec, tincidunt auctor risus. Pellentesque dapibus orci eu finibus placerat. Nullam ac tortor ac dolor tincidunt facilisis. Mauris tempor euismod elit. Pellentesque et congue erat. Nulla eu sem placerat, commodo erat vitae, maximus erat. Suspendisse nec varius lectus. Maecenas semper, sapien quis lobortis volutpat, ex lectus rutrum ligula, et pellentesque mauris mi in nisl. Quisque ante lectus, dignissim vel consectetur ac, laoreet vel ligula. Donec mollis sapien sapien, id bibendum ligula malesuada vitae. Sed et nunc velit.
            
            Curabitur felis odio, ultrices interdum enim eget, luctus volutpat leo. Aliquam est leo, euismod non hendrerit in, aliquam vitae ipsum. In ullamcorper sagittis accumsan. Pellentesque tincidunt velit sit amet velit tincidunt ornare. Nulla facilisi. Fusce pellentesque tellus felis, in rutrum erat imperdiet quis. Integer rutrum erat sit amet turpis lacinia condimentum. Duis pellentesque dui a est viverra, vel tincidunt magna sodales.
            
            Vestibulum vel neque ac nulla tempus sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis, urna a mollis porta, lorem libero congue massa, ac varius felis velit nec velit. Maecenas ut ante consequat, vulputate ipsum sit amet, ultricies nunc. Aliquam rutrum luctus nisi eget iaculis. Quisque eu tortor neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            
            Morbi non malesuada nisi. Fusce mollis augue ipsum, sit amet sagittis leo convallis et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum neque velit, accumsan vitae nunc et, efficitur ultrices lectus. Curabitur tincidunt viverra dictum. Aenean lacus metus, ultrices vel feugiat eget, gravida sit amet arcu. Morbi et rutrum nisi, sit amet suscipit ex. Nulla facilisi. 
        </p>
    </div>
</body>
</html>

왼쪽 정렬

긴문장의 왼쪽정렬

오른쪽 정렬

긴문장의 오른쪽정렬

가운데 정렬

긴문장의 가운데정렬

균등 정렬

긴문장의 균등정렬