매번 혼자 웹페이지를 분석하면서 느끼는 거지만 기본기가 없으면 마니 답답함이 커집니다.
그래서 웹페이지가 어떻게 해서 화면에 보여지게 되는걸까? 에 대해서 적어보고자 합니다.
웹페이지는 Html 문서에 Element를 연결해서 작성하도록 되어 있습니다.
그러면 이들은 어떤 순서로 페이지에 배치되어 질까요?
Element 들간에는 각 특성에 따라서 공간을 차지하는 방식이 달라 집니다.
1. Block level element
블록처럼 차례대로 위에서 부터 쌓여 내려오도록 되어 있습니다.
2. Inline level element
수평으로 펼쳐저서 영역을 차지하도록 되어 있습니다.
3. 공통사항
요소들간의 관계는 Left, Top, Right, Bottom 으로 정해집니다.
다음으로 Element가 차지하는 영역은 어떤 구조일까요?
Box Model 구조라고 해서 중앙에 Element (width)가 있고 Padding, Border, Margin 으로 구성됩니다.
페이지 레이아웃을 만들때 필요한 핵심개념에는 margin, float, position 이 있습니다.
위치(Position)
1. static
position 은 default 값으로 static 을 가집니다. static 은 block level element 의 기본성질로 한줄에 하나의 element만 놓일수 있다는 사실에 따라 하나씩만 배정합니다. static은 left, top, right, bottom 속성이 무시됩니다.
2. left, top, right, bottom 속성
static 을 제외한 position에서 위치를 지정하기 위해 사용할수 있습니다. 각 속성의 입력값만큼 위치에서 element 를 밀어낸다고 해석하시면 됩니다.
3. relative
static 값에서의 위치를 기준으로 left, top, right, bottom 의 값에 따라 이동하게 됩니다.
종속된 element가 있는 경우에는 상위 element가 이동하는 경우에 종속 element의 위치기준이 바뀌게 됩니다.
4.absolute
화면의 상단좌측을 기준으로 하여 절대적인 좌표를 부여하게 됩니다.
부모가 static 이면 화면위 상단좌측이 기준이 되고, 부모가 absolute거나 relative 라면 부모요소의 좌측 최상단이 됩니다.
5. fixed
absolute 와 동일한데 단지 스크롤에 의햇 위치가 달라지지 않습니다.
float
웹페이지는 기본적으로 가장 위에서 부터 element 들이 아래쪽으로 하나씩 붙여 나가는 형태 입니다.
본문 div 옆에 sidebar div 를 추가할려고 하면 어떻게 해야 할까요? Position 을 absolute 로 해서 하던가 아니면
float 를 사용하면 됩니다.
float 속성이 붙어 있는 element 는 말 그대로 둥둥 떠 있는 상태이기 때문에 다음에 오는 element 는 그 밑으로 비집고 들어가게 됩니다. 여기서 중요한것은 비집고 들어가지만 내용은 가려지지 않을 정도만 들어간다는 것입니다.
그리고 내용이 옆으로 이동할 공간이 존재하면 그 공간을 내용이 이동하면서 비집고 들어갑니다.
이 원리를 이용하면 margin 을 줘서 side bar div 를 옆으로 붙일수 가 있습니다.
float 에는 left, right 속성값이 있습니다.
뒤에 오는 element에 float 영향을 안 미치게 하기 위해서는 clear 속성을 적용하면 됩니다.
희망잡이