CSS - float 속성 알아보기




    이번 포스팅에서는 float 속성의 대해서 알아보도록 하겠습니다






     CSS - float 속성 이란?



    float은 사전적 의미론 "뜨다"라는 의미를 가지고 있으며, 웹페이지 에서는 컨텐츠를 가로로 나열하는데 자주 사용됩니다


    또한, 글의 본문 안에서 이미지 혹은 레이아웃을 잡는데 자연스럽게 삽입할때 사용합니다





    [Float 사용 전]






    [Float 사용 후]


    위 그림처럼 메뉴1 ~ 메뉴6 까지 되어 있습니다  float을 이용하여 가로 나열하겠습니다









     CSS - float 속성 사용법




    File : float.html



    <doctype html>
    <html>
    <link rel="stylesheet" type="text/css" href="my.css">
    <body>
    <div id="float">
    <div>메뉴1</div>
    <div>메뉴2</div>
    <div>메뉴3</div>
    <div>메뉴4</div>
    <div>메뉴5</div>
    <div>메뉴6</div>
    </div>
    </body>
    </html>
    



    File : my.css


    @charset "utf-8";
    #float {width:913px;}
    #float div {width:150px;border:1px solid black;}
    




    HTML : div를 통해 메뉴1 ~ 메뉴7 까지 만들었으며, div 전체를 감싸는 요소를 float으로 만들어 습니다


    CSS : div 메뉴를 감싸는 float 요소를 너비를 지정하였고, div의 메뉴를 너비와 테두리를 지정하여 작성하였습니다


    출력결과 : 출력결과를 보시면 메뉴1 ~ 메뉴6 까지 잘출력이 되고 있으나 메뉴가 세로로 나오는것을 보실수 있습니다 이번에는 float 을 이용하여 가로로 정렬하도록 하겠습니다





    1. float 을 이용한 왼쪽정렬


    File : my.css


    @charset "utf-8";
    #float {width:913px;}
    #float div {width:150px;border:1px solid black;}
    #float div {float:left;}


    위 코드는 css에서 div 태그를 float:left로 왼쪽 정렬으로 가로로 정렬하였습니다




    위 출력내용을 보시면 가로로 정렬된것을 확인하실 수 있습니다





    2. float을 이용한 오른쪽정렬



    File : float.html


    <doctype html>
    <html>
    <link rel="stylesheet" type="text/css" href="my.css">
    <body>
    <div id="float">
    <div>메뉴1</div>
    <div>메뉴2</div>
    <div>메뉴3</div>
    </div>
    </body>
    </html>
    


    오른쪽 정렬의 html 코드에서는 효과적으로 설명하기 위해 메뉴를 3개로 줄였습니다





    File : my.css


    @charset "utf-8";
    #float {width:913px;float:left;}
    #float div {width:150px;border:1px solid black;}
    #float div {float:right;}
    


    css에 div 태그를 float:right 로 오른쪽 정렬 했습니다




    출력내용을 보시면 이상하게 느껴지는 부분이 느껴지실 것입니다

    오른쪽으로 정렬은 되었으나, 메뉴1 부터 오른쪽으로 정렬된 것으로 확인하실 수 있습니다





    File : float.html


    <doctype html>
    <html>
    <link rel="stylesheet" type="text/css" href="my.css">
    <body>
    <div id="float">
    <div class="float_01">
    <div>메뉴1</div>
    <div>메뉴2</div>
    <div>메뉴3</div>
    </div>
    </div>
    </body>
    </html>
    




    File : my.css


    @charset "utf-8";
    #float {width:913px;}
    #float .float_01 {float:right;}
    #float .float_01 div {width:150px;border:1px solid black;}
    #float .float_01 div {float:left;}
    





    html : div 를 통해 메뉴1 ~ 메뉴3 까지 만들었으며, div 전체를 감싸는 요소를 float_01 클래스를 추가하였습니다


    css : div 메뉴를 감사는 float_01 클래스를 오른쪽 정렬을 한후 div 를 왼쪽정렬를하는 코드를 작성했습니다


    출력결과 : 출력결과를 보시면 메뉴1 ~ 메뉴3 까지 잘 출력되고 메뉴1 ~ 메뉴3까지 오른쪽 정렬이 된것을 확인 하실 수 있습니다.


    Posted by 서버이야기