HTML&CSS 12일차 (정리x)

💜 HTML,CSS
HTML&CSS 12일차 (정리x)

Genie_. 2024. 3. 23. 21:58
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>디스플레이(중요)</title>
</head>
<style>
    /*
        inline : 인라인 속성으로 된다.
                => 안에 있는 요소만큼만 크기를 차지해서 width, height 안된다
        block : block 속성으로 된다.
                => 한 줄을 전부 차지하며, width, height 가능하다.
                => width/height 설정하면 설정된 대로 되고, 한줄 전부 차지한다.
        inline-block : inline 성격도 있는 block요소
                => 한 줄을 전부 차지하지는 않는다. 근데 block에 설정할 수 있는거 전부 가능하다.
                => width/height 설정하면 설정된 대로 되는데, 그 부분만 차지해서 옆에 다른 요소가 올 수 있다.
        width/height 는 최대한 안하는게 좋음 ! padding이랑 margin을 최대한 이해
        none: 표시안함. 영역을 차지하지 않음
     */
    button{
        display: block; /* 블록형식으로 바꿀 수 있음 */
    }
    div{
        display: inline; /* 인라인 형식으로 바꿀 수 있음 */
    }
    section {
        /*
            relative: 요소가 원래 있었던 위치가 기준이 된다.
            absolute: 요소의 부모 위치가 기준이 된다. 근데 그 부모의 판단은,
                    부모 중 position 속성이 있는 부모가 기준이 된다.
         */
        width: 100px;
        height: 100px;
        background-color: #3a7c3a;
        border: 1px solid black;
        color: white;
        box-sizing: border-box;
    }
    #box1{
        left: 10px; /* 맨 왼쪽에서 10px 띄운 위치로 가라 */
    }
    #box2{
        position: relative;
        /*top: 10px;*/
        left: 20px;
        bottom: 20px;
    }
    #box3{
        position: absolute;
        right: 0;
        /*left: 30px;*/
        /*top: 0;*/
    }
</style>
<body>
    <section id="box1"></section>

    <article>
        <section id="box2">
            <section id="box3">BOX3</section>
        </section>
    </article>

    <div>DIV1</div>
    <div>DIV2</div>

    <button>버튼1</button>
    <button>버튼2</button>
    <div>DIV2</div>

</body>
</html>
728x90
저작자표시 비영리 변경금지