[퍼블]CSS 레이아웃 가로배치

float 

• none-> 속성 적용 x(디폴트값)
• left -> 박스를 왼쪽으로 배치
• right -> 박스를 오르 쪽으로 배치
• margin : auto -> 박스를 중앙으로 배치(block요소만 가능함, inline, inline-block요소는 불가능함)
• text-align:center -> inline, inline-block요소를 중앙으로 보내려고 할 경우에는 부모 요소에 해당 속성값을 주면 됨 

   <div class="parent">
    <div class="child"></div>
   </div>

 

 

.parent{
    border: 5px solid;
    width: 600px;
}

.child{
    background-color: blue;
    width: 200px;
    height: 300px;
    float: left;
}

예제 1

윗 html 태그와 css를 적용했을 경우에는 자식 요소가 공중에 붕 떠서 left 된 느낌이기 때문에 부모 요소의 높이 값이 지정되어 있지 않음. 자식 태그에 float : none 값을 줬을 경우에도 출력값은 동일함.

예제2

하지만 부모 요소의 CSS에 overflow:hidden 속성을 주면 자식의 높이 사이즈에 맞춰짐.

 

예제3

다음에는 float 요소를 지우고 margin : auto값을 넣었을 경우 중앙에 잘 정열 된 것을 확인할 수 있음

 

.parent{
    border: 5px solid;
    width: 600px;
    overflow: hidden;
    text-align: center;
}

.child{
    background-color: blue;
    width: 200px;
    height: 300px;
    display: inline-block;
}

다음에는 display 요소를 inline-block으로 변경 뒤 부모요소에 text-align: center 속성을 넣어줘 보았다.

예제4

마찬가지로 잘 적용된 것을 볼 수 있었다.

 

clear 속성 : 상위에 태그가 float 속성을 같을 경우, 아래의 태그는 자동으로 float 속성을 갖게 된다, 이것을 갖지 않겠다고 선언하는 것이 clear 속성이다.

• left -> float left 속성 상속 해지
• right -> right 속성 해지
• both -> 모든 상속 해지

    <div class="parent">
        <div class="top"> top</div>
        <div class="left"> left</div>
        <div class="right"> right</div>
        <div class="bottom"> both</div>
    </div>

 

 

.parent{
    border: 5px solid;
    width: 200px;
    text-align: center;
}

.top{
    background-color: green;
    height: 20px;
}

.left{
    background-color: red;
    height: 20px;
    width: 100px;
    float: left;
}

.right{
    background-color: blue;
    height: 20px;
    width: 100px;
    float: right;
}

.bottom{
    height: 20px;
    clear: both;
}

clear 예제

가로 배치 예제

1, float 및 overflow활용

2, display inline-block 활용

 

1번 예제

    <div class="parent">
        <div class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3</div>
    </div>

 

 

.parent{
    border: 5px solid black;
    width: 300px;
    overflow:hidden;
}

.child{
    background-color: red;
    text-align: center;
    width: 100px;
    height: 50px;
    float: left;
    border: 1px solid blue;
    box-sizing: border-box;
}

1번

2번 예제

.parent{
    border: 5px solid black;
    width: 350px;
    text-align: center;
}

.child{
    background-color: red;
    text-align: center;
    width: 100px;
    height: 50px;
    border: 1px solid blue;
    display: inline-block;
} */

inline-block을 사용한 예제

두 가지 방법으로 가로 레이아웃을 선택할 수 있다.