CSS Layout

28 Dec 2020

CSS의 레이아웃 정리

<body>
  <!-- Block-level-->
  <div>div</div>
  <div>div</div>
  <div>div</div>

  <!--Inline-level-->
  <span>span</span>
  <span>span</span>
  <span>span</span>
</body>

div, span{
  width:80px;
  height:80px;
  margin:20px;

div{
  background:red;
}

span{
  background:blue;
}

위와 같이 코드를 작성하여, 아래처럼 박스를 만들었다.

1. Display

(1) display:block

span {
  background: blue;
  display: block;
}

Inline-level인 span에 display:block;을 주게 되면 블록(상자)처럼 상하로 배치된다.

(2) display:inline-block

div {
  background: red;
  display: inline-block;
}

Block-level인 div에 display:inline-block;을 주게 되면 글자,상자의 특징을 모두 가져 한 줄에 여러개가 반영된다.

(3) display:inline

div {
  background: red;
  display: inline;
}

Block-level인 div에 display:inline;을 주게 되면 글자처럼 좌우로 배치된다.

2. Position

<body>
  <article class="container">
    <div></div>
    <div class="box">BOX</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

div {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  background: red;
}

.container {
  background: green;
  left: 20px;
  top: 20px;
}

.box {
  background: blue;
}

위와 같이 코드를 작성하여, 아래처럼 박스를 만들었다.

container에 left와 top에 값을 주어도 컨테이너의 이동이 없음을 알 수 있다.

이는 position에 기본으로 container에 left와 top에 값을 주어도 position에 static를 기본값으로 갖고 있기 때문이다.

(1) position: relative

.container {
  background: green;
  left: 20px;
  top: 20px;
  position: relative;
}

컨테이너position에 relative를 주니 left값과 top값이 적용된 것을 볼 수 있다.

.box {
  background: blue;
  left: 20px;
  top: 20px;
  position: relative;
}

박스 position에 relative값을 주니, 원래 있어야 할 자리에서 left와 top값인 20px씩 옮겨 간 것을 볼 수 있다.

(2) position: absolute

.box {
  background: blue;
  left: 20px;
  top: 20px;
  position: absolute;
}

박스 position에 absolute값을 주면 상위 요소와 가까운 박스 안에서 위치변경이 일어나게 된다.

(3) position: fixed

.box {
  background: blue;
  left: 20px;
  top: 20px;
  position: fixed;
}

박스 position에 fixed값을 주면 설정한 container 를 벗어나 윈도우를 기준으로 설정한 값의 위치변경이 일어나게 된다.

(4) position: sticky

background:blue;
  left:20px;
  top:20px;
  position:sticky;
}

박스 position에 sticky값을 주면 원래 있어야 할 자리에 있으면서, 스크롤링 되어도 없어지지 않고 , 원래 자리에 고정되게 된다.