티스토리 뷰

웹/HTML, CSS

[HTML,CSS]float 레이아웃

cll179 2018. 5. 22. 14:59

float 레이아웃

- float를 배치하지 않은 경우 블록 요소인 각 콘텐츠는 소스 코드의 순서대로 위에서 아래로, 즉 세로로 표시한다.

- float가 설정된 블록은 배치 흐름에서 벗어나 왼쪽 또는 오르쪽에 섬처럼 떠 있는 상태가 된다.

- 즉, float를 사용하지 않으면 세로로 놓이는 콘텐츠를 float을 사용하여 옆으로 놓을 수 있다는 뜻이다.

- 일반적으로 왼쪽에 배치하고 싶은 것은 float:letf; 오른쪽은 float:right; 라고 설정한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    header{
      background-color :#ff0000;
    }
    #left{
      width:500px;
      background-color:#d1ec56;
      float:left;
    }
    #right{
      width:280px;
      background-color:rgb(0, 62, 255);
      float:right;
      }
    footer{
      background-color:rgb(99, 24, 83);
      
    }
  </style>
 cs

 

*실행 결과

- 푸터 영역이 가운대로 들어오는 것이 정상이다.

- 여기서 푸터 영역에 clear:both;를 설정해주면 가운데로 들어가는 것을 방지 할 수 있다.

 

1
2
3
4
5
6
footer{
      background-color:rgb(99, 24, 83);
      clear:both;
    }
 
 cs

 

 

*실행 결과

 

 

3단 레이아웃

- 3단으로 만들고 싶은 경우 모든 콘텐츠 영역을 float:left; 로 설정하거나, 마지막 콘텐츠 영역(#cont3)에만 float:right; 로 설정하는 방법이 있다.

 

* 전부 float:left;로 설정한 경우

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
  <style>
    header{
      background-color :#ff0000;
    }
    #cont1{
      float:left;
      margin-right: 20px;
      width:300px;
      background-color: rgb(251, 255, 0);
    }
    #cont2{
      float:left;
      margin-right: 20px;
      width:300px;
      background-color:rgb(163, 255, 77);
    }
    #cont3{
      float:left;
      width:300px;
      background-color: rgb(14, 123, 255);
    }
    footer{
      background-color:rgb(99, 24, 83);
      clear:both;
    }
  </style>
</head>
<body>
  <header>
    헤더영역<br>
    헤더영역<br>
    헤더영역<br>
  </header>
  <div id="cont1">
    콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역
    콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역
  </div>
  <div id="cont2">
    콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역
    콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역
  </div>
  <div id="cont3">
    콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역
    콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역
   </div>
  <footer>
    푸터영역<br>
    푸터영역<br>
    푸터영역<br>
  </footer>
</body>
</html>
 
 cs

 

*실행 결과

 

 

다단 3단 레이아웃

- 일반적으로 메인 콘텐츠 영역을 먼저 작성 한 뒤 서브 콘텐츠 영역을 기술한다.

- 이렇게 하면 float를 유용하게 사용하기 힘들다.

- 이를 해결하기 위해 메인콘텐츠와 서브 콘텐츠를 div로 감쌈으로서 2단 콘텐츠로 만든 뒤, 다시 div 태그 안에서 2단으로 만드는 기법을 이용하면 해결 할 수 있다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
<head>
  <style>
    header{
      background-color :#ff0000;
    }
    #leftcont{
      float:left;
      padding:10px;
      background-color: rgb(0, 0, 0);
      width:600px;
    }
    #cont1{
      margin-right: 20px;
      width:250px;
      background-color: rgb(251, 255, 0);
    }
    #cont2{
      margin-right: 20px;
      width:250px;
      background-color:rgb(163, 255, 77);
    }
    #cont3{
      float:right;
      width:300px;
      background-color: rgb(14, 123, 255);
    }
    footer{
      background-color:rgb(99, 24, 83);
      clear:both;
    }
  </style>
</head>
<body>
  <header>
    헤더영역<br>
    헤더영역<br>
    헤더영역<br>
  </header>
  <div id="leftcont">
    <div id="cont1">
      콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역
      콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역 콘텐츠 1 영역
    </div>
    <div id="cont2">
      콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역
      콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역 콘텐츠 2 영역
    </div>
  </div>
  <div id="cont3">
    콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역
    콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역 콘텐츠 3 영역
   </div>
  <footer>
    푸터영역<br>
    푸터영역<br>
    푸터영역<br>
  </footer>
</body>
</html>
 
 cs

 

*실행 결과

 

===================================================================================

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style>
    header{
      background-color :#ff0000;
    }
    #leftcont{
      float:left;
      padding:10px;
      background-color: rgb(0, 0, 0);
      width:600px;
    }
    #cont1{
      float:left;
      margin-right: 20px;
      width:250px;
      background-color: rgb(251, 255, 0);
    }
    #cont2{
      float:right;
      margin-right: 20px;
      width:250px;
      background-color:rgb(163, 255, 77);
    }
    #cont3{
      float:right;
      width:300px;
      background-color: rgb(14, 123, 255);
    }
    footer{
      background-color:rgb(99, 24, 83);
      clear:both;
    }
  </style>
 cs

 

*실행 결과

 

- 팁을 주자면 항상 바깥 영역 태그부터 float을 적절히 설정한 뒤 내부 영역을 float 설정을 해주면 실수를 줄일 수 있다.

 

 

 

 

 

***float 지정 레이아웃 사용 시 한계와 주의해야 할 점들

- float 속성은 가로로 정렬된 블록의 높이를 자동으로 일정하게,가지런히 할 수 없다. 그래서 한 콘텐츠 영역에 내용이 늘어나거나 내용이 적을 경우 레이아웃이 이상해진다. 그래서 높이가 고정되는 경우에만 float 속성을 이용한다.

 

- 하지만 콘텐츠 윗부분은 가지런히 자동으로 맞춰진다.

 

- 다단 레이아웃을 만들 경우, 자식태그에 float 설정이 되어있다면, 부모 태그의 높이가 사라져버린다.  이 경우 부모 태그에도 float 속성을 부여해야 한다.

 

*부모 태그에 float 속성을 부여하지 않고 해결하는 방법

- 다른 방법으로 클리어픽스 해결 방법이 있지만, 이는 구형 브라우저를 배려한 해결방법이라는 차이일 뿐 기본적인 구조는 같다.

 

- overflow를 이용해 해결할 수 있다. overflow 속성은 고정된 요소에서 콘텐츠가 빠져 나왔을 때 어떻게 표시되는지를 지정하기 위한 속성이다.

 

auto : 스크롤바 표시

scroll: 항상 스크롤바 영역 표시

hidden : 스크롤바도 표시하지 않고 넘치는 콘텐츠도 표시하지 않는다.

visible : 스크롤바를 표시하지 않고 넘치는 콘텐츠를 모두 표시

 

높이가 없어진 부모 요소에 overflow:hidden; 이라 설정하면 결과적으로 클리어픽스와 같은 표시 상태가 된다.

 

※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

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

'웹 > HTML, CSS' 카테고리의 다른 글

[CSS] transition 및 transform  (0) 2018.07.27
[HTML,CSS]position 레이아웃  (0) 2018.05.26
[CSS]미디어 쿼리  (0) 2018.01.23
[CSS]그리드  (1) 2018.01.23
[CSS]박스 모델  (0) 2018.01.22
댓글