block과 inline
div,header, p과 같은 태그는 하나를 입력하면 다른 태그들과 독립되어 출력이 된다. 이는 block속성이라 부모의 크기 만큼의 독립적인 공간을 갖는다. 반면 a, img, span과 같이 연속되어 출력되는 태그들을 inline 요소이다. 이들은 줄이 바뀌지 않으며 계속되서 추가된다.
inline 요소들은 자기만의 박스를 갖고 있지만 컨텐츠의 크기 만큼의 크기가 있기 때문에 사용자가 지정하는 크기 조정이 불가능하지만 div는 넓이와 높이 설정으로 크기 조정이 가능하다. 레이아웃을 할때 그럼 인라인 속성들을 사용못하는가?
인라인의 레이아웃을 위해 블록화가 가능한데 이것이 바로 inline-block 기능이다.
position속성 -relative, absolute, fixed
가끔 웹페이지의 크기를 조정해도 페이지 내에 일정한 위치를 유지하는 속성들이 있다. 이는 자리를 고정한 position-absolute 기능을 이용했기 때문이다.
absolute는 상속된 부모 안에서 특정한 위치를 고정한다. 다만 특징은 position이 지정된 부모를 상속한다는 것이다. 그러기 위해서는 상속시키고 싶은 요소에다가 position-relative을 적용 시켜야 absolute가 해당 부모에 맞추어 위치가 고정이된다.
그럼 어떤 사이트는 웹페이지 자체에 고정이 되는 아래 예 같은 경우에는 어떻게 할까?
이는 position-fixed 기능을 사용한 것이다. fixed 같은 경우는 body 자체에 상속되는 것으로 웹페이지 내 어떠한 위치에 고정되는 기능이다.
이를 통해 스크롤 혹은 페이지 크기 조정에 따른 다양한 레이아웃 연출이 가능하다.
float
해석 그대로 뜬다는 뜻이다. 즉 문서상 배치에서 벗어나서 자유로운 배치가 가능하다. 그렇기에 3가지 요소들이 각각 가로 배치를 하여 특정 간격을 유지 할수가있다.
사실상 flex의 등장으로 자주 사용되지 않는다. 하지만 여러 사이트들이 과거에 사용한 소스를 보기 위해서, 그리고 기본적인 레이아웃을 알기위해서는 파악하기 위함이다.
[W.I.F]What I Felt
매일 이용하는 웹페이지가 얼마나 복잡한 레이아웃이 있는지 알게 되었다. 단순 위치 배열이 아닌 페이지의 크기나 각 요소들 간에 배치 등등이 복잡한 코딩 과정 끝에 나타나는 결과물인 것을 알게 되었다. 멘토님이 말하신대로 웹페이지를 보았을 때 레이아웃을 관심 깊게 보는 인목도 필요하다는 말에 적극 공감한다.
