고래씌

[CSS] 3-3. 레이아웃(Layout) 스타일 ③ (float / clear) 본문

Front-End/CSS

[CSS] 3-3. 레이아웃(Layout) 스타일 ③ (float / clear)

고래씌 2023. 11. 2. 18:57

1. 요소 정렬 스타일(float / clear)

▶ float(뜨다, 띄우다, 뜨는 물건) : 요소를 띄어서 좌/우로 정렬하는 속성

▶ clear : float로 인해 띄워져 있는 상태를 해제하는 속성(float 사용시 겹침 문제가 발생하는데 이를 해결해주는 속성)

 

 

■ HTML 파일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9_레이아웃스타일3</title>
    <link href="resources/css/layout3.css" rel="stylesheet">
</head>
<body>

    <h1>요소 정렬 스타일(float / clear)</h1>

    <h3>기본 형태</h3>
    <!-- .test>div7*7 -->
    <div class="test">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>4</div>
        <div>5</div>
    </div>


    <hr>

    <h3>float : left; 형태</h3>
    <!-- .test>div7*7 -->
    <div class="test">
        <div class="float-left">1</div>
        <div class="float-left">2</div>
        <div class="float-left">3</div>
        <div class="float-left">hello</div>
        <div class="float-left">hello</div>
        <div class="float-left">hello</div>
        <div class="float-left">4</div>
        <div class="float-left">5</div>
    </div>

    <h3>float : right; 형태</h3>
    <!-- .test>div7*7 -->
    <div class="test">
        <div class="float-right">1</div>
        <div class="float-right">2</div>
        <div class="float-right">3</div>
        <div class="float-right">hello</div>
        <div class="float-right">hello</div>
        <div class="float-right">hello</div>
       
        <div class="">4</div>
        <div class="">5</div>
    </div>
   
</body>
</html>

 

 

■ css 파일(기본형태)

div{
    border: 1px solid black;
    box-sizing: border-box;
}


.test{
    width: 300px;
    height: 200px;
    background-color: #eee;
}

 

 

■ css 파일(.float-left)

.float-left{
    width: 50px;
    height: 50px;
    background-color: pink;
    /* -> 요소가 깨지는 것을 볼 수 있음 */
}

 

☞ 요소가 깨지는 것을 볼 수 있음

☞ 이런 경우는 요소를 띄어서 왼쪽으로 흐름을 주어 왼쪽 정렬을 시켜야한다.

 

☞ float: left;     => 추가해야한다!!!

 

 

 

■ css파일(float: left 추가 후)

.float-left{
    width: 50px;
    height: 50px;
    background-color: pink;
    /* -> 요소가 깨지는 것을 볼 수 있음 */
 
    float: left;
}

 

☞ 띄어지면서 한줄을 다 차지하려고 하던 block 형식의 오른쪽 margin이 사라졌다.

=> 결과적으로 오른쪽으로 다른요소가 붙을 수 있게됨. 즉, 한줄로 요소가 배치됐다!

 

 

■ css 파일(.float-right)

→ .float-right 도 만찬가지도 "float:right;"를 추가한다!

.float-right{
    width: 50px;
    height: 50px;
    background-color: yellow;
    float:right;
}

 

☞ 오른쪽으로 먼저 작성된 요소가 차곡차곡 쌓이기 때문에 출력 순서가 반대로 보임

 

☞ 하지만... 가장 왼쪽을 보면 4 5가 겹치는 것을 볼 수 있다. 이것을 해제하려면 어떻게 해야할까...?

=> 바로 clear를 사용하는 방법이 있다!

 

 

▶ clear

- 현재 요소부터 겹쳐지는 float 상태를 해제한다.

 

▶ clear의 방향성

- float는 left/right가 나눠져 있는데 지정된 float흐름과 같은 방향으로 해제해야 겹침 문제가 해결된다.

 

 

