css float 속성 사용하기(안될 때 범위 지정, 오류 해결 방법 2가지)

css 속성 중, 블럭 요소들로 가로형 컨텐츠 레이아웃을 만들 때 많이 사용하는 속성인 float의 정의와 사용 방법에 대한 포스팅입니다.

css float 속성이란?

html에서 사용하는 태그 중 블럭 요소들은 ‘태그 안에 들어있는 컨텐츠 크기’ 에 관계 없이 한 줄 전체를 차지합니다.

예시로 div태그 안에 ‘div 태그’ 라는 텍스트를 넣어보았습니다.

div-태그-가로-크기

만약, 이 div태그 뒤에 이미지나 div태그, p태그 등 다른 태그를 삽입하면 당연히 아랫줄에 삽입됩니다.

인라인 요소들은 줄을 띄우기 위해서 <br>을 사용합니다.

하지만 블럭 요소 태그들은 위 사진에서 볼 수 있듯 한 줄 전체를 사용하기 때문에 <br>을 사용하지 않아도 자동으로 줄이 띄워집니다.

유명한 포털사이트의 메인 화면을 예시로 들 수 있습니다.

div태그-float-속성-사용-예시

하지만 위 사진에는 div태그를 사용한 썸네일 main_topic_thumb 우측에 또 다른 div태그인 내용(div_topic_content) 이 위치해 있는 것을 볼 수 있습니다.

이렇듯, div와 같은 블럭 요소들을 가로형 컨텐츠로 표현하기 위해서 사용하는 것이 float 속성이며 block 요소 태그들을 원하는 위치로 끌어 올려주는 역할을 맡고 있습니다.

css float 속성 적용 방법

1. 부모 태그 지정

float 속성을 부여할 태그들(가로형 컨텐츠를 만들 태그들)을 감싸고 있는 부모 태그가 반드시 있어야 합니다.

해당 포스팅에서는 css float 속성을 부여할 해당 태그들을 div 태그로 묶고 진행하겠습니다.

(태그들을 묶는데 사용하는 부모 요소 태그는 반드시 div태그가 아니더라도 블럭 요소 태그라면 사용이 가능합니다.)

예시 html 태그입니다.

<div class="float_ex">
            
     <div class = "left">좌측</div>
     <div class = "right">우측</div>

</div>Code language: HTML, XML (xml)

위와 같이 html의 body에 기입하고 각 div의 class명을 다르게 지정해주었습니다.

2. float 속성 css 파일에 추가

css파일로 넘어가서 가로 형태로 이어줄 블럭 요소 2개를 선택한 후 float 속성을 지정해줍니다. left, right로 각각 지정해주었습니다.

.float_ex.left{
    float:left;

}
.float_ex.right{
    float:right;
}

/* 각 div 영역 표시 */
.float_ex div{
    width: 50%; height: 100px;
    border:1px solid #f00;
}Code language: CSS (css)

참고로, 부모 태그 안에 같이 묶인 모든 요소에는 float 속성이 모두 들어가 있어야 합니다. 마지막 div 태그만 위 태그의 오른쪽으로 보내고 싶다고 해서 마지막 div 태그에만 css float 속성을 부여할 수 없다는 것입니다.

3. 오류 확인

css 파일에 적용한 css float 속성이 제대로 작동하는지 확인하기 위해 각 div(left, right)에 공간을 부여하고 빨간색 테두리를 적용시켰습니다.

css-float-태그-오류

겉의 검정색 굵은 테두리는 최상위 태그에 적용한 css인데도 float 속성을 적용한 요소들이 상위 요소의 범위 내로 제대로 들어가지 못 하는 오류를 확인할 수 있습니다.

css float 속성 범위 설정이 제대로 안될 때(float 오류 해결)

앞서 입력한 태그가 잘못된 것이 아닙니다.

float 태그는 적용하고자 하는 위치에 다다르면 그 아래에서 해제 설정을 해 주어야 그 범위를 제대로 인식합니다.

clear 속성을 부여해 반드시 마지막 태그 밑에서 해제를 해 주어야 합니다. clear 속성으로 float 속성을 적용한 뒤 태그들이 영향을 받지 않도록 해 주는 과정으로, float 속성을 사용할 때 반드시 필요합니다.

clear 속성 부여 방법

1.html에서 float를 해제

html에서 float 속성을 사용한 마지막 태그의 아랫줄에 임의로 style=clear:both;을 부여하여 오류를 해결할 수 있습니다.

그 뒤 코드가 없다면 블럭 요소 태그인 p태그를 임의로 만들어줍니다.<p></p> 의 형태처럼 아무 내용을 넣지 않아도 됩니다. 그 뒤 코드를 아래처럼 변형시킵니다.

<p style=clear:both;></p>Code language: HTML, XML (xml)

clear의 속성 값으로 both를 사용하는 이유는, 예제 코드에서 float 속성을 적용한 방향이 각각 왼쪽, 오른쪽으로 다르기 때문입니다.

만일 플로트 속성을 left로만 지정한 경우라면 clear:left; 로 사용 가능합니다.

임의로 만든 p태그 대신 inline 요소 태그를 사용하고 싶다면 가능하지만 블럭 요소에 비해 코드 길이가 길어집니다.

<span style="display: inline-block; width: 400px; clear:both;">내용</span>Code language: HTML, XML (xml)

인라인 요소는 width 사이즈를 따로 갖고 있지 않고, 안에 들어 있는 컨텐츠의 크기만큼만 width 사이즈로 가지기 때문에 직접 width 사이즈를 따로 지정해야 하기 때문입니다. 위 태그 중 하나를 골라 적용하면 아래와 같이 float 속성을 적용했을 때의 오류가 해결됩니다.

2. css 가상 선택자 ::after 추가

css 가상 선택자인 ::after를 추가하여 css float 오류를 해결하는 방법입니다. 앞서 소개한 1번 방법보다 훨씬 더 효율적이고 보편적으로 쓰이는 방법입니다.

html로 빈 태그를 만들지 않고, css로 가상의 공간을 만들어 clear 속성을 적용합니다.

float을 적용한 태그의 부모 태그의 가장 아래부분을 가상 선택자로 선택해주는 것이기 때문에 ‘float 속성들을 묶은 div태그::after‘ 의 형태가 됩니다.

.float_ex::after{
    clear:both;
    display:block;
    content: '';
}Code language: CSS (css)

content부분은 가상의 공간에 작성할 내용이 없다면 띄어쓰기 없이 ”로 비워두면 됩니다.

css 코드를 적용한 뒤의 html 코드입니다.

가상선택자-추가하기

html에서 float 속성을 적용한 div의 부모 태그의 안쪽 최하단에 ::after라는 가상의 공간이 생긴 것을 확인할 수 있습니다.

같이 보면 좋은 다른 글

https://investechnews.com/css-%ed%85%8c%eb%91%90%eb%a6%ac-%ec%a2%85%eb%a5%98%ec%99%80-%eb%aa%85%eb%a0%b9border-style-%ec%86%8d%ec%84%b1/
https://investechnews.com/css%eb%a1%9c-a%ed%83%9c%ea%b7%b8-%ec%a0%95%eb%a0%ac%ed%95%98%ea%b8%b0a-tag-%eb%a7%81%ed%81%ac-%ed%83%9c%ea%b7%b8-%ec%a0%95%eb%a0%ac/

overflow로 컨테이너 요소 크기를 조절하는 방법은 이 링크를 참조하세요.


댓글 남기기