Front-endCSS

CSS 레이아웃 핵심속성 float

⏱ 읽기 소요 시간: 1:01

1교시

float로 가로배치 하기

가로배치는 소박한 꿈이다.
그러나 공식적으로 지원되는 게 없다.
float도 가로 배치를 위한 속성이 아니다.

공식적인 방법이 아닌 방식으로 가로배치를 하려고 하기 때문에
문제가 발생한다.

박스가 위로 떠있어야만이 그 박스 주위로 Dummy Text들이 그 주위로 흐른다.
(같은 선상에 있지 않아야 한다.)

float의 목적은 이미지와 텍스트가 어우러지게끔 하고 싶은 것이며,
이미지는 공간을 차지 않도록 한다.

부모 요소가 아닌 body영역은 float된 요소의 높이 조차도 인식하고 있다.
body를 root요소라고 한다.

1
2
3
4
5
6
7
8
9
부모 {
  display: flow-root;
  /* overflow: hidden과 관련되어 있음 */
  /* 실무에서는 부모요소에 clearfix를 주는 방법을 많이 사용 */
}

자식 {
  float: left;
}

1번 예제

이제 float로 박스 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
<!DOCTYPE html>
<html>
  <head>
    <title>float로 양옆 나누기</title>
    <style>
      body {
        background-color: #ddd;
        color: dodgerblue;
      }

      .wrapper {
        width: 500px;
        background-color: white;
        border: 1px solid;
        margin: 50px auto;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        padding: 10px;
        display: flow-root;
        /* body요소를 따라서 흐른다.  */
      }

      .box {
        font-family: "arial";
        font-weight: bold;
        font-size: 50px;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: #c7e1fd;
        box-shadow: inset 0 0 1px;
        display: inline-block;
        float: left;
      }

      .box.right {
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="box">1</div>
      <!-- .box의 디자인은 유지된 상태에서 
        float: right를 추가해야하므로 
        1) class에 box는 그대로 두고,
        right라는 클래스를 추가
        -> 2) float: right를 주기
    -->
      <div class="box right">2</div>
      <!-- <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div> -->
    </div>
  </body>
</html>

2교시

2번 예제

유지보수에 최적화하는 습관을 들여야 한다.

sidebar에 margin-right: 20px를 주면 되지만,
유지보수를 위해서는

float된 요소는 마크업 순서가 중요하다.
float되는 요소는 마크업 순서가 contents보다 더 앞에 와야 한다.
float는 상단에서 float가 이루어지고 그 후에 다른 요소가 그 주위로 흐르는 거니까
float 요소는 마크업 순서가 먼저 와야 한다!!!

float는 시각적인 위치랑 마크업 위치가 다르다!!!

이 특성 때문에 많이들 고생한다!!

