강의 2회차에 맞닥뜨린 float...
이전에 프론트엔드 강의 주워들을 때 처음으로 웩 하고 뱉었던 애라 첫인상이 좋지 않다.🤢
그래도 꼭꼭 씹어먹기로 했으니까 MDN의 도움을 받아 소화시켜 봐야지.
float
1️⃣ 기본 템플릿
<h1>간단한 float 예제</h1>
<div class="box">float</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
laoreet sit amet.
</p>
<p>
Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
a urna. Ut id ornare felis, eget fermentum sapien.
</p>
<p>
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>body {
width: 90%;
max-width: 900px;
margin: 0 auto;
font:
0.9em/1.2 Arial,
Helvetica,
sans-serif;
}
.box {
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}처음 템플릿은 위와 같다.
이 상태에서 .box에 float를 부여하면?
2️⃣ float 적용
.box {
float: left;
}.box가 원래 문서 흐름에서 떠오르면서, <p>태그들이 .box를 감싸는 듯한 모습이 되었다.
근데, 원래 float가 적용된 요소는 '원래 문서 흐름에서 벗어난다'고 배웠는데, 그러면 아예 문서의 흐름에서 벗어난다면 <p>태그들이 .box를 아예 무시하고 .box 아래로 밀려들어야 하지 않나?
(position: absolute일 때 처럼)
그렇지 않은걸 보면, float는 원래 자기 위치는 유지하면서 문서의 흐름에서 벗어난다고 봐야 하는데 그럼 오히려 position: relative와 유사한건가-하는 의문이 든다.
의문이 들면? 그때그때 해결하기🔥
💡 float , postion: relative, absoulte 의 차이점
정리하면서 float에 대한 정이 더 떨어졌다.
표로 정리하면 다음과 같은데, 아무튼 float는 문서 흐름에서 완전히 배제되지는 않는다는 점을 기억해야 겠다.
| 속성 | 문서 흐름에서 | 원래 위치 공간 | 요소 배치 |
|---|---|---|---|
| float | 부분적으로 유지 | 유지 | 요소가 떠오르면서, 주변 요소가 float 요소를 감싸도록 배치 |
| relative | 유지 | 유지 | 원래 위치를 기준으로 상대적으로 이동 |
| absolute | 제거 | 제거 | static이 아닌 부모 기준으로 절대적인 위치에 배치 |
3️⃣ 배경 추가
식별을 위해 margin 값을 조금 부여하고, 첫번째 단락에 배경을 추가해본다.
그러면 다음과 같은 모습이 된다.
.p_first {
background-color: rgb(79, 185, 227);
padding: 10px;
color: white;
} <p class=p_first>는 여전히 .box의 원래 위치를 넘보지 못하지만, 해당 <p>를 감싸고 있는 box는 body의 전체 너비를 따르기 때문에 배경색은 box 전체에 칠해졌다.
이게 다 float가 부분적으로 문서의 흐름을 이탈했기 때문이다.
이젠 더 떨어질 정도 남아있지 않음
4️⃣ float 요소 정리하기
.box가 float 되면서 착 붙어버린 <p>태그에게 다시 자신만의 공간을 찾아주고 싶다면, clear 속성을 이용할 수 있다.
예를 들어, 두번째 <p>태그에 자유를 찾아주려면 다음과 같이 사용한다.
.p_second {
clear: left;
}<p class=p_second>의 왼쪽을 clear(정리)하면서, 더 이상 .box 옆을 감싸지 않고 자신의 공간을 회복한 모습을 볼 수 있다.
5️⃣ float 요소를 감싸는 box가 있을 경우
float 요소가 얼마나 제멋대로 떠오르는지 알아보기 위해, 기존 배경을 지우고 <div>로 감싸본다.
<div class="wrapper">
<div class="box">float</div>
<p class="special">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
laoreet sit amet.
</p>
</div>.wrapper {
background-color: rgb(79, 185, 227);
padding: 10px;
color: white;
} 새로이 float를 감싼 <div>에 아까와 같은 배경을 부여한 모습이다.
float가 <div>를 벗어나 삐져나온 것을 볼 수 있다.
.box가 float 되면서 그 놈의 문서의 흐름에서 일부 벗어나, <div>가 float의 높이를 제대로 인식하지 못하고 있기 때문이다.
즉, <div>가 인식하지 못하고 흘러넘친 float를 주워담는 방법에는 두 가지가 있다.
방법 🅰️: clearfix
.wrapper::after {
content: "";
clear: both;
display: bloclk;
} float를 감싼 <div>에 일부 content를 삽입해, 거기에 clear: both를 부여하는 방법이다.
일종의 국룰 같은 거라고 생각하면 된다.
방법 🅱️: overflow
.wrapper {
background-color: rgb(79, 185, 227);
padding: 10px;
color: #fff;
overflow: auto;
}overflow는 부모 요소로부터 넘쳐흐른 자식 요소를 어떻게 처리할 것인가를 결정하는 속성이다.
위 예제에서는 overflow가 흘러넘친 .box의 높이를 <div>에게 인식시키는 역할을 했기 때문에 .box를 포함하게 됐다는 것 외에는 변화가 없다.
하지만 원래 overflow: auto는 자식요소가 부모 크기를 초과할 때, 넘치는 내용만큼 스크롤을 자동으로 추가한다. 심지어 overflow:hidden은 넘치는 내용을 아예 자르고 표시하기 때문에 그 쓰임을 잘 이해하고 사용하도록 하자.
그동안 실습과 과제에 쫓기다가 드디어 써본 TIL...인데, 아직은 가독성 면에서 좀 더 신경써야 할 부분이 많은 것 같다.
계속 하다보면 어떻게 쓰는게 눈에 잘 들어오는지 알게되겄지.
지금은 일단 썼다는 것에 만족하기로 한다. 야통~
💾 참고
