CSS 레이아웃

CSS 레이아웃

보통 무언가를 만든다거나 계획을 세울때 우리는 기본틀부터 짜기 시작한다.
이곳에는 이렇게하고 저기에는 저렇게, 저곳은 또 이렇게해야지 구성을 짜는것을 CSS에서는 layout 이라 한다.

즉, layout은 내가 원하는곳에 블록의 요소들을 배치하는 것이다.

배치방법으로는 display 사용하는 방법, table 태그 를 사용하는 방법, float 속성을 사용하는 방법 등이 있다. table태그를 사용하거나 float을 쓰는것은 과거에 많이 사용했으나 요즘에는 display:flex를 많이 사용한다.

1.Position의 property(속성)

CSS의 position은 웹문서 안의 요소들을 어떻게 배치하여 나타낼지를 정하는 속성이다. position속성을 사용하면, html 문서와 상관없이 원하는 위치에 배치할 수 있다.

position에는 static, relative, absolute, fixed 4가지의 속성이 있다.

1. Static

static은 기본값으로 아무런 값을주지 않아 요소를 문서 흐름에 따라 배치한다.
top ,right, bottom, left, z-index 속성이 아무런 영향을 주지 않기 때문에 거의 쓰지 않는다.

2. relative

요소를 일반적인 문서 흐름에 따라 배치하고(static), 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.
오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.

3. absolute

absolute는 브라우저가 문서의 흐름과 상관없이 left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값이다.
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다.
단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다.

4.fixed

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

5. sticky

sticky는 기준점을 이상을 넘지 않을 때는 relative 포지션처럼 동작하다 그 이상을 넘게 될 시에는 fixed처럼 동작한다.
스크롤이 scroll 박스 밖으로 벗어나게 되는 경우에는 그 위치에서 정지하게 된다.
scroll 박스는 overflow 속성이 존재하는 부모요소를 뜻한다.
여기서 부모요소가 overflow를 특별히 명시하지 않았다면 부모요소가 바로 scroll 박스가 된다.
만일, scroll 박스 사이에 overflow: hidden 이 적용되있는 요소가 있을 경우 sticky 속성이 제대로 동작하지 않으므로 주의해야 한다.

fixed 와 sticky

fixed 와 sticky 둘다 위치를 고정시키는데 fixed 요소는 스크롤를 내리면 브라우저 특정 위치에 그대로 있습니다. 반면에 sticky요소는 특정 시점에서 fixed 요소처럼 행동하다 자신의 부모 요소와 만나게 되면 멈추게 된다.
sticky 요소가 중간에 멈추는 기준은 부모 요소의 크기 내에서 멈추게 된다. sticky 요소는 부모 요소의 크기 밖으로 나갈 수 없습니다.
만약 sticky 요소가 모든 조건을 충족했는 데도 불구하고 제대로 동작하지 않는다면 부모 요소의 크기가 어떤지를 먼저 체크해봐야 한다.

2. Display의 property(속성)

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나이다.

이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다.

대부분의 HTML 요소는 display 속성의 기본값으로 inline과 block 두 가지 값 중 하나의 값을 가집니다.

1. inline

inline요소는 불바꿈 없이 바로 옆에 생성됩며, 화면에 표시되는 영역만큼만 차지한다.
따라서 나머지 공간에 다른 요소가 올 수 있습니다.
inline 요소 안에 inline 요소는 포함이되나 block 요소는 포함할 수 없습니다.

2. block

block 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄(100%의 넓이)을 차지한다.
따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다.
width, margin, padding을 이용하여 크기나 위치를 지정하려면 block 요소여야 한다.
display: block;으로 지정하면 해당 요소를 block으로 지정한다.
block 요소가 다른 block 또는 inline 요소를 감쌀 수 있습니다.

3. inline-block

인라인과 블록 이외에도 display 속성에 자주 사용되는 속성값에는 인라인-블록(inline-block)이 있습니다.
display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작한다.
하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작한다.
inline요소와의 차이점은 너비와 높이를 설정할 수 있습으며 블록 요소처럼 margin이나 padding을 이용하여 여백을 지정할 수도 있다는 점이다.