CSS 레이아웃을 알아보자

HTML을 작성하고 CSS로 스타일을 입힐때 가장 중요한것은 뭐라고 생각하는가??

폰트나 색상, 배경 이러한 요소들도 물론 중요하지만, 내가 작성한 요소들이 내가 원하는 위치에 있도록 하는것이 제일 중요하다.

이러한 요소들을 원하는 위치로 이동시키기 위해서는 CSS 속성중 display 와 position 두가지 속성이 중요하다.

 두가지 속성을 간단하게 이야기하자면, display는 요소의 성질을 정해준다. 즉, div와 같은 block의 성질을 지닌 요소들을 inline이나 inline-block등으로 성질변환을 시킬 수 있다. 반대로 inline성질을 가진 요소들도 다른 성질로 변환 시킬 수 있다. 

해당 자료를 보면 display 속성을 이용하여 block요소인 div 와 inline요소인 span의 성질을 자유자재로 바꾸는 모습이다.

 

 position은 간단하게 설명하자면 요소가 있어야할 위치의 기준점을 변경 하는것이다.

기본값은 static 이며 이는 일반적인 문서의 흐름대로 요소가 배치된다. 

left와 top을 주어도 위치는 변하지 않는다.

 

relative는 static과 같이 일반적인 문서의 흐름대로 배치가 된 후, 자신을 기준으로 설정된 상,하,좌,우가 정해진다.

자신이 있던 위치를 기준으로 left와 top가 이동했다.

 

absolute는 문서에 흐름에서 벗어나고, 가장 인접한 부모요소를 기준으로 상,하,좌,우가 정해진다.

문서의 흐름에서 벗어나고 인접부모인 article을 기준으로 left와 top가 정해졌다.

 

fixed는 문서에 흐름에서 벗어나고, 뷰포트의 초기 컨테이너를 기준으로 상,하,좌,우가 정해진다.

뷰포트를 기준으로 left와 top가 정해졌다.

하지만 fixed의 경우 부모요소 중 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트가 아닌 해당하는 뷰포트를 기준으로 상,하,좌,우가 정해진다. 

fixed이지만 상위 컨테이너의 filter값이 존재하여 article을 기준으로 위치가 결정됨.

마지막으로는 sticky속성이 있다. sticky는 문서의 흐름대로 배치가 되고 스크롤이 되어 해당 요소가 있어야 하는곳을 뷰포트가 벗어나려 하면 가장 가까운 스크롤되는 조상을 기준으로 위치가 정해진다

 

 

레이아웃은 Front-end에 있어 빠질수 없는 부분이기 때문에 한번 공부할때 확실히 개념을 잡고가는 것이 중요하다.