CSS - 18-2. 레이아웃의 모든 것

1. position 속성

static	요소를 문서 흐름에 맞추어 배치한다.
relative	이전 요소에 자연스럽게 연결하여 위치를 지정한다.
absolute	원하는 위치를 지정해 배치한다.
fixed	지정한 위치에 고정하여 배치한다.
sticky	위치에 따라서 동작방식이 달라진다. 요소가 임계점 이전에는 relative와 같이 동작한다. 그 이후에는 fixed와 같이 동작한다.

static을 제외한 나머지 속성 값들은 top, right, bottom, left와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있다. 각 값들은 그 방향에서 얼마만큼 떨어져 위치시킬 것인지를 나타낸다. (예. top: 10px 이면 기준 위치 위에서 10px 떨어져 위치시키라는 뜻이다.)

 

 static

static은 position 속성의 기본값이다. 요소를 나열한 순서대로 배치되며, top, right, bottom, left와 같은 속성을 사용할 수 없다.

 

relative

static을 기준으로 상대적 위치를 지정할 수 있는 속성값이다. (예. static일 때 기준으로 왼쪽 50px, 위쪽 50px에 위치해 있다면 style="left: 10px; top: 10px;"을 적용하면 왼쪽으로부터 60px, 위쪽으로부터 60px 이동하는 형식.) 상대적 위치는 top, right, bottom, left 속성을 써서 나타낼 수 있다.

 

absolute

absolute 속성값은 브라우저가 문서의 흐름과 상관없이(요소를 수직으로 놓을지 수평으로 놓을지 등을 결정하는 것) top, right, bottom, left 속성 값을 이용하여 요소를 위치시키는 속성 값이다. 이때 기준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소이다.

 

fixed

fixed 속성값은 absolute 속성 값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정한다. 하지만 position: relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 된다. 따라서 브라우저 창을 어디로 스크롤하더라도 계속 고정되어 표시된다.

(기준점: 브라우저 왼쪽 위 꼭지점)

 

sticky

sticky 속성은 기준점을 이상을 넘지 않을 때는 relative 포지션처럼 동작하다 그 이상을 넘게 될 시에는 fixed 속성과 같이 동작하게 된다. 그러다 스크롤이 scroll 박스 밖으로 벗어나게 될 경우 그 위치에서 정지하게 된다. 기준점을 설명하자면 top:50px인 sticky 속성을 예로 들어보면 스크롤을 내렸을 때 뷰포트(viewport)와 요소 사이의 거리가 50px 이상이면 relative처럼 동작하다 50px 이하가 됐을 때 기준점을 넘은 것으로 보고 그때부터 fixed 요소처럼 동작하게 된다. 뷰포트는 현재 사용자에게 보이는 브라우저 창이라 생각하면 된다.

scroll 박스는 overflow 속성이 존재하는 부모 요소를 뜻한다. 부모 요소가 overflow를 특별하게 명시하지 않았다면 부모요소가 scroll 박스가 된다. 만일, scroll 박스 사이에 overflow: hidden이 적용돼있는 요소가 있을 경우에는 sticky 속성이 제대로 동작하지 않으므로 주의해야 한다.

 

---

2. inline, inline-block, block

css에서 display속성은 그 값에 따라 웹페이지를 보고 있는 사용자에게 특정 요소를 어떻게 보여줄지가 결정된다. display 속성은 다양하다.

 

 

inline

display가 inline으로 설정될 경우, 요소는 다른 요소들과 함께 같은 라인에서 표시된다. 가로 크기, 세로 크기를 임의로 지정할 수 없으며, 크기는 안에 내용에 의해 결정된다. 대표적인 요소로는 span이 있다.

 

inline-block

display가 inline-block으로 설정될 경우, 요소는 block + inline의 속성을 합쳐놓은 것과 같다. block처럼 가로 크기와 세로 크기를 설정할 수 있고, inline처럼 다른 요소와 같은 라인에 배치할 수 있다.

 

block

display가 block으로 설정될 경우, 요소는 inline처럼 다른 요소와 같이 한 줄에 있지 않고, 계속해서 새로운 줄에 위치한다. 그리고 가로 크기가 부모 요소의 100%를 차지하게 된다. 가로 크기와 세로 크기를 지정할 수 있으며, 가로 크기를 부모 요소보다 작게 설정할 경우, 나머지 부분은 margin으로 채워지게 된다. 이 속성의 대표적인 요소는 div, p 등이 있다.

 

---

3. float

float은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성이다.

float 속성은 묶음 태그(block element)만 적용할 수 있다. -> (예. div, p, ol, ul, img, table..)

float 속성에는 

• none(기본값): 정렬하지 않는다.
• left: 왼쪽으로 정렬한다.
• right: 오른쪽으로 정렬한다.

float: none 속성은 기본값으로 block element 기본 속성을 그대로 유지한다.

float: left는 왼쪽 정렬되어 오른쪽에 다음 글자가 붙게 된다.

float: right는 오른쪽 정렬되어 왼쪽에 글자가 붙게 된다.