[CSS] 레이아웃2 :: 요소 정렬 스타일 (float / clear)+ 분할

요소 정렬 스타일

속성	의미
float (뜨다, 띄우다)	요소를 띄워서 좌/우로 정렬하는 속성
clear	float로 인해 띄워져 있는 상태를 해제하는 속성 (float로 인해 겹쳐지는 현상을 제거)
	left -> 겹침 현상을 제거 (조건 : 방향성이 같아야한다)
	both -> left/ right를 모두 제거한다

-> float : left; 로 인한 겹침 현상을 제거하기 위해선

clear : left; 를 작성해야 한다. (방향성이 같아야 한다.)

 

 

1) float 적용 X

/* 모든 div태그에 1px 검정 실선 테두리 지정 */
div{ border : 1px solid black; }

/* float-test 클래스 선택 */
.float-test{
    width: 300px;
    height: 200px;
    background-color: rgb(255, 247, 199);
}

<div class="float-test">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>Hello</div>
    <div>World</div>
    <div>5</div>
</div>

 

 

2) float : left 적용  (왼쪽 정렬)

/* float:left 예제 */
.float-left {
    width: 50px;
    height: 50px;
    background-color: rgb(255, 219, 225);
    float : left;
}

/* float로 인한 겹침 현상 제거 (clear)  */
.float-clear{
    background-color: rgb(255, 201, 151);
    color : white;

    /*clear : left;*/ /* float : left로 인한 겹침 현상 제거 */

    /* 양쪽 모두 겹침 현상 제거 clear : both*/
    clear : both;  /* float : left / right 를 모두 제거*/
}

<div class="float-test">
    <div class="float-left">1</div>
    <div class="float-left">2</div>
    <div class="float-left">3</div>
    <div class="float-left">4</div>

    <div class="float-clear">Hello</div>
    <div>World</div>
    <div>5</div>
</div>

display: inline-block; 을 적용하면 자동으로 간격이 생겨버리니깐 float:left; 적용
float-test에게 영향을 받지 않아야 하는 첫 번째 영역에 float-clear 클래스 작성

새로운 <div class="float-clear">를 만들어서 그 안에 넣으면 아래와 같이 된다.

 

3) float : right 적용  (오른쪽 정렬)

/* floar : right 예시*/
.float-right{
    width: 50px;
    height: 50px;
    background-color: rgb(188, 255, 255);

    float : right;
}

/* float로 인한 겹침 현상 제거 (clear)  */
.float-clear{
    background-color: rgb(255, 201, 151);
    color : white;

    /*clear : left;*/ /* float : left로 인한 겹침 현상 제거 */

    /* 양쪽 모두 겹침 현상 제거 clear : both*/
    clear : both;  /* float : left / right 를 모두 제거*/
}

<div class="float-test">
    <div class="float-right">1</div>
    <div class="float-right">2</div>
    <div class="float-right">3</div>
    <div class="float-right">4</div>

    <div class="float-clear">Hello</div>
    <div>World</div>
    <div>5</div>
</div>

4) float를 이용한 영역 좌우 2분할

/* 좌우 2분할 */
#d1{
    width: 600px;
    height: 200px;
    border : 2px solid black;
}

#d1-1{
    width: 50%;
    height: 100%;
    float: left;
    background-color: rgb(202, 255, 202);
    border: none;
}

#d1-2{
    width: 50%;
    height: 100%;
    float: left;
    background-color: rgb(203, 203, 255);
    border: none;
}

<div id="d1">
    <div id="d1-1"></div>
    <div id="d1-2"></div>
</div>

inline 블럭이었으면 두 줄이 되었지만 float이기때문에 width : 50%에 한 줄로 가능

 

5) 영역 4분할

/* 4분할 */
#wrapper{
    width: 600px;
    height: 400px;
    border: 1px solid black;
}

.bg-red{background-color: rgb(255, 224, 224);}
.bg-yellow{background-color: rgb(255, 255, 219);}
.bg-green{background-color: rgb(218, 255, 218);}
.bg-blue{background-color: rgb(228, 228, 255);}

/* 상/하 2분할 */
.up-down{
    width: 100%;
    height: 50%;
    border : none; /* 테두리 삭제 */
}


/* 좌/우 2분할 */
.left-right{
    width: 50%;
    height: 100%;
    float:left;
    border: none;
}

<!-- 600 * 400  -->
<div id="wrapper">

    <!-- 상/하 2분할 -->
    <div class="up-down">
        <!-- 좌/우 2분할 -->
        <div class="left-right bg-red"></div>
        <div class="left-right bg-yellow"></div>
    </div>

    <div class="up-down">
        <!-- 좌/우 2분할 -->
        <div class="left-right bg-green"></div>
        <div class="left-right bg-blue"></div>
    </div>
</div>

 

6) 영역 4분할_2

/* 4분할 */
#wrapper2{
    width: 300px;
    height: 300px;
    border: 1px solid rgb(0, 0, 0);
}

.bg-red{background-color: rgb(255, 224, 224);}
.bg-yellow{background-color: rgb(255, 255, 219);}
.bg-green{background-color: rgb(218, 255, 218);}
.bg-blue{background-color: rgb(228, 228, 255);}

/* 상/하 2분할 */
.up-down{
    width: 100%;
    height: 50%;
    border : none; /* 테두리 삭제 */
}


/* 좌/우 2분할 */
.left-right{
    width: 50%;
    height: 100%;
    float:left;
    border: none;
}

<div id="wrapper2">
    <div class="up-down">
        <div class="left-right">
            <div class="up-down bg-red"></div>
            <div class="up-down bg-green"></div>
        </div>
        <div class="left-right bg-blue"></div>
    </div>

    <div class="up-down bg-yellow"></div>
</div>