박코딩

박코딩

공부기록 블로그

레이아웃_6

1 minute read

레이아웃

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

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


다단

multi column

신문에서 볼 수 있듯이 긴 글은 문단을 분할해서 옆으로 나열시켜야 읽기가 편하다.

css에서도 이런 레이아웃을 쉽게 구현할 수 있는 기능을 제공한다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="bak">
        <style>
            .column{
                text-align:justify;
/*                column-count: 2;*/
                column-width: 200px;
                column-gap: 20px;
                column-rule-style: solid;
                column-rule-width: 1px;
                column-rule-color: red;
            }
            h1{
                column-span: all;
            }
        </style>
    </head>
    <body>
        <div class="column">
            ~ Lorem Ipsum ~
        </div>
    </body>
</html>

column

  • column-count

    열 수를 정할 수 있다. 창의 크기와 상관없이 지정한 수 만큼의 열로 컨텐츠가 분할된다.

  • column-width

    열의 너비를 지정한다. 열을 지정한 너비만큼으로 만들기 때문에 창의 크기에 따라 열의 수가 늘어나고 줄어든다.

    count와 width 속성은 같이 사용이 가능하다.

  • column-gap

    열 사이의 간격을 설정한다.

  • column-rule-

    stye : 열을 구분하는 선을 만든다.

    width : 선의 두께를 설정한다.

    color : 선의 색상을 정한다.

  • column-span

    열을 구분하는 column에 영향을 받지 않고 표현된다.

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



masonry layout

레이아웃의 구성요소를 벽돌을 쌓듯이 배치하는 것이다.

이러한 레이아웃 방식을 사용하는 곳은 pinterest가 대표적인 사이트이다.

pinterest

<!doctype html>
<html>
  <head>
    <style>
       #columns{
        column-width:350px;
        column-gap: 15px;
      }
      #columns figure{
        display: inline-block;
        border:1px solid rgba(0,0,0,0.2);
        margin:0;
        margin-bottom: 15px;
        padding:10px;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.5);;
      }
      #columns figure img{
        width:100%;
      }
      #columns figure figcaption{
        border-top:1px solid rgba(0,0,0,0.2);
        padding:10px;
        margin-top:11px;
      }
    </style>
  </head>
  <body>
    <div id="columns">
      <figure>
        <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
        <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
      </figure>
    </div> 
  </body>
</html>

figure 태그

삽화처럼 이미지와 정보를 같이 표시할 때 그룹핑해주는 기능을 한다.

Cinderella wearing European fashion of the mid-1860’s

#columns

컬럼의 너비와 간격을 지정해서 창의 크기에 맞춰서 이미지가 표시되도록한다.

#columns figure

각 각의 이미지들이 구분되도록 윤곽석을 만들고 효과를 준다.

  • margin

    figure태그가 가지고 있는 기본 마진값을 없애준다.

  • box-shadow

    박스에 그림자 효과를 준다.

  • diplay: inline-block

    이미지와 설명이 따로 놀지 않도록 묶어준다.

#columns figure img

  • width:100%

    이미지가 잘리지않고 박스안에 전부 표시되도록 한다.

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


You may also enjoy