레이아웃 float에 대해 알아봅시다.(이전에 사용되던 방식) 1 / 3

float이 뭘까?

웹페이지를 제작하다보면 가로(위 -> 아래)로 정렬이 됩니다.

이때 정렬 해주는 명령어 중 하나인 float이 있습니다.

 

block요소는 원래 세로로만 나열이 되지만 float을 이용하여 가로로 배치할 수 있습니다.

밑에서 float을 지정하는 방법 + float 해제하는 방법도 나열해보도록 하겠습니다.

 

float을 적용해보자

float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성인데,

세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다.

 

float 속성

1. left : 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함

2. right : 요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함

3. float : none  - float에 속성을 부여한 것을 취소합니다.

4. clear: both - float된 박스 중 어느 쪽도 채우지 않고 다시 한단으로 배치 합니다.

 

float 적용전

★float 사용시 width값을 계산을 꼭 하시고 사용해야 합니다.^^

 

<div id="wrap">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="side"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

코드설명

1.HTML코드를 보면 div 태그 header, nav, side, content, footer을 만들었습니다.

2.위 -> 아래로 블록들이 쌓입니다.

 

float 적용 후

★float 사용시 width값을 계산을 꼭 하시고 사용해야 합니다.^^

 

HTML

<div id="wrap">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="side"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

-----------------------------------------------------------------------------------

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #FFF3E0;
}
#wrap {
    width: 1200px;
    height: 1080px;
    margin: 0 auto;
}
#header { 
    width: 1200px;
    height: 100px;
    background-color: #FFE0B2;
}
#nav {
    width: 1200px;
    height: 100px;
    background-color: #FFCC80;
}
#side {
    width: 400px;
    height: 780px;
    background-color: #FFB74D;
    float: left;
}
#content {
    width: 800px;
    height: 780px;
    background-color: #FFA726;
    float: left;
}
#footer {
    width: 1200px;
    height: 100px;
    background-color: #FF9800;
    clear: both;
}

 

코드 설명

1.HTML코드를 보면 div 태그 header, nav, side, content, footer을 만들었습니다.

2. 선언하면 단순히 위에서 아래로 정렬이 됩니다.

3.이때 옆으로 넘기고자 하는 요소(side) 에 float: left를 넣어줍니다. 

4.또 옮겨지는 요소(content)에도 float: left를 써줍니다.

5.그럼 그 다음 footer가 깨져서 나옵니다.

6.이때 footer에 clear: both를 써주면 해결 해줍니다.

(clear: both - float된 박스 중 어느 쪽도 채우지 않고 다시 한단으로 배치 합니다.)

 

clear 속성에 대해서도 알아보자

float으로 레이아웃을 설정하고 난 뒤에 콘텐츠가 겹치거나 깨지는 현상이 생깁니다.

겹치거나 깨짐 현상을 해결을 주는 것이 clear입니다.

 

clear 속성

1.left : float된 박스 중 좌측이 짧을 때 좌측의 빈공간부터 채워 내려옵니다.

2.right : float된 박스 중 우측이 짧을 때 우측의 빈 공간부터 채워 내려옵니다.

3.both : float된 박스 중 어느 쪽도 채우지 않고 다시 한단으로 배치 합니다.

 

clear속성을 사용 안하였을때

★맨밑에 div 태그인 footer가 존재합니다. 

★하지만 clear 속성을 사용하지 않아서 깨짐 현상이 발생하였습니다.

//clear 속성이 없습니다.
#footer {
    width: 1200px;
    height: 100px;
    background-color: #FF9800;
}

clear 속성을 적용하였을 때

 //clear 속성이 적용되어 있습니다.
 #footer {
    width: 1200px;
    height: 100px;
    background-color: #FF9800;
    clear: both;
}

코드 설명

1.이렇게 float을 사용해서 내가 원하는 영역을 채워 나갈 수 있습니다.

2.하지만 clear속성이 없다면 이미지가 겹치거나 깨지는 현상이 발생합니다.