⭐Position

🪐예제

div, span{
  width: 80px;
  height: 80px;
  margin-bottom:20px;
  background: red;
}

.container {
  background: yellow;
}

.box{
  background: blue;
}

여기서 container의 위치를 변경하기 위해 스타일링을 추가해보자

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

근데 이렇게 해도 아무 변화가 없다. 왜냐하면 container의 기본 position이 static 이기 때문이다.

🪐position의 속성값

🌠static

모든 요소의 position의 기본값은 static이다. static은 브라우저 상에서 자연스럽게 순서대로 보여주는 것을 의미한다.

그러므로 위에서 article은 body안에 담겨있기 때문에 우측 상단에 고정되어 있는 것이다.

++ button 또한 static이나 띄워져있는 것은 위치가 변한 것이 아니라 margin으로 인해 조정된 것이다.

🌠relative

container의 postion을 relative로 변경하게 되면

이렇게 왼쪽과 상단에서 20px 이동한 것을 볼 수 있다.

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

여기서 박스의 위치도 조정해주면

박스의 위치가 바뀐다.

🌠absolute

바로 위 예제에서 button의 position을 absolute로 변경하면

이와 같이 보이게 된다. relative는 본인이 static에서 위치해야할 자리에서 시작하여 위치가 변경된다면 absolute는 부모의 시작점에서 절대적인 위치가 변경되는 것이다.

단, 부모 요소의 position이 relative, absolute, fixed 속성 중 하나여야 함.

🌠fixed

위 예제에서 button의 postion을 fixed로 변경하면

부모 container의 위치조차 무시하고 브라우저의 최상단에 보이게 된다.

🌠sticky

sticky는 위와 같이 스크롤링을 통해서 범주를 벗어난다고 할 지라도 화면에서 보여지게 하는 것이다.

⭐display

🪐예제

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

div{
  background: red;
}

span{
  background: blue;
}

결과에서 span은 안 보인다. 이는 div는 블록 단위 즉, display가 block인 반면
span은 inline이기 때문이다.

span에 글자를 추가한 다음에 다시 보면

보인다!

🪐display의 속성값

🌠block

위와 같이 크기가 작음에도 불구하고 한 줄을 다 차지하는 것이 block이다.

🌠inline

위와 같이 내용물에 맞게 크기를 바꾸고 공간이 허용되면 옆으로 나열하는 것이 inline이다.

🌠inline-block

위와 같이 block처럼 보이지만 한 블럭을 다 차지하는 것이 아니라 공간이 남으면 inline처럼 이어서 보여주는 것이 inline-block이다.