배치 속성

요소를 컨테이너 내에서 어떻게 배치할 지를 지정하는 속성

•

배치 속성 종류

•

기본 예시 코드

배치 속성 종류

속성	설명	기본 예시 코드
float	요소를 좌측 또는 우측으로 정렬합니다.	float: left;
clear	플로트된 요소의 영향을 받지 않도록 설정합니다.	clear: both;

기본 예시 코드

•

float

•

clear

float

•

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배치 속성 - float</title>
    <link rel="stylesheet" href="css/01_float.css">
</head>
<body>
    <center><h1>float</h1></center>
    <div class="container">
        <!-- (.item>(h1{float}+p>(img)))*3 -->
        <div class="item">
            <h1>float</h1>
            <p>
                <img src="img/float.jpg" alt="이미지" width="120">
                국방상 또는 국민경제상 긴절한 필요로 인하여 법률이 정하는 경우를 제외하고는, 사영기업을 국유 또는 공유로 이전하거나 그 경영을 통제 또는 관리할 수 없다. 제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다. 국무위원은 국정에 관하여 대통령을 보좌하며, 국무회의의 구성원으로서 국정을 심의한다. 대통령은 법률에서 구체적으로 범위를 정하여 위임받은 사항과 법률을 집행하기 위하여 필요한 사항에 관하여 대통령령을 발할 수 있다.
            </p>
        </div>
        <div class="item">
            <h1>float : left;</h1>
            <p>
                <img src="img/float.jpg" alt="이미지" class="left" width="120">
                국방상 또는 국민경제상 긴절한 필요로 인하여 법률이 정하는 경우를 제외하고는, 사영기업을 국유 또는 공유로 이전하거나 그 경영을 통제 또는 관리할 수 없다. 제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다. 국무위원은 국정에 관하여 대통령을 보좌하며, 국무회의의 구성원으로서 국정을 심의한다. 대통령은 법률에서 구체적으로 범위를 정하여 위임받은 사항과 법률을 집행하기 위하여 필요한 사항에 관하여 대통령령을 발할 수 있다.
            </p>
        </div>
        <div class="item">
            <h1>float : right;</h1>
            <p>
                <img src="img/float.jpg" alt="이미지" class="right" width="120">
                국방상 또는 국민경제상 긴절한 필요로 인하여 법률이 정하는 경우를 제외하고는, 사영기업을 국유 또는 공유로 이전하거나 그 경영을 통제 또는 관리할 수 없다. 제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다. 국무위원은 국정에 관하여 대통령을 보좌하며, 국무회의의 구성원으로서 국정을 심의한다. 대통령은 법률에서 구체적으로 범위를 정하여 위임받은 사항과 법률을 집행하기 위하여 필요한 사항에 관하여 대통령령을 발할 수 있다.
            </p>
        </div>
    </div>
</body>
</html>
HTML
복사

•

CSS

.container {
    position: relative;
    width: 600px;
    border: 3px dashed orange;
    margin: auto;
}

.item {
    border: 2px solid #ddd;
    height: 330px;
}

img.left { float: left;   /* fl */  }
img.right { float: right; /* flr */}
CSS
복사

clear

•

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clear</title>
    <link rel="stylesheet" href="css/02.clear.css">
</head>
<body>
    <center><h1>clear</h1></center>

    <div class="container">
        <h1>clear : none; (default)</h1>
        <div class="inner">
            <div class="item left"></div>
            <div class="item right"></div>
            <div class="item next"></div>
        </div>
    </div>

    <div class="container">
        <h1>clear : left;</h1>
        <div class="inner">
            <div class="item left"></div>
            <div class="item next clear-left"></div>
        </div>
    </div>

    <div class="container">
        <h1>clear : right</h1>
        <div class="inner">
            <div class="item right"></div>
            <div class="item next clear-right"></div>
        </div>
    </div>

    <div class="container">
        <h1>clear : both;</h1>
        <div class="inner">
            <div class="item left"></div>
            <div class="item right"></div>
            <div class="item next clear-both"></div>
        </div>
    </div>



</body>
</html>
HTML
복사

•

CSS

.container {
    position: relative;
    width: 800px;
    min-height: 500px;
    border: 3px dashed orange;
    margin: auto;
}

.item {
    width: 300px;
    height: 200px;
}
h1 { text-align: center; }

.inner { height: 100px; }

.left { float:  left; background-color: pink; }
.right { float: right; background-color: lightblue; }
.next { background-color: cornflowerblue; }

.clear-left { clear: left;      /* cll */ }
.clear-right { clear: right;    /* clr */ }
.clear-both { clear: both;      /* clb */ }
CSS
복사

clearfix - 가상선택자를 활용한 float clear

•

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clearfix</title>
    <link rel="stylesheet" href="css/03_clearfix.css">
</head>
<body>
    <center><h1>clearfix</h1></center>
    <h3>float 로 인해 다음 요소에 영향을 미치는 것을 해당 부모요소에서 해소하는 기법</h3>

    <div class="container">
        <h1>clear - :after</h1>
        <!-- :after : 문장의 마지막 영역에 가상요소를 지정하는 가상선택자 -->
        <div class="inner">
            <div class="item left"></div>
            <div class="item right"></div>
            <!-- 
                :after
                - 여기서 clear 속성을 적용하여, 다음요소에 미치는 영향을 방지
            -->
        </div>

        <div class="item next"></div>
    </div>
</body>
</html>
HTML
복사

•

CSS

.container {
    position: relative;
    width: 1024px;
    min-height: 500px;
    border: 5px dashed orange;
    margin: auto;
}

.item {
    width: 300px;
    height: 200px;
}

/* 👩‍🏫 clearfix */
.inner:after {
    clear: both;
    display: block;
    content: '';
}

h1 { text-align: center; }

.left {
    float: left;
    background-color: pink;
    height: 600px;
    border: 5px solid red;
}

.right {
    float: right;
    background-color: lightblue;
    height: 400px;
    border: 5px solid blue;
}

.next {
    width: 100%;
    background-color: cornflowerblue;
}
CSS
복사