Css를 공부하다보면, 레이아웃 배치의 중요성을 깨닿게 된다.
배치가 우선된다면, 코드작성도 쉬워지기 때문이다.
또, 원하는 곳에 배치하는 것이 지금은 어렵게만 느껴지기도 한다.
그러기 위해 필요한 공부가 position 속성이다.
css position
원하는 곳에 컨테이너를 배치하기 위함이다.
박스
개념부터 잡아가보자
box sizing : content-box;
- 패딩,보더를 제외한 콘텐츠 영역만 지정하게 된다.
box sizing : border-box;
- 패딩, 보더를 합한 콘텐츠 영역을 지정한다.
콘텐츠를 작성하거나 기본적으로 박스를 지정할때, 필요에 따라 어떤 것에 기준을 세울지가 중요하다.
float
뜨다라는 느낌이 살아있는 속성이다.
콘텐츠 위에 떠있다는 느낌으로, Float이 적용된 것과 적용되지 않을 경우, 겹쳐 보이는 현상이 생기기도 하니 주의하자.
float : left를 중복해서 적용할 수 있는데, 이땐 순차적으로 착착 쌓이게 되는 특징이 있다.
clear 속성을 사용하면 기존의 Float형태를 끝내고 새로운 문서 형태로 시작하는 것이라 생각하면 좋을 듯 하다.
Position
포지션은 지금까지 클론코딩을 하며 가장 많이 활용했지만, 정작 이에 대한 지식이 짧았다.
아무튼 사진 위에 글을 올릴때 많이 사용한 것으로 기억한다.
속성은 총 4가지가 있다.
position : static, relative, absoulute, fixed
1. Static
문서의 흐름대로 요소를 배치한다. 모든 문서의 기본 값으로,
좌표를 통해 정확한 위치를 잡아줄 수 없다는 특징이 있다.
2. relative
자연스럽게 배치되고, left나 top를 통해 위치를 지정해줄 수 있다.
3. absoulte
문서의 흐름과 상관없이 원하는 곳에 배치할 수 있다. 다만 부모속성에 relative가 적용되있어야 한다.
left, top right bottom을 통해 모서리에서 얼마나 떨어져 있는지를 지정하는 것이다.
4.fixed
해당 속성은 브라우저 창을 기준으로 한다. 매번 고정된 값을 보여준다.
왼쪽위 상단을 0,0으로 잡아 배치 된다.
visibility
특정 요소를 화면에 보이지 않도록 하는 속성이다.
hidden, visible, collapse로 활성화 가능하다.
display에서도 안보이게 처리할 수 있지만, 그땐, 요소 자체를 메꿔버린다.
즉 다른 콘텐츠가 빈공간을 메꾸지만, Visibility는 공백이 유지된다.
