개발나라 스용공주

[HTML/CSS] float 속성의 이론 상세 설명 - inline, block, overflow, clear 본문

WEB/HTML & CSS

[HTML/CSS] float 속성의 이론 상세 설명 - inline, block, overflow, clear

스용공주 2024. 10. 23. 02:57
728x90
728x90

이번 글은 float 속성에 대한 이론 설명글이다.

 

 

[ float란? ]

float 속성이란, 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치하는 것을 지정하는 속성이다.

float 속성에는 4가지 종류가 있다.

  • none(default) : float 속성을 적용하지 않음
  • left : 요소가 컨테이너의 왼쪽 배치
  • right : 요소가 컨테이너의 오른쪽 배치
  • margin:auto : 요소를 중앙에 배치

아래 사진을 보면서 위의 의미를 이해할 수 있다.

큰 박스가 부모이고 노란색 작은 박스가 자식의 상황

 

아무것도 적용하지 않았을 때 보통 기본적으로 왼쪽으로 배치가 되는데 그것은 float : left가 아니라 float : none이다.

 

 

[ overflow 적용하는 경우 ]

아래 예제는 overflow를 적용해야하는 경우의 예제이다.

예제 1은 부모 border안에 자식 box가 있는 상황이다. 예제 1에 float를 적용할 경우 overflow를 적용하게 된다.

 

예제 1)

[ 실행결과 ]

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 서식꾸미기</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

 

[ css ]

.parent {
    border : 2px solid black;
    width : 500px;
}
.child {
    width : 200px;
    height : 200px;
    background-color: coral;
}

 

 

 

 

예제 2)

예제 1의 자식부분에 float : left를 적용할 경우 어떻게 결과가 변화하는지 확인하면 아래 사진과 같다.

float속성으로 인해 자식 box가 공중에 뜨게 되면서 부모 border가 품어 생겼던 부모의 높이(=자식의 높이)가 사라졌다.

높이를 다시 예제 1의 실행결과 값처럼 만들어야 할 때 overflow가 필요하다.

 

 

 

예제 3)

예제 3은 float를 적용한 예제 2에 overflow를 적용하여 다시 예제 1처럼 만드는 것이다.

html은 예제 1 ~ 예제 3 모두 동일하다.

 

아래 css를 보면 부모에 overflow : hidden을 적용해주었더니 아래 실행결과 사진과 같이 예제 1처럼 돌아온 것을 확인할 수 있다.

부모에 따로 height값을 주게 되면 자식이 변화할때마다 맞춰줘야하지만 overflow : hidden을 사용하면 자동으로 자식의 값에 맞춰 부모의 높이가 변화하게된다.

 

[ css ]

.parent {
    border : 2px solid black;
    width : 500px;
    overflow: hidden;
}
.child {
    width : 200px;
    height : 200px;
    background-color: coral;
    float : left;
}

 

[ 실행결과 ]

 

[ margin:auto을 inline에 적용하기 ]

margin : auto의 경우 inline속성의 특성 때문에 margin 적용이 불가능하므로 inline의 속성을 가진 태그들을 margin : auto를 적용하게 되면 적용되지 않는다.

그럴 경우 부모에 text-align : center를 해준다.

 

 

 

[ clear 속성이란? ]

float속성의 경우 속성을 적용해줬으면 이후에 해당 속성을 사용하지 않을 때 해제해줘야한다.

아래 예제를 만들 경우 하늘색과 코랄색 박스에 각각 float 속성의 left와 right가 들어가 있기 때문에 그 아래에 있는 박스의 경우 clear 속성을 통해 float를 해제시켜줘야한다.

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 서식꾸미기</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent">
        <!-- <div>block -->
        <div class="none">
            float : none
        </div>
        <div class="left">
            float : left
        </div>
        <div class="right">
            float : right
        </div>
        <div class="none2">
            clear : both
        </div>
    </div>
</body>
</html>

 

[ css ]

.parent {
    border : 2px solid black;
    width : 500px;
}

.none {
    padding : 15px;
    width : 500px;
    height : 50px;
    text-align: center;
    background-color : violet;
    box-sizing: border-box;
}
.left {
    padding : 15px;
    width : 200px;
    height : 50px;
    text-align: center;
    background-color : lightskyblue;
    box-sizing: border-box;
    float : left;
}
.right {
    padding : 15px;
    width : 300px;
    height : 50px;
    text-align: center;
    background-color : salmon;
    box-sizing: border-box;
    float : right;
}
.none2 {
    padding : 15px;
    width : 500px;
    height : 50px;
    text-align: center;
    background-color : violet;
    box-sizing: border-box;
    clear : both;
}

 

 

728x90
728x90

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

[HTML/CSS] 순서를 만드는 가상클래스 nth-child(), nth-of-type()  (0) 2024.10.26
[HTML/CSS] 애니메이션이 들어간 버튼 만들기 - 가상클래스 hover와 transition  (0) 2024.10.26
[HTML/CSS] 글씨 그림자 레이어 만들기 / css로 글씨 꾸미기  (0) 2024.10.22
[HTML/CSS] 자식선택자와 자손선택자 차이점 이론 설명 / 부모요소와 자식요소  (0) 2024.10.22
[HTML] html 기본 구문 단축키 / <!DOCTYPE html> 한번에 불러오기  (0) 2024.10.20
'WEB/HTML & CSS' Related Articles more
Comments