박코딩

박코딩

공부기록 블로그

레이아웃_5

2 minute read

레이아웃

정보를 정리해서 일관된 모습으로 보여지도록 하는 것은 디자인에서 매우 중요한 주제이다.

구획을 나누고 적절히 정보를 배치하는 것을 레이아웃(layout)이라고 한다.


float

디자인에서 이미지를 자연스럽게 삽입하거나 또는 레이아웃을 잡을 때 사용하는 기능이다.

삽화 넣기

이미지를 삽입했을 때 본문이 이미지 옆에 배치시켜 자연스럽게 만든다.

<!doctype html>
<html>
<head>
  <style>
    img{
      width:300px;
      float:left;
      margin-right:20px;
    }
  </style>
</head>
<body>
  <img src="dino.jpg" alt="dino">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
  </p>
</body>
</html>

float_insert_img

  • float

    float의 속성값을 left, right로 지정해서 어디 배치할지 정할 수 있다.

    적용되면 삽입한 이미지의 옆의 빈공간에 본문의 내용이 작성된다.

만약 본문의 내용이 문단으로 구분되고 하나의 문단만 이미지와 걸쳐서 작성되게 하려면 clear 속성을 사용한다.

<!doctype html>
<html>
<head>
  <style>
    img{
      width:300px;
      float:left;
      margin:20px;
    }
    p{
      border:1px solid gray;
    }
  </style>
</head>
<body>
  <img src="dino.jpg" alt="dino">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
  </p>
  <p style="clear:both;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
  </p>
</body>
</html>

  • clear 속성

    float 이 적용된 이미지를 무시하게 만든다. 즉 clear를 사용하면 이미지의 옆에 문단이 작성되지 않게 된다.

    이 속성값은 float에 지정한 값과 동일해야 효과가 있기 때문에 일반적으로 both를 사용해서 양쪽 어디에 있던지 적용되게 한다.


float으로 성배 레이아웃 만들기

<!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. Sit quae earum enim ab distinctio corrupti eius reprehenderit non, rerum ut nisi autem cum sint perferendis eum id velit, molestias nesciunt. Ullam dignissimos consequuntur explicabo id voluptas vel deleniti nesciunt veritatis iusto commodi, laudantium cumque vero deserunt laboriosam. Ea, quia est?
            </article>
            <aside>
                ad
            </aside>
            <footer>
                copyleft
            </footer>
        </div>
    </body>
</html>

See the Pen Untitled by Bakcoding (@bakcoding) on CodePen.


flex가 훨씬 편리하다.

You may also enjoy