이 포스트에서 다룰 것

사용하면서도 항상 헷갈리던 css의 position과 display 속성에 대해서 정리한다.

display

요소를 한 줄로 배치하고 싶을 때 무식하게 display: inline-block을 때려넣곤 했다. block, inline, inline-block의 차이에 대해 정확하게 알아보자.

display 세팅

block 요소인 div와 inline 요소인 span, 두 가지를 가지고 실험할 것이다. 구분을 위해 배경색을 넣었다.

block

inline 요소인 span에 display:block;을 넣어보았다. 한 줄 안에 있던 span들이, 한 줄에 하나씩으로 바뀌었다.

inline-block

이번에는 div에 display:inline-block;을 넣어보았다. 여러 줄에 있던 div들이 한 줄에 여러 개가 표시되는 것을 확인할 수 있다. inline-block은 박스 단위로, 내용물의 크기에는 상관없이 지정한 박스(div)의 크기에 맞춰서 적용이 된다. 지금 div에 내용이 아무것도 없지만 inline-block은 박스에 적용되기 때문에, 분홍색 박스가 한 줄에 잘 표시가 된다.

inline

div에 display:inline;을 넣어보았다. 핑크색 div가 나오지 않는다. 아무런 내용이 없어서 표시되지 않는 것이다.

다시 내용을 채워넣으면,span과 마찬가지로 한 줄에 보여진다.

inline은 내용물 자체에만 적용이 된다. div에 적용해 두었던 width: 80px; height: 80px;를 무시하고, div 안에 들어있는 내용물의 크기에만 맞춰서 변경되는 것을 확인할 수 있다.

position

웹사이트나 앱을 만들 때 가장 중요한 레이아웃과 박스 배치를 결정짓는 position 속성에 대해서 알아본다. position의 static, relative, absolute, fixed, sticky에 대해서 알아볼 것이다.

position 세팅

static

static은 디폴트 값으로, 아무것도 안 했을 때 Html상에 자연스럽게 보여지는 상태이다. 아래의 코드의 노란 박스에 top: 20px; left: 20px;으로 위치를 이동시켜 보려고 했지만 아무 움직임도 일어나지 않았다. 이유는 현재 포지션이 디폴드 값인 static이기 때문이다. 현재 노란 박스는 body 안에 담겨져 있기 때문에 왼쪽 위에 딱 붙어있는 상태가 맞다.

relative

위의 코드에서 노란색 박스를 position:relative;로 지정해 주면, left와 top이 적용되는 것을 볼 수 있다.

똑같은 작업을 파란색 박스에 적용해보면 다음과 같이 파란 박스도 잘 이동하는 것을 볼 수 있다.

즉, 원래 있어야 할 자리에서 왼쪽과 위로부터 20px씩 이동한 것을 볼 수 있는데, 이 relative는 원래 있어야 할 곳을 기준으로 삼는다는 것을 알 수 있다.

absolute

파란색 박스를 absolute로 바꾸면, 완전히 엉뚱한 자리로 이동한 것을 확인할 수 있다.

absolute는 요소와 가장 가까이 있는 부모 요소를 기준으로 움직인다. 여기서는 contianer 클래스를 기준으로, 즉 노란색 박스를 기준으로 왼쪽과 위에서 20px 이동한 것이다.

fixed

파란색 박스에 fixed 속성을 부여하면, 완전히 노란 박스를 벗어난 것을 확인할 수 있다.

fixed는 박스를 완전히 벗어나서, 윈도우를 기준으로 삼는다.

sticky

sticky는 원래 있어야 할 자리에서, 스크롤을 내려도 없어지지 않고 고정된다.