Day3 VSCODE_CSS Z-Index + Float + Clear

2023. 3. 29. 19:55ㆍCSS

Z-index

- HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠수 있음

- 겹치는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용

- 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치 하게 됨

    <style>
        div#wrapper{
            position: relative;
        }
        div.box{
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            font-size: 25px;
        }

        #b1 {
            left: 50px;
            top:50px;
            background-color: deeppink;
            z-index: 10;
        }
        
        #b2{
            left: 120px;
            top: 80px;
            background-color: gold;
            z-index: 100;
        }
        #b3{
            left: 70px;
            top: 110px;
            background-color: greenyellow;
            z-index: 1;
        }

    </style>
</head>
<body>
    <h1>z-index</h1>
    <div id="wrapper">
        <div id="b1" class='box'>1번째 div</div>
        <div id="b2" class='box'>2번째 div</div>
        <div id="b3" class='box'>3번째 div</div>
    </div>​

Float

- html 요소가 주변(수평으로 나열된)의 다른요소들과 자연스럽게 어울리도록 만들기 위해 사용

- float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐

- float를 적용받은 요소들의 방향을 결졍(left,right)

- 컨텐츠 크기 만큼만 영역을 설정(블록태그)

- float를 적용받은 요소는 다른 요소보다 위쪽에 위치한다(배경보다 위)

    <style>
        #box1{
            padding:20px;
            background-color: gold;
            float: left;  /*왼쪽으로 박힘*/
            margin-right: 20px;
        }
        #box2{
            padding:20px;
            background-color: deeppink;
            float: left;
            margin-right: 20px;
            
        }
        #box3{
            padding:20px;
            background-color: deepskyblue;
            float: left;
            margin-right: 20px;
        }
        #box4{
            padding:20px;
            background-color: yellowgreen;
            float: left;
        }


    </style>
</head>
<body>
    <h1>float2</h1>
    <div id="box1">박스-1</div>
    <div id="box2">박스-2</div>
    <div id="box3">박스-3</div>
    <div id="box4">박스-4</div>​

Clear

- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절

- float 속성이 적용되면 그 이후에 등작하는 모든 요소들은 정확한 위치를 설정하기 힘듬

- clear 속성을 이용하여 float 이후에 등장하는 요소들이 더 이상 float 속성에 영향을 받지 않게함

- 속성: left,rigth,both

    <style>
        body{
            margin: 20px 30px;
            max-width: 800px;
        }
        p{
            padding: 10px;
            text-align: center;
            font-size: 20px;
        }

        #p1{
            float: left;
            width: 38%;
            background-color: gold;
            margin-bottom: 20px;
        }

        #p2{
            float: right;
            width: 54%;
            background-color: aquamarine;
        }

        #p3{
            clear: both;
            background-color: deeppink;
        }

    </style>

<body>
    <h1>clear</h1>
    <div id="p1">
    <p>Lorem</p></div>
    <div id="p2">
    <p>Lorem</p></div>
    <div id="p3">
    <p>Lorem</p></div>
</body>​

728x90

'CSS' 카테고리의 다른 글

Day4 VSCODE_CSS Flex  (0) 2023.03.30
Day4_VSCODE_CSS 다단 레이아웃 + Flex 레이아웃  (0) 2023.03.30
Day3 VSCODE_CSS 마진+ 박스사이징 + 디스플레이 + 포지션  (0) 2023.03.29
Day3_VSCODE_CSS 텍스트+ 배경+ 패딩+ 테두리  (0) 2023.03.29
Day2 VSCODE_CSS  (0) 2023.03.29

관련글

티스토리툴바