CSS layout

lwlkorea·2021년 2월 17일
0

wecode

목록 보기
3/10

Position

Position 속성의 값은 static, relative, absolute and fixed 로 총 4가지이며, 보통의 경우 position 값은 static 이다.

relative

별도 지정이 없으면 relative 는 static과 비슷하게 작동하지만 top left right bottom 에 값을 지정하면 원래의 자리에서 지정한 값 만큼 이동한다.

.relative {
  position: relative;
  top: -20px;
  left: 20px;

위 경우 윗쪽 방향으로 20px, 오른쪽 방향으로 20px 이동하여 출력된다.

absolute

absolute 는 가장 근접한 parent element 에 대하여 이동하며, 이때 parent element 는 position 값이 static 을 제외한 relative, absolute 혹은 fixed 여야 한다.

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 200px;
}

위 경우 조상 element의 상단 오른쪽에 출력된다.

fixed

fixed 값의 경우 absolute 와 비슷하게 작동하지만 조상 element 가 아닌 viewport 즉 사용자가 브라우저를 통해 보는 페이지에 대하여 작동한다.

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

위 경우 브라우저의 우측 하단에 출력된다.

inline, inline-block, block

각각의 차이는 아래와 같다

| |inline | inline-block | block |
|--:|---:|---:|---:|
|width/height | X | O | O |
|top/bottom margin/padding| X | O | O |
|line breaker| X | X | O |

float를 사용한 레이아웃을 간단하고 쉽게 대체할 수 있다.

float

다른 개체를 감싸는 경우에 사용하며, float 속성을 부여한 개체가 다른 개체보다 한 단계 높게 위치한다. (다른 개체의 위치를 무시하고 떠있는 것 처럼 그 위를 덮는다.) 컨테이너보다 개체가 클 경우 넘치게 되며 그때는 아래와 같은 코드를 추가하여 수정한다.

  overflow: auto;

잘 사용하지 않으니 이만...

0개의 댓글