[WEB] CSS 요소 배치(1)

display 속성

<div>block1</div>
<p>block2</p>

∎ block

위에서 아래로 요소들이 쌓인다.

∎ inline

우측으로 요소들이 쌓인다. width, height 속성을 지정해도 반영되지 않는다.

∎ inline-block

inline 요소처럼 동작하지만, 해당 요소 내부에서는 block요소처럼 동작한다.

inline요소와 비슷하지만, width, height를 설정할 수 있다.

position 속성

position 속성을 이용하여 특별한 배치를 할 수 있으며, position 속성의 기본값은 static이다.

∎ static

순서대로 배치된다.

∎ absolute

기준점에 따라서 특별한 위치에 배치되며, top/left/right/bottom으로 설정한다.

상위 요소 중 static이 아닌 position을 기준점으로 삼는다. 해당하는 요소가 없는 경우 body를 기준점으로 삼는다.

∎ relative

원래 자신이 위치해야할 곳을 기준으로 이동한다. 

absolute와 마찬가지로 top/left/right/bottom으로 설정한다. 설정하지 않을 경우, 아무런 변화도 일어나지 않는다.

∎ fixed

viewport(전체화면) 좌측, 맨위를 기준으로 동작한다.

<div class="wrap">
    <div class="static">static(default)</div>
    <div class="relative">relative(left:10px)</div>
    <div class="absolute">absolute(left:130px;top:30px)</div>
    <div class="fixed">fixed(top:250px)</div>
</div>

.wrap {
  position: relative;
}

.wrap > div {
  width: 150px;
  height: 100px;
  border: 1px solid gray;
  font-size: 0.7em;
  text-align: center;
  line-height: 100px;
}

.relative {
  position: relative;
  left: 10px;
  top: 10px;
}

.absolute {
  position: absolute;
  left: 130px;
  top: 30px;
}

.fixed {
  position: fixed;
  top: 250px;
}

 

margin 속성

margin 속성을 이용해서 위/아래/좌/우 요소와의 간격을 지정할 수 있다.

<div>top</div>
<div class="bottom">bottom</div>

.bottom {
    margin-top: 10px;
    margin-left: 100px;
}

참고자료

https://www.edwith.org/

http://www.tcpschool.com/css/css_position_display