CSS - CSS 텍스트정렬 text-align 알아보기





    이번 포스팅에서는 텍스트를 정렬하는 방법인 text-align에 대해서 알아보겠습니다


    text-align은 윈쪽 정렬 / 가운데 정렬 / 오른쪽 정렬 / 양쪽 정렬하는 속성입니다






     CSS - CSS text-align 사용해보기




    1. text-align 왼쪽정렬


    File : my.html


    <html> <head>     <link rel="stylesheet" href="my.css" type="text/css"> </head> <body>     <div id="text_align">         <div class="left">             text-align         </div>     </div> </body> </html>






    File : my.css


    @charset "utf-8";
    #text_align .left {text-align:left; border:1px solid red;}
    


    출력결과 :



    text-align


    처음 왼쪽 정렬은 되어 있기때문에 변한것을 느끼기 힘들것입니다



    2. text-align 가운대 정렬



    File : my.html


    <html> <head>     <link rel="stylesheet" href="my.css" type="text/css"> </head> <body>     <div id="text_align">         <div  class="left">             text-align         </div>         <div  class="center">             text-align         </div>     </div> </body> </html>



    File : my.css


    @charset "utf-8";
    #text_align .left {text-align:left; border:1px solid red;}
    #text_align .center {text-align:left; border:1px solid red;}
    



    출력결과 :


    text-align


    text-align



    두번째는 중앙 정렬은 되어 있기때문에 변한것을 확인하실수 있습니다



    3. text-align 오른쪽 정렬



    File : my.html



    <html> <head>     <link rel="stylesheet" href="my.css" type="text/css"> </head> <body>     <div id="text_align">         <div  class="left">             text-align         </div>         <div  class="center">             text-align         </div>         <div  class="right">             text-align         </div>     </div> </body> </html>



    File : my.css


    @charset "utf-8";
    #text_align .left {text-align:left; border:1px solid red;}
    #text_align .center {text-align:center; border:1px solid red;}
    #text_align .right {text-align:right; border:1px solid red;}
    


    출력결과 :


    text-align


    text-align


    text-align


    세번째는 오른쪽 정렬은 되어 있기때문에 변한것을 확인하실수 있습니다

    Posted by Server-talk 서버이야기