박코딩

박코딩

공부기록 블로그

레이아웃_2

1 minute read

레이아웃

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

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


포지션

각 요소들의 위치를 지정한다.

위치를 지정하는 방법에는 4가지가 있다.

  • static

  • relative

  • absolute

  • fixed

static vs relaitve

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

me요소를 이동시켜본다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent, #other{
        border:5px solid tomato;
      }
      #me{
        background-color: black;
        color:white;
        position: relative;
        left:100px;
        top:100px;
      }
    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="parent">parent
      <div id="me">me</div>
    </div>
  </body>
</html>

left, right, top, bottom 으로 각 각 이동시킬 수 있으며 만약 겹쳐서 사용한다면 left, bottom이 우선순위를 가진다.

  • static

    요소의 기본값으로 원래 있어야할 곳에 정적으로 위치한다.

  • relative

    부모의 위치를 기준으로 상대적으로 이동한다.


absolute

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent, #other{
        border:5px solid tomato;
      }
      #me{
        background-color: black;
        color:white;
        position: absolute;
        left:0;
        top:0;
      }
    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="parent">parent
      <div id="me">me</div>
    </div>
  </body>
</html>

  • absolute

    선언을 하는 순간 부모와 연결이 끊기게 되면서 부모의 컨텐츠 크기를 사용하던 것이 자신의 컨텐츠 크기로 바뀌게된다.

    html태그(가장 최상단)를 기준으로 한다. left, top값을 정하지않으면 기본값으로 원래 위치값인 부모의 위치로 들어오게 된다.

    <!DOCTYPE html>
<html>
  <head>
    <style>
      #parent, #other, #grand{
        border:5px solid tomato;
      }
      #grand{
        position:relative;
      }
      #me{
        background-color: black;
        color:white;
        position: absolute;
        left:0;
        top:0;
      }
    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="grand">
      grand
      <div id="parent">
        parent
        <div id="me">
          me
        </div>
      </div>
    </div>
  </body>
</html>

    정확하게는 position이 기본값(static)이 아닌 값을 가지는 부모를 만날 때 까지 찾아서 그 위치를 기본값으로 하게 된다.


fixed

<!DOCTYPE html>
<html>
  <head>
    <style>
      body{
        padding-top: 30px;
      }
      #parent, #other{
        border:5px solid tomato;
      }
      #large{
        height: 10000px;
        background-color: tomato;
      }
      #me{
        background-color: black;
        color:white;
        position: fixed;
        width:100%;
        height: 30px;
        left:0;
        top:0;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="parent">parent
      <div id="me">me</div>
    </div>
    <div id="large">large</div>
  </body>
</html>

large의 요소가 크기 때문에 페이지에 스크롤이 생긴다.

이 때 스크롤을 내려도 me 요소는 영향을 받지않고 위치가 고정되어있다.

  • fixed

    스크롤에 영향을 받지 않고 위치를 고정시킨다.

    absolute와 비슷하게 부모와 연결이 끊어지게 되어 요소의 크기가 자신의 컨텐츠 크기가 된다.

You may also enjoy