float 너란 녀석... (2) (feat. 붕뜨더니 신분상승했네..)

이 포스트는 김버그님의 김버그의 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

 

 

 

 

 

 

 

 

📝 메모

---

 

#2. float을 먹은 요소, display:block으로 신분 상승

이번에는 child element를 div에서 span으로 바꿔보자

(참고로 div는 대표적인 block element이고 span은 inline element다.)

 

 

 

 

👩‍💻기본 코드

<div class="parent">
      <span class="child red">Child</span>
      <span class="child yellow">Child</span>
      <span class="child blue">Child</span>
</div>

 

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

.child {
  /* 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;
}

 

child가 span이 됐기 때문에 width, height를 없애고 line-height도 일단 주석처리 했다.

 

 

 

 

 

 

 

 

💻결과

 

 

 

 

 

 

 

 

 

 

 

 

👩‍💻 자, 그럼 이제 red에 float:left를 주자

.red {
  float: left;
  background-color: #ff4949;
}

 

 

 

 

 

 

 

 

💻 결과

(일단 눈에 띠는 변화는 red와 yellow가 달라붙었다.)

 

 

 

 

 

 

🔨개발자 도구

 

 

이미지 하단을 보면 span이어서 inline element였던 red의 display가 block으로 바뀐 것을 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

이때 드는 의문점이 두가지가 있다.

1. block element가 되면 width를 자기가 전부다 차지해야하는데 왜째서 yellow와 blue가 여전히 같은 줄에 있는가?

2. 아까는 red가 float되면 yellow와 blue가 한 자리씩 땡겨 왔는데 왜 여기서는 red와 yellow가 나란히 붙어있는가?

 

 

 

 

 

 

 

 

 

 

🚀의문점에 대한 대답

 

1. float:left 덕분에 block으로 신분상승을 하면

원래 inline일 때 가지지 못했던 width나 height를 가질 수 있다.

하지만, 일반적인 block element는 따로 width를 주지 않으면 부모 element의 width 100%를 차지하는데

이 친구들은 따로 width를 주지 않는한, content의 길이만큼만 width를 차지한다.

따로 width를 줘도 일반적인 block element가 가지던 margin:auto도 생기지 않는다.

 

 

 

red에 width 150px을 줬을 때. 

 

 

red에 따로 너비 150px을 준 경우

원조(;) block element와 다르게 margin:auto가 생기지 않기 때문에

옆의 빈 자리에 yellow가 오고 blue는 자리가 부족해서 아랫줄로 내려갔다.

 

 

 

 

 

 

red에 180px을 줬을 때

 

red에 180px을 주면 yellow가 올 공간이 충분하지 않기 때문에

yellow도 밑으로 내려간다.

 

 

 

 

 

 

 

 

여기서 반드시 기억해야할 점은

margin:auto가 자동으로 생기지 않는 다는 것이지

margin을 줄 수 없다는 뜻이 절대 아니다!!!!!!!!!!!!!!!

 

 

.red {
  float: left;
  width: 100px;
  margin-right: 20px;
  background-color: #ff4949;
}

 

 

red에 width:100px을 주고 margin-right을 20px주면

margin이 생겨서 red와 yellow 사이 간격이 생긴 것을 확인할 수 있다.

개발자 도구탭을 통해서도 red에게 margin-right이 생긴 것을 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.  근데 아까는 red가 float되면 (붕뜨면) 빈자리를 yellow와 blue가 당겨와서 채웠는데

왜 여기서는 그냥 red 옆에 차례로 쭈욱 나열되는가?

뒤에 또 나오겠지만 inline 요소들은 float가 된 element를 알아차릴 수 있는 신묘한 능력이 있다!!!!

(부모도 못 보는 것을....)

 

 

첫 예시에서는 child가 모두 div라서

즉, block element여서 float된 요소들을 알아차리지 못해서

red는 붕-떠버리고 그 자리를 다른 div인 yellow와 blue가 올라와서 채웠다.

 

 

이번 예시에서 child는 모두 span 즉, inline element들이었다. 

그래서 red가 float되도

다른 span들은 inline 이기 때문에

자신의 신묘한 능력을 발휘해

float가 된 red의 존재를 알아차리고 그냥 옆에 와서 달라붙은 것