이제 float로 사이드바를 만들어보자.

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
  <head>
    <title>float로 사이드바 만들기</title>
    <style>
      p {
        margin: 0;
      }

      body {
        background-color: #ddd;
        color: dodgerblue;
      }

      .wrapper {
        width: 800px;
        margin: 50px auto;
        background-color: white;
        display: flow-root;
      }

      .sidebar {
        background-color: #c7e1fd;
        float: left;
        /* float가 적용되면, 왼쪽이든 오른쪽이든 컨텐츠가 붙어야하니까 
        contents 크기만큼 크기가 줄어버림 */
        /* sidebar랑 contents는 시작점이 같음
        sidebar랑 contents랑 겹치면 안되니까 contents가 오른쪽으로 밀린 것임  
         */
        width: 100px;
        height: 300px;
        /* 보통, height는 사이즈르 주지 않는 게 좋다. */
      }

      .contents {
        /* 1) 부모요소인 sidebar에 margin-right: 20px를 주면 된다.
          margin-left: 100px;(비추천!)


2) 유지보수를 위해서는 자식 요소인 contents에 margin-left: 100px을 주면 된다. 
-> 좋은 방법은 X (sidebar의 너비를 모르면 사용할 수 X)
3) flow-root는 가장 최상위 요소처럼 보여지게 하라는 뜻
float된 요소랑 float되지 않은 요소랑 독립되게 하려면, 자식 요소인 contents에
display: flow-root;를 준다.
*/
        display: flow-root;
        /* 장점: sidebar의 너비가 줄거나 늘어나도, 
    wrapper의 너비가 줄거나 늘어나도
    수정할 게 X
     */

        border: 5px solid mediumpurple;
        padding: 20px;
      }
      .sidebar.right {
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="sidebar">Sidebar</div>
      <div class="sidebar right">Sidebar</div>
      <p class="contents">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
        dis parturient montes, nascetur ridiculus mus. Donec quam felis,
        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
        Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
        dapibus. Vivamus elementum semper nisi. Aenean vulputate ele
      </p>
      <!-- <div class="sidebar right">Sidebar</div> -->
    </div>
  </body>
</html>

3번 예제

자식이 float가 되면, 부모 기준에서 정리를 하지 않으면 안된다.
부모 기준에서 정리를 하지 않으면, 뒤따라오던 content와 엉켜버린다.

float로 이미지와 텍스트가 어우러지게 만들어보자!

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
  <head>
    <title>float로 이미지와 텍스트가 어우러지게!</title>
    <style>
      p {
        margin: 0;
      }

      body {
        background-color: #ddd;
        color: dodgerblue;
      }

      .wrapper {
        width: 600px;
        margin: 50px auto;
        padding: 50px;
        background-color: white;
        display: flow-root;
      }
      .section {
        background-color: #efefef;
        float: right;
        margin: 20px;
        margin-bottom: 20px;
        display: flow-root;
        /* 자식이 float가 되면, 부모 기준에서 정리를 하지 않으면 안된다. */
        /* 부모 기준에서 정리를 하지 않으면, 뒤따라오던 content와 엉켜버린다. */
        /* -> 따라서, 부모 요소인 .section에 display: flow-root;를 준다. */
        border: 10px solid;
        /* 색깔을 안주면, 전경색으로 자동으로 들어감 */
      }
      .section:last-child {
        margin-bottom: 0px;
        /* 마지막 section아래에 margin 20px이 들어가면 맨 위와 대칭이 맞지 않으므로
          가상 선택자를 써서 마지막 margin-bottom을 주지 않도록 만들기
          */
      }
      .section p {
        padding: 20px;
        display: flow-root;
      }
      .section img {
        float: left;
      }
      .section.right {
        text-align: right;
      }
      .section.right img {
        float: right;
      }
      .section.mario {
        color: dodgerblue;
      }
      .section.luigi {
        color: mediumorchid;
      }
      .section.toad {
        color: orange;
      }

      /* 내가 작성한 코드 */
      /* .section img {
        float: left;
      }
      .seciton p {
        float: right;
        padding: 10px;
      }
      .first {
        border: 2px solid blue;
      }
      .second {
        border: 2px solid purple;
      }
      .second img {
        float: right;
      }
      .second p {
        float: left;
        display: flow-root;
      }
      .third {
        border: 2px solid yellow;
      } */
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="section mario">
        <img src="images/mario2.png" />
        <p>
          <strong>Mario</strong> ipsum dolor sit amet, consectetuer adipiscing
          elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </p>
      </div>
      <div class="section luigi right">
        <img src="images/luigi2.png" />
        <p>
          <strong>lugi</strong> ipsum dolor sit amet, consectetuer adipiscing
          elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </p>
      </div>
      <div class="section toad">
        <img src="images/toad2.png" />
        <p>
          <strong>toad</strong> ipsum dolor sit amet, consectetuer adipiscing
          elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </p>
      </div>
    </div>
  </body>
</html>

<!-- border 색깔이 다름 -->
<!-- lugi만 오른쪽으로 -->

4번 예제

display: flow-root;를 대체하는 방법

  • CSS를 공부한 사람들도 왜 display: flow-root;를 처음 보는 경우가 많은가?
    • 생긴지 얼마 안 된 속성이며, 비교적 최근에 만들어진 속성이기 때문이다.
    • 호환성이 좋지 않기 때문에 이 속성보다는 overflow: hidden;이나 clearfix를 이용하는 걸 추천한다.

caniuse.com에서 flow-root 검색한 내용

쓸 수 없는 브라우저의 경우에는
display: flow-root;의 대용품이 있다.
overflow: hidden;이다.
cf) margin 겹침 현상이 있을 때, 부모에게 overflow: hidden;을 사용함

위의 예제에서 display: flow-root;를 줬던 속성 자리에
overflow: hidden;을 주는 게 좋다.

  • 이유: 이 두 가지가 성질이 똑같기 때문이다.

Block Formating Context(BFC)라는 성질을
overflow: hidden;과
display: flow-root; 둘 다 가지고 있다.

overflow: hidden; 넘쳐 흐르는 게 잘리는 속성

transition과 transform 속성은
ie 크로스브라우징을 어느 정도 무시해야 한다는 생각이 있을 때 사용한다.
(6-9버전)에서 사용할 수 없기 때문이다.

실무에서는 ie9버전을 맞춰야 하기 떄문에 float를 배우는 것이다.

이제 float 속성과 overflow: hidden;을 이용하여 그리드를 만들어 보자.

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
  <head>
    <title>float로 그리드 만들기</title>
    <link rel="stylesheet" href="style.css" />
    <style>
      p {
        margin: 0;
      }

      body {
        background-color: #ddd;
        color: dodgerblue;
      }

      .wrapper {
        width: 640px;
        padding: 20px;
        background-color: white;
        border: 1px solid;
        margin: 50px auto;
        display: flow-root;
      }
      .section {
        background-color: #efefef;
        float: left;
        width: 200px;
        /*cf) width값을 %로 주는게 더 효율적임 */
        margin-right: 20px;
        /* width값을 주지 않으면, 가로로 배치할 수 X */
      }
      .section:last-child {
        margin-right: 0px;
      }
      .section p {
        padding: 20px;
      }
      .section img {
        transition: transform 1s;
      }

      .section .cover {
        overflow: hidden;
      }

      .section:hover img {
        transform: scale(1.2);
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="section mario">
        <img src="images/mario2.png" />
        <p>
          <strong>Mario</strong> ipsum dolor sit amet, consectetuer adipiscing
          elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </p>
      </div>
      <div class="section luigi right">
        <img src="images/luigi2.png" />
        <p>
          <strong>Luigi</strong> ipsum dolor sit amet, consectetuer adipiscing
          elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </p>
      </div>
      <div class="section toad">
        <img src="images/toad2.png" />
        <p>
          <strong>Toad</strong> ipsum dolor sit amet, consectetuer adipiscing
          elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </p>
      </div>
    </div>
  </body>
</html>
Share