■ HTML파일 body 태그 안

    <!-- .test>div7*7 -->
    <div class="test">
        <div class="float-right">1</div>
        <div class="float-right">2</div>
        <div class="float-right">3</div>
        <div class="float-right">hello</div>
        <div class="float-right">hello</div>
        <div class="float-right">hello</div>
       
        <!-- 이 위치에서 레이아웃을 끊어주겠다!! => clear-->
        <div class="clear">4</div>
        <div class="">5</div>
    </div>

 

☞ 4번에서 레이아웃을 끊어줘야하니까 <div class="">4</div> 구문에서 수정할 예정

☞ <div class="">4</div>    =>  <div class="clear">4</div>  로 수정

 

 

■ css 파일(.clear 추가)

.clear{
    /* float : left, right를 모두 해제 => both*/
    clear:both;
}

 

☞ 우리는 왼쪽과 오른쪽 모두 해제하기 위해서 both를 이용한다.

 

 

 

☞ 그 결과, 4 5번이 정상적으로 해제된 것을 볼 수 있다.

 

 

2. float를 이용한 좌우 2분할

 

■ HTML 파일 body 태그 안

    <div class="container">
        <div class="div-1 bg-1"></div>
        <div class="div-1 bg-3"></div>
    </div>

 

 

■ css파일

/* 좌우 2분할 */
.container{
    width: 400px;
    height: 200px;
}

.div-1{
    width: 50%;
    height: 100%;
    float: left;
}

.bg-1{background-color: red;}
.bg-2{background-color: orange;}
.bg-3{background-color: yellow;}
.bg-4{background-color: green;}
.bg-5{background-color: blue;}
.bg-6{background-color: navy;}
.bg-7{background-color: violet;}

 

 

 

 

3. float를 이용한 4분할

■ HTML 파일 body 태그 안

    <h2>float를 이용한 4분할</h2>
    <div class="container">
        <div class="row-2">
            <div class="div-1 bg-2"></div>
            <div class="div-1 bg-4"></div>
        </div>
        <div class="row-2">
            <div class="div-1 bg-3"></div>
            <div class="div-1 bg-1"></div>
        </div>
    </div>

 

 

■ css파일

.bg-1{background-color: red;}
.bg-2{background-color: orange;}
.bg-3{background-color: yellow;}
.bg-4{background-color: green;}
.bg-5{background-color: skyblue;}
.bg-6{background-color: navy;}
.bg-7{background-color: violet;}


.container{
    width: 400px;
    height: 200px;
}
 
.div-1{
    width: 50%;
    height: 100%;
    float: left;
}
 
.row-2{
    height: 50%;
}

 

 

 

 

■ HTML 파일 body 태그 안

    <div class="container-3">
        <div class="row-2">
            <div class="div-1">
                <div class="row-2 bg-1"></div>
                <div class="row-2 bg-4"></div>
            </div>
            <div class="div-1 bg-5"></div>
        </div>
        <div class="row-2 bg-3">
        </div>

    </div>

 

 

■ css파일

.bg-1{background-color: red;}
.bg-2{background-color: orange;}
.bg-3{background-color: yellow;}
.bg-4{background-color: green;}
.bg-5{background-color: skyblue;}
.bg-6{background-color: navy;}
.bg-7{background-color: violet;}


.container-3{
    width: 400px;
    height: 400px;
}
 
.row-2{
    height: 50%;
}
 
.div-1{
    width: 50%;
    height: 100%;
    float: left;
}

저작자표시 비영리 변경금지

'Front-End > CSS' 카테고리의 다른 글

[CSS] 4-1. Flex Box ①  (0) 2023.11.03
[CSS] 3-4. 레이아웃(Layout) 스타일 ④ (배치 관련)  (0) 2023.11.03
[CSS] 3-2. 레이아웃(Layout) 스타일 ② (영역 관련 속성)  (0) 2023.11.02
[CSS] 3-1. 레이아웃(Layout) 스타일 ① (화면 분할)(+hidden)  (0) 2023.11.02
[CSS] 2. CSS 선택자 우선순위  (0) 2023.11.02
'Front-End/CSS' Related Articles more