[HTML&CSS] box-sizing, float, clear

Language & Solution/HTML&CSS
2019. 10. 8. 17:55

| box-sizing

box-sizing 속성은 width의 크기를 어떤 기준으로 할 것인지를 정하는 속성입니다. 박스 모델에서 width의 값을 토대로 콘텐츠 영역의 크기를 결정하는 것이죠. 처음 감을 잘 못잡을 수도 있지만 천천히 포스팅을 따라오다보면 쉽게 이해할 것입니다!

box-sizing에서 사용할 수있는 값은 다음과 같습니다.

box-sizing : content-box | border-box

content-box	width 속성값을 콘텐츠 영역 너비 값으로 사용합니다. (기본값)
border-box	width 속성값을 콘텐츠 영역 및 테두리(border)까지 포함한 박스 모델 전체 너비 값으로 사용합니다.

참고로 content-box보다는 border-box가 width를 통해 콘텐츠 영역의 크기를 계산하기 쉽기 때문에 콘텐츠 영역의 크기를 요구사항에 정확히 맞추기 위해서는 border-box를 이용하는 게 더 좋을 것입니다.

| box-sizing 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            box-sizing: content-box;
            width: 300px;
            height: 150px;
            margin: 10px;
            padding: 30px;
            border: 3px solid red;
        }
        .box2 {
            box-sizing: border-box;
            width: 300px;
            height: 150px;
            maring: 10px;
            padding: 30px;
            border: 3px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        box-sizing = "content-box"
    </div>
    <div class="box2">
        box-sizing = "border-box"
    </div>
</body>
</html>

content-box와 border-box의 차이를 위 예시에서 보여줍니다. 같은 width, height, margin, padding 및 border 사이즈를 똑같이 정해줬어도 서로 다른 크기가 되는 것을 알 수 있습니다.
이 경우는 content-box는 width 속성값을 딱 컨텐츠 크기만을 정해서 된 것이고 border-box는 경계선까지 포함해서 생긴 현상입니다.

<content-box 사이즈 - width는 300>

<border-box 사이즈 - width 포함 border까지 300>

| float

float 속성은 웹 요소를 문서 위에 떠 있게 만듭니다. '떠 있다'는 것은 왼쪽 구석 혹은 오른쪽 구석에 해당 요소가 배치된다는 뜻입니다. float에서 사용할 수 있는 값은 다음과 같습니다.

float: left | right | none

left	해당 요소를 문서의 왼쪽으로 배치
right	해당 요소를 문서의 오른쪽으로 배치
none	좌우 어느 쪽으로도 배치하지 않음

| float 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .left-symbol {
            float: left;
            border-radius: 30px;
            width: 300px;
            height: 300px;
            background: #F46075;
            margin : 0px 50px;
        }
    </style>
</head>
<body>
    <div class="left-symbol">
    </div>
    <h1>This is pink symbol: CIRCLE </h1>
    <p> PINK는 정말 아름답고 예술적인 색상이다.</p>
</body>
</html>

style 태그에서 지정한 .left-symbol 클래스를 보면 float: left 속성이 들어가 있습니다. 이 클래스의 float 속성에 따라서 해당 요소는 왼쪽으로 자연스럽게 위치하게 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            padding: 20px;
            margin: 0px 10px;
            background: #F46075;
            float: left;
        }
        .box2 {
            padding: 20px;
            margin: 0px 10px;
            background: #ffcc33;
            float: left;
        }
        .box3 {
            padding: 20px;
            margin: 0px 10px;
            background: purple;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

style 태그에서 지정한 box1, box2, box3클래스를 보면 각각 float에 left, left, right 속성이 들어가 있습니다. 이 클래스의 float 속성에 따라서 left 요소는 왼쪽으로 자연스럽게 위치하게 됩니다. 또한 right 요소는 자연스럽게 오른쪽에 위치하게 됩니다.

| clear

float 속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 float 속성을 사용하지 않은 요소는 float 요소 밑에 파묻히게 됩니다. (float가 적용된 요소가 '부유'한다는 뜻이 바로 이런 뜻입니다! float가 적용되지 않은 요소의 위로 떠다닌다는 것이죠)

따라서 float가 아닌 다음 요소가 이런 취급을 받지 않게 하려면 float 속성을 해제해 줘야하는 데 그것이 바로 clear 속성입니다.

clear 속성은 다음과 같은 값이 들어가게 됩니다.

clear : none | left | right | both

none	float 속성을 해제 하지 않습니다. (기본값)
left	float의 left 속성을 해제 합니다.
right	float의 right 속성을 해제 합니다.
both	float의 모든 속성을 해제 합니다.

| clear 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            padding: 40px;
            margin: 0px 10px;
            background: #F46075;
            float: left;
        }
        .box2 {
            padding: 40px;
            margin: 0px 10px;
            background: #ffcc33;
            float: left;
        }
        .box3 {
            padding: 40px;
            margin: 0px 10px;
            background: purple;
            float: right;
        }
        .plain-box {
            padding: 20px;
            margin: 0px 10px;
            background: blue;
        }
        .clear-box {
            padding: 20px;
            margin: 0px 10px;
            background: crimson;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="plain-box">no float</div>
    <div class="clear-box">float removed</div>
</body>
</html>

style 태그에서 지정한 box1, box2, box3클래스를 보면 각각 float에 left, left, right 속성이 들어가 있습니다. 이 클래스의 float 속성에 따라서 left 요소는 왼쪽으로 자연스럽게 위치하게 됩니다. 또한 right 요소는 자연스럽게 오른쪽에 위치하게 됩니다. (위 float 예제와 동일)
주목해야 할 것은 clear 속성의 여부 입니다. plain-box, clear-box 클래스를 보시면 plain-box는 clear 속성을 사용하지 않고 float 속성도 사용하지 않았기 때문에 float 속성인 요소들 밑에 가라앉게 됩니다. 반면에 clear 속성을 써서 float 속성의 영향이 미치지 않도록 한 clear-box 클래스는 밑으로 가라앉지 않고 동등한 위치를 차지하게 됩니다. (display: block과 같이 동작)

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

'Language & Solution > HTML&CSS' 카테고리의 다른 글

[HTML&CSS] column 속성으로 다단으로 편집 (multi-layout edit) (1)	2019.10.22
[HTML&CSS] position 속성 정리하기! (1)	2019.10.10
[HTML&CSS] 마진(margin) 속성, 패딩(padding) 속성 (0)	2019.10.08
[HTML&CSS] 콘텐츠(content) 영역 (0)	2019.10.07
[HTML&CSS] 테두리(border) 영역 (0)	2019.10.07