레이아웃 배치_display_position_float

소정·2023년 5월 3일

WEB_FRONT

목록 보기

4/20

[1] display

1) inline

넓이 값 안먹음

1.1) inline-block

넓이값 먹는 인라인 요소

인라인 -> 블럭

none

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Lyout CSS</title>

    <style>
        /* display 속성 */
        #aa{display: inline;}
        #aa{display: inline-block; width: 300px;}

        /* 인라인 -> 블럭 */
        img.bb{display: block;}

        /* display : none */
        #cc{display: none;}
    </style>

    </head>
    <body>
        
        <!-- display 속성 -->
        <p id="aa">Hello world</p>
        <a href="#">Google</a>
        <strong>Good Morning</strong>
        
        <img class="bb" src="./image/pome.png" alt="포메">

        <ul>
            <li>aaa</li>
            <li id="cc">111</li>
            <li>222</li>
        </ul>

    </body>
</html>

[2] position

위치 설정 방법

1. static - 원래 놓여질 자리에 놓여는 것

2. relative - 원래 놓여질 위치에서 이동

3. absolute - 웹브라우저 좌측 상단이 기준

4. fixed - 윈도우 기준으로 고정

<!-- position 속성 -->
        <div class="aaa">
            <p id="one">block #1</p>
            <p id="two">block #2</p>
            <p id="three">block #3</p>
        </div>

        <style>

            #one{
                background-color: cyan;
                width: 200px;
                height: 50px;
            }

            #two{
                background-color: yellow;
                width: 200px;
                height: 50px;

                position: static;   /*원래 놓여질 위치에 배치됨(default)*/
                position: relative; /*원래 놓여질 위치에서 위치속성으로 조정 가능함*/
                position: absolute; /*문서의 좌측 상단을 기준으로 위치 설정(원래 배치될 위치에서 벗어남)*/

                /* 위치좌표 설정속성 [position:static 일때는 무시됨]*/
                left: 50px;
                margin-top: 30px;
            }

            #three{
                background-color: lightgreen;
                width: 200px;
                height: 50px;
            }

        </style>

[3] Float

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float</title>

        <style>
            img.a{float: left; margin: 20px;}
        </style>
    </head>
    <body>
        
        <img src="./image/sunshine.jpg" alt="sunshine" width="160" height="120" class="a">

        <p style="background-color: aqua; border: solid; ">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quibusdam, atque totam consequatur debitis deleniti tempora reiciendis ex suscipit autem quia, quos deserunt esse accusamus sed sequi assumenda natus vitae?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi neque necessitatibus autem veniam, obcaecati quia deserunt enim eum amet laudantium. Unde laboriosam iste libero sequi quis ipsam! Adipisci, ex dolores.
        </p>

		<!-- 공간의 여유가 있으면 이 영역도 float의 영향을 받음 -->
        <p style="clear: both;">여기는 위 기사와 상관없는 새로운 블럭</p>

    </body>
</html>