float 너란 녀석... (4) (feat. float을 이용해서 한 번 더 layout을 붕괴해보자!)

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

 

 

 

📝 메모

---

 

 

 

 

 

👩‍💻 기본 코드

 

   <div class="parent">
      <div class="child red">Child</div>
      <div class="child yellow">Child</div>
      <div class="child blue">Child</div>
    </div>
    <div class="other">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus vero
      numquam autem, sit accusamus aliquid cum iusto praesentium doloribus,
      dolor, expedita nostrum neque commodi reiciendis sunt assumenda culpa
      dignissimos excepturi. Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Rerum consequuntur hic accusamus. Praesentium veniam magnam earum
      soluta aut doloribus aliquam dignissimos cumque porro animi sint dicta,
      maiores velit beatae labore modi ut atque unde expedita tenetur ab quas.
      Fugiat, iste sed. Necessitatibus nesciunt praesentium quas laboriosam.
      Dolor modi voluptates rem deleniti repellendus perferendis cum, odit
      dolorum doloribus illo quo qui enim voluptatibus suscipit consectetur fuga
      dicta unde maxime quas eos dolore excepturi quia cupiditate. Corporis
      voluptates labore cupiditate asperiores maiores quibusdam officiis tempora
      odit quod ab architecto praesentium vitae dolorum ratione deserunt cum nam
      eius debitis eveniet, porro sequi ullam. Temporibus recusandae quibusdam
      possimus porro culpa dolor adipisci? Reprehenderit possimus eaque, labore
      excepturi illum incidunt sequi commodi consectetur ipsam distinctio iste
      tenetur laborum perspiciatis vero. Autem est illum amet similique quos
      ratione at quo quidem ipsum provident ducimus accusamus quae dolores quasi
      dignissimos aspernatur, recusandae eum voluptatum dicta neque velit
      eveniet non sed dolorem? Obcaecati architecto perferendis laborum nobis
      odio minus consectetur nam nisi similique in commodi quam illo repellat
      dolore quis quod eligendi cumque, enim nostrum consequuntur vel deleniti
      sed. Consequatur commodi alias eos, soluta sunt, saepe quisquam enim,
      voluptate aperiam ea delectus. Nemo deserunt officiis cumque sequi
      provident ipsam pariatur dicta iure ut minima quo at, suscipit dolor!
      Libero sunt nesciunt modi maxime non accusamus eum vel neque tempore
      corporis alias sequi, ab autem perspiciatis enim laudantium quod quaerat
      maiores. Corporis incidunt quam excepturi laborum, temporibus quibusdam
      similique voluptatibus facere in doloremque fuga magni consectetur et
      impedit quod iste esse est, ab, aliquam vitae! Corrupti quibusdam fugiat
      illo natus aperiam quia repellat officia velit voluptates reprehenderit
      aut nihil architecto ducimus a nisi nulla dicta omnis maxime numquam
      error, qui, veritatis quisquam! Quod consequatur temporibus nisi explicabo
      doloribus, provident eum dignissimos consectetur ipsum, fuga earum,
      laboriosam voluptatum quia velit. Lorem ipsum, dolor sit amet consectetur
      adipisicing elit. Fugit fuga alias tempore, molestiae quos accusamus
      cupiditate vitae ut, voluptatum quis ab laboriosam quam repudiandae porro,
      perferendis quibusdam deleniti? Quis aspernatur sapiente nesciunt. Dicta
      debitis et iusto necessitatibus voluptatibus vel voluptates molestiae, eos
      placeat tempora, nam nisi vero at, sapiente provident!
    </div>

 

.parent {
  width: 400px;
  margin: 0 auto;
  background-color: #eff2f7;
}

.child {
  float: left;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  margin: 0 auto;
}

.red {
  background-color: #ff4949;
}

.yellow {
  background-color: #ffc82c;
}

.blue {
  background-color: #0066ff;
}

.other {
  background-color: black;
  color: white;
}

 

 

 

 

 

 

 

 

parent element에 또 다른 형제 div인 other을 만들어 줬다. 

 

그랬더니...

 

 

 

 

 

 

 

 

이런 환상적인 layout이 나왔다.......................

뭐 어떻게 이럴 수가 있는지 암담하다........

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이 사단이 난 이유는

앞의 포스트들에서 잠시 언급했지만

block 요소는 float된 element를 알아차리 못하지만

inline 요소들은 알아차릴 수 있다고 했다.

그래서 그 float된 자리를 피해서 자기 갈길을 유유히 흘러가는 것이다....

 

 

분명 원했던 layout은

저 parent element 아래에

 

other element가 위치하길 바랐는데

 

뭔가 짬뽕🍜이 되어버린 것..........

 

 

 

 

 

 

다음 포스트부터 이 사단난 layout을 고쳐보도록 하자.