CSS : 09 Float

2020-12-30 학원 내용 정리 겸 복습

 

float 속성 : 

웹 페이지 레이아웃 구성시 블록요소를 좌우로 배치하고 싶을때 사용하는 속성

물론, flexbox 레이아웃을 더 많이 사용하기도 하지만

flexbox 모델을 지원하지 않는 브라우져를 위해 여전히 사용되기도 함.

단, 설정된 float 속성을 해제하려면 clear 속성을 지정해줘야 함.

 

clear속성 :

설정된 float 속성을 해제할때 사용

left, right, both등의 값을 설정할 수 있음

 

<div class="container">
    <div class="box d1">1</div>
    <div class="box d2">2</div>
    <div class="box d3">3</div>
    <div class="box d4">4</div>
</div>

        .box {width: 100px; height: 100px; padding: 25px; font-size: 3em; color: black;}
        .d1{background: chartreuse; float: left;}
        .d2{background:cyan; float:left;}
        .d3{background:yellowgreen; float:right;}
        .d4{background:red; float:right;}
        .container {width: 960px; border: 1px solid orange; margin:100px auto 300px;}

  

실습예제)

웹페이지 틀을 float으로 짜보기

<div id="header">header</div>
<div id="container">
    <div id="aside">asid</div>
    <div id="main">main</div>
</div>
<div id="footer">footer</div>

  #header{width: 960px; height: 125px; background: gold;}
        #footer{width: 960px; height: 100px; background: red;}
        #container{width: 960px; height: 500px; overflow: hidden;}
        #aside{width: 180px;  background: rebeccapurple; height:500px; float:left;}
        #main{width:780px; height:500px; background: dodgerblue; float:right;}

+ 실습예제 )

위 그림을 세세하게는 말고 위의 예제처럼 틀 잡아보기

<div id="header">header</div>
<div id="navi">navi</div>

<div id="container">

    <div id="section">section1
        <div id="section2">section2</div></div>

    <div id="sidebar">sidebar</div>

</div>
<div id="footer">footer</div>

   #header {background: cadetblue; width:960px; height: 100px;}
        #navi {background: darkblue; width:960px; height: 100px; color:white; margin-top:20px}
        #footer {background: darkorange; width:960px; height: 100px; color:white; margin-top:20px}
        #container {width:960px; height:500px; overflow: hidden}
        #section {width:600px; height:500px; float:left; background: yellowgreen}
        #section2{width:600px; height:500px; float: left; background: yellow; margin-top:220px;}
        #sidebar{width:360px; height:500px; float: right; background: blueviolet}

얼추 모양은 맞췄는데 제대로된 방법으로 맞춘지는 잘모르겠다 내일 선생님 코드를 보고 수정할부분이 있으면

수정해야겠다.