프로그래밍/CSS

생활코딩 css 정리 - 21. Float

가카리 2017. 12. 18. 23:12
반응형
21 Float
  Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요합니다.

1) Float효과란?
  Float가 어떤 효과인지 확인하기 위해서 다음 예제를 봅시다.

float.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        img
            width:300px;
            float:left;
       
</style>
</head>
<body>
<img src="sample.jpg" alt="">
<p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis voluptas possimus enim fuga nostrum as-sumenda cum sunt, iste quibusdam maxime, sequi, recusandae aut quisquam ab nisi nobis! Est voluptatem cum-que, nemo quasi nihil eaque eius delectus qui nesciunt harum vel natus sit veniam nisi animi velit assumenda. Nulla asperiores obcaecati, rem eos earum explicabo facere quaerat, assumenda, beatae distinctio hic cum quas est non nam nobis praesentium consectetur ratione possimus accusantium. Voluptate vel eligendi cupiditate tenetur commodi dignissimos nemo quo nesciunt vitae, rem, optio a reiciendis doloribus quia enim excepturi eius molestiae ullam perspiciatis iusto porro et non maxime fuga.  
</p>
</body>
</html>

실행 화면

float 효과를 주기전

float 효과를 준 후

만약 다음과 같이 윗처럼 이미지를 피해가는 것이 아닌 즉 float를 무시하고싶다면

p태그에 style을 clear:both로 지정하면 됩니다.

2) float를 활용한 성배 레이아웃(holy grail layout)

다음과 같인 시멘틱 태그 모양의 레이아웃을 구성해봅시다.
기본 베이스 코드는 다음과 같습니다.

float-holylayout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<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. Ut consectetur temporibus eaque odit dolores omnis corporis perferendis, quasi illum sunt magnam quibusdam, molestiae amet nam beatae culpa natus voluptatum eligendi.
</article>
<aside>
        ad
</aside>
<footer>
        copyleft
</footer>
</body>
</html>

실행 화면

이것을 성배 레이아웃으로 바꿔봅시다.

float-holylayout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        *
            box-sizing: border-box;
       
        .container
        /*모두 감싸서 전체 크기를 정의해주면 레이아웃 width가 변경되도 UI가 안깨짐 */
            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. Ut consectetur temporibus eaque odit dolores omnis corporis perferendis, quasi illum sunt magnam quibusdam, molestiae amet nam beatae culpa natus voluptatum eligendi.
</article>
<aside>
            ad
</aside>
<footer>
            copyleft
</footer>
</div>
</body>
</html>

실행 화면
  아래와 같이 성배 레이아웃 스타일로 꾸며졌습니다. box-sizing을 border-box로 해야만 레이아웃이 안 깨지는 것을 유의합시다.


반응형