레이아웃과 관련된 css 속성들을 사용하여 웹페이지를 깔끔하고 보기 좋게 만들 수 있다. 요즘은 스마트폰이나 테블릿과 같이 디바이스의 종류가 다양해지면서 화면의 크기도 제각각이다. 다양한 화면 크기에 따라 레이아웃이 재구조화되는 것을 반응형 웹페이지라 한다. 그리고 재구조화에 적합한 flex, grid와 같은 css 속성이 등장했다.
이들의 출현 전에는 display, position, float 등의 속성을 사용하여 레이아웃하였다. flex와 grid는 각각 2009년, 2019년에 만들어졌다. 때문에 아직까지는 기존의 속성이 사용된 웹페이지가 상당히 많다. 이번 시간에는 이 3가지 속성에 대해서 알아보자.

1. display

display 속성은 요소가 화면에 어떻게 보여질지를 정해준다. 종류로는 크게 inline, inline-block, block이 있다. html 요소의 목적에 따라 display 기본값은 주로 inline이나 block으로 설정되어 있다.

inline 속성은 그 다음 요소가 같은 줄에 이어서 위치한다. 이 속성은 width와 height 값을 가지지 않는다. inline 속성을 기본값으로 가진 요소에는 span, img, a 요소 등이 있다.

block 속성을 지닌 요소는 새 줄에 위치하고 그 다음 요소가 아래에 위치하여 줄바꿈한 효과를 볼 수 있다. 단락을 구성하는 semantic 요소인 header, section, footer 등이 여기에 속한다. div, p 요소 등도 block을 기본값으로 가진다.

inline-block 속성은 inline과 다르게 width, height 값을 가질 수 있어 사이즈 조절이 가능하다. 어떤 요소를 바로 옆에 위치시키며 크기를 설정하고 싶다면 inline-block이 적절할 것이다.

2. position

position 속성은 요소를 원하는 좌표에 붙일 수 있게 해준다. 원하는 좌표는 위치 속성(top, bottom, right, left)에 적절한 값을 주어 설정할 수 있다.

1. static

position을 설정하지 않으면 non-position인 static이 기본값으로 설정된다.

2. relative

relative 속성은 위치 속성과 같이 사용할 때 그 효과를 볼 수 있다. 만일 relative 속성만 설정한다면, 요소는 static으로 설정한 것과 같이 아무런 변화가 없을 것이다.

아래 div 요소를 살펴보자.

div{
  position: relative;
  left: 20px;
}

left 값으로 20px을 주는 것은 div의 좌측에 20px 공백을 채우겠다는 의미와 같다. 따라서 div는 좌측으로부터 20px 떨어진 위치에 놓여진다.

3. absolute

부모 요소를 기준으로 위치를 설정할 수 있다. 부모 요소의 position이 설정되어 있지 않은 경우나(=static), body가 부모라면 뷰포트를 기준으로 위치가 설정될 것이다.

뷰포트(viewport)란?
현재 보여지는 화면의 크기를 말한다. 내용이 많아 스크롤이 있는 웹페이지라면 웹페이지의 높이가 뷰포트의 높이보다 클 것이다.

4. fixed

absolute와 마찬가지로 위치를 고정시키고 싶을 때 사용한다. absolute와 다른 점은 부모 요소를 기준으로 하지 않고 항상 뷰포트를 기준으로 설정된다.

예를 들어, 스크롤이 있는 웹페이지의 div에게 아래와 같은 css를 설정했다고 가정해보자.

div{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
}

우선 div는 왼쪽과 아래쪽의 공백없이 하단에 고정되어 있을 것이다. 스크롤을 내리더라도 div는 항상 하단에 고정되어 있다. width가 100%이기 때문에 뷰포트의 가로 면적 전체를 사용하고 height은 고정된 값을 주었다.

3. float

float은 '뜨다'라는 의미로, css에서의 float 속성은 해당 요소를 뜨게 만들어준다. 주로 img 요소를 텍스트와 배치하고 싶을 때 사용한다.

아래 div에 float 속성을 적용시켜보자.

div{
  float: right;
}  

div는 본래 block 형태로 새로운 줄의 왼쪽을 기준으로 위치하지만, float right값을 주어 오른쪽에 위치한다. 여기서 div의 앞 요소가 있다면 그 요소의 오른쪽에 나란히 위치할 것이다.