본문 바로가기
HTML/CSS문법

CSS float 예제

by flycoding 2023. 8. 25.
반응형

이 페이지에는 일반적인 float 예제를 살펴볼 것이다.

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Grid of Boxes</h2>
<p>Float을 활용하여 박스를 옆으로 나란히 배치:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <p>사과상자.</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>바나나상자.</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>파인애플상자.</p>
  </div>
</div>

<p><strong>Note:</strong> 여기서는 clearfix hack을 사용하여 레이아웃 흐름을 관리합니다. 
또한 추가 패딩으로 인해 상자가 깨지지 않도록 상자 크기 속성을 사용합니다. 효과를 보려면 이 코드를 제거하십시오.</p>

</body>
</html>

3개의 float 박스를 쉽게 나란히 만들 수 있다. 그러나 각 상자의 너비를 확장하는 것(예: 패딩 또는 테두리)을 추가하면 상자가 깨진다. 상자 크기 속성을 통해 상자의 전체 너비(및 높이)에 패딩과 테두리를 포함할 수 있으므로 패딩이 상자 내부에 남아 있고 깨지지 않도록 할 수 있다.

CSS float 박스(div 요소) 나란히 옆으로 배치하기

 

이미지를 옆으로 나란히 배치하기

상자 그리드를 사용하여 이미지를 나란히 표시할 수도 있다:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.img-container {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Images Side by Side</h2>
<p>Float images side by side:</p>

<div class="clearfix">
  <div class="img-container">
  <img src="img_5terre.jpg" alt="Italy" style="width:100%">
  </div>
  <div class="img-container">
  <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="img-container">
  <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

<p>또한 클리어픽스 해킹을 사용하여 레이아웃 흐름을 관리하고 추가 패딩으로 인해 이미지 컨테이너가 깨지지 않도록 상자 크기 속성을 추가합니다. 효과를 보려면 이 코드를 제거하십시오.</p>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS float속성을 활용한 이미지 옆으로 배치하기

 

동일한 높이 박스

이전 예를 들어, 동일한 폭과 함께 플로트 상자를 어떻게 플립할지를 배웠다.그러나 동일한 높이로 부동 상자를 만드는 것은 쉽지 않다. 그러나 빠른 고정 높이에는 다음과 같은 고정 높이를 설정할 수 있다.

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 50%;
  padding: 50px;
  height: 300px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>동일한 높이 박스</h2>
<p>높이가 동일한 플로팅 박스:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <h2>박스 1</h2>
  <p>사과 하나, 사과 하나, 사과 하나, 사과 하나, 사과 하나,</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <h2>박스 2</h2>
  <p>바나나 하나, 바나나 하나, 바나나 하나, 바나나 하나, 바나나 하나</p>
  <p>바나나 하나, 바나나 하나, 바나나 하나, 바나나 하나, 바나나 하나</p>
  <p>바나나 하나, 바나나 하나, 바나나 하나, 바나나 하나, 바나나 하나</p>
  </div>
</div>

<p>그의 예는 매우 유연하지 않습니다. 상자 안에 항상 같은 양의 콘텐츠가 있다는 것을 보장할 수 있다면 CSS 높이를 사용하는 것은 괜찮지만 항상 그렇지는 않습니다. 위의 예를 휴대 전화에서 시도하면(또는 브라우저 창 크기 조정) 두 번째 상자의 콘텐츠가 상자 외부에 표시되는 것을 볼 수 있습니다.</p>
<p>원하는 솔루션이 아닌 경우 튜토리얼로 돌아가서 다른 솔루션을 찾으십시오.</p>

</body>
</html>

 

CSS 동일한 높이 상자 설정 예제

 

display:500px로 고정하여 박스의 높이를 고정하면 위의 예처럼 유연하지 않은 문제점들이 나올 수 있다. 상자 안에 항상 같은 양의 내용물이 들어 있다는 것을 보장할 수 있다면 괜찮다. 그러나 내용물이 동일하지 않은 경우가 많다. 위의 예를 휴대 전화에서 사용해 보면 두 번째 상자의 내용물이 상자 밖에 표시되는 것을 볼 수 있다. CSS3 Flexbox는 자동으로 상자를 길게 늘일 수 있기 때문에 여기에서 편리한다:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container .box {
  background-color: #f1f1f1;
  width: 50%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div class="box">상자 1 - 내용이 정말 높아지는지 확인하기 위한 텍스트입니다. 내용이 정말 높아지는지 확인하기 위한 텍스트입니다.</div>
  <div class="box">Box 2 - My height will follow Box 1.</div>
</div>

<p>브라우저 창 크기를 조정하여 유연한 레이아웃 확인.</p>
<p><strong>참고: </strong> Flexbox는 Internet Explorer 10 이전 버전에서는 지원되지 않습니다.</p>

</body>
</html>

display:flex로 설정한 위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS display:flex 설정 예제

 

Navigation Menu

하이퍼링크 목록과 함께 float 를 사용하여 수평 메뉴를 만들 수도 있습니다:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS navigation menu 결과 화면

 

웹 레이아웃 예제

또한 Float 속성을 사용하여 전체 웹 레이아웃을 수행하는 것도 일반적이다:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
body {
  background-color: white;
}

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #33b5e5;
  color: #ffffff;
}

.menu li:hover {
  background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
  <h1>서울</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>비행기편</li>
      <li>도시들</li>
      <li>섬</li>
      <li>음식</li>
    </ul>
  </div>

  <div class="column content">
    <h1>서울</h1>
    <p>서울은 대한민국의 수도이다. 서총 25개의 자치구가 있고, 자치구 산하에 467개의 법정동과 426개 행정동이 있다. 법정동이 행정동보다 많은 자치구는 종로구, 중구, 용산구, 성북구, 서대문구, 마포구, 영등포구의 7개 구이며, 나머지 자치구는 법정동보다 행정동이 더 많다. 이 지역들은 대체로 서울 중심부이거나, 중심부에 가깝거나, 혹은 개발된 지 오래된 지역으로, 상주 인구에 비해 유동인구가 훨씬 많은 이른바 도심공동화 현상을 겪으며 인구가 감소하여 여러 개의 법정동을 하나도 행정동이 통합 관할하는 곳이다. 심지어 아예 사는 사람이 없거나, 남대문로2가처럼 도로로만 이루어진 법정동마저 있을 정도다.
.</p>
  </div>
</div>

<div class="footer">
  <p>푸터 텍스트</p>
</div>

</body>
</html>

웹 레이아웃의 예제를 위의 코드와 같이 실행하면 아래 그림과 같다.

CSS web layout 예제

 

CSS float 속성

속성 설명
box-sizing 요소의 폭과 높이 및 높이는 방법을 정의합니다. 그들은 패딩 및 국경을 포함해야 합니다.
clear 플로팅 요소 옆에 있는 요소에서 수행할 작업을 지정합니다
float 요소를 왼쪽, 오른쪽으로 띄울지 여부를 지정합니다
overflow 내용이 요소의 상자를 넘칠 경우 수행할 작업을 지정합니다
overflow-x 요소의 내용 영역을 넘칠 경우 내용의 왼쪽/오른쪽 가장자리를 처리할 작업을 지정합니다
overflow-y 요소의 내용 영역을 넘칠 경우 내용의 상단/하단 가장자리를 처리할 작업을 지정합니다

 

지금까지 간략히 CSS 레이아웃에 대한 예제를 살펴보았다. 네비게이션 메뉴나 간단한 웹 레이아웃을 실습해보았다.

손으로, 눈으로, 머리로 코드를 익히며 실습할 것을 꼭 추천합니다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS combination  (0) 2023.08.28
CSS 수평, 수직 정렬  (0) 2023.08.27
CSS clear, clearfix 속성  (0) 2023.08.24
CSS float와 clear  (0) 2023.08.23
CSS overflow 속성  (0) 2023.08.22

관련글

댓글

티스토리툴바