지난 포스트에서 '미디어 쿼리'를 이용해 화면 크기에 반응하는 최신 레이아웃을 배웠다면, 이번에는 CSS 레이아웃의 역사를 지탱해 온 float 속성을 살펴보겠다.
지금은 Flexbox에 밀려 입지가 좁아졌지만, 이미지와 텍스트의 조화를 만들 때 여전히 현역으로 활동 중인 이 속성의 과거와 현재를 정리해 보겠다.
이전 포스트
CSS 반응형 웹, 미디어 쿼리(Media Query)와 뷰포트(Viewport) 메타 태그
생활코딩 CSS 수업 영상: float
float는 현대 웹 개발에서 그 위상이 크게 변한 속성이다.
이 수업 영상에서는 사용 빈도가 거의 90%에 가까운 속성으로 소개가 되었지만, 이 수업 영상은 10년 전 영상이다.
지금은 영상 속의 Global CSS Property Usage라는 페이지가 없어서 float의 사용 빈도를 알 수는 없지만, 분명 10년 전보다는 훨씬 사용 빈도가 떨어질 것이다.
1. float
float는 단어 뜻 그대로 요소를 화면의 왼쪽(left)이나 오른쪽(right)으로 붕 뜨게(부유하게) 만드는 속성이다.
이 속성의 원래 목적은 영상에서 소개한 대로 신문 기사처럼 이미지 옆에 텍스트가 자연스럽게 흐르도록 만드는 것이었다.
그런데 flex 속성이 없던 시절에는 개발자들이 float를 사용해서 억지로 전체 레이아웃을 잡았었다.
그렇게 원래 탄생 목적과는 다른 용도로 널리 사용되었기 때문에 사용 빈도가 90%에 가까워졌다.
지금은 레이아웃을 훨씬 편하게 잡아주는 flex 속성의 등장으로 사용 빈도가 많이 떨어졌을 것이다.
본래 목적인 '이미지 주위로 텍스트 흐르게 하기' 용도로는 여전히 사용되고 있다.
CSS flex 기초 완벽 정리, 레이아웃의 혁명 Flex의 등장 배경과 핵심 속성
flex의 등장 이전에 float로 레이아웃을 잡았었다는 내용은 이전에 올렸던 flex 포스트에서도 설명한 적이 있다.
2. 사용법
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
float: left;
margin: 20px;
}
p {
border: 1px solid gray;
}
</style>
</head>
<body>
<img src="The_Holly_Fairy.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, ratione. Fugit enim temporibus corrupti? Quidem voluptatum modi illum consequatur voluptas earum aperiam expedita omnis, quae sint magnam consequuntur culpa recusandae quasi, dolores ea saepe natus, eveniet enim nostrum hic! Saepe ratione magnam doloribus corrupti officiis, ea ipsa nemo laudantium ducimus.</p>
<p style="clear: both;">ea at ipsam repellat esse cupiditate, minima, cumque ducimus, iste recusandae eos perspiciatis earum. Soluta necessitatibus reprehenderit dignissimos minus fugit illo explicabo labore, tempora laboriosam molestias accusamus repellendus consectetur doloremque repudiandae rem, amet expedita blanditiis possimus sed aliquam, nemo natus veritatis! Voluptatum, culpa! Quod iusto cum explicabo et praesentium recusandae nemo. Placeat saepe temporibus est consectetur quaerat deserunt error, eum, perspiciatis corporis facilis sed, voluptatem iure molestiae quae debitis quas ducimus. Placeat, modi! Debitis, nobis commodi provident, aut similique explicabo magni natus corporis odio laboriosam voluptatibus recusandae assumenda laudantium dolorum ipsum quaerat. Labore, totam nulla. At quas laboriosam iure commodi sint, sapiente eos ut, rem dicta nesciunt dolorum, temporibus ea officia quibusdam magnam culpa explicabo cum? Laudantium est dicta numquam iste ratione consectetur quod cum. Quos incidunt nostrum quaerat fuga eum! Tenetur officiis iure ex! Nemo dolores, corrupti veniam voluptatum ratione reiciendis voluptatibus vel quisquam, excepturi molestias eaque alias.</p>
</body>
</html>위의 생활코딩 수업 영상에서 사용한 코드다.
float: left;: 이미지를 왼쪽에 띄우고, 텍스트는 오른쪽으로 흐른다.margin: 20px;: 글자와 너무 붙지 않게 여백을 추가했다.clear: both;:clear속성은 '여기서부터는 다시 정상적으로 배치해'라고 선언하는 것이다.
생활코딩 CSS 수업 영상: float (holy grail layout)
이 수업 영상은 과거에 float를 레이아웃 도구로 사용했던 사례를 보여준다.
지금은 훨씬 편한 flex를 사용하기 때문에 절대 따라 할 필요가 없으니, '아~ 예전엔 저렇게 힘들게 텍스트 흐름 속성을 끌어다 써서 Holy Grail 레이아웃을 구현했구나' 정도로만 참고하자.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.container {
width: 540px;
border: 1px solid gray;
margin: auto;
}
header {
border-bottom: 1px solid gray;
}
nav {
float: left;
width: 120px;
border-right: 1px solid gray;
}
article {
float: left;
width: 300px;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin-left: -1px;
}
aside {
float: left;
width: 120px;
border-left: 1px solid gray;
margin-left: -1px;
}
footer {
clear: both;
border-top: 1px solid gray;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>
CSS
</h1>
</header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad officia dolores obcaecati sint, ipsum sequi ullam, similique harum praesentium odit quo facilis nesciunt, libero in quas officiis eos exercitationem tenetur molestiae totam. Exercitationem possimus eligendi culpa consequatur, neque quos cum sint nesciunt veritatis doloribus assumenda pariatur? Incidunt illum amet recusandae.
</article>
<aside>
ad
</aside>
<footer>
copyleft
</footer>
</div>
</body>
</html>따라 할 필요는 없지만, 코드는 가져와본다.
다음 포스트
CSS 배경 background 속성 정리, 단축 속성 활용법까지
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