레이아웃은 웹화면을 볼 때 컨텐츠를 좀 더 직관적으로 볼 수 있게 해주기 때문에 중요하다. 이러한 레이아웃을 지정하는데 있어서 여러 속성들을 이용할 수 있다. HTML 요소들은 디스플레이 기본값을 갖는데 block 또는 inline으로 구분할 수 있다.
block & inline
- block요소는 다른 요소가 동일 수평선상에 나타나지 않도록 한다. 또한 부모 요소의 영역을 다 차지한다. (ex.
h1,div) - inline요소는 콘텐츠에 필요한 만큼만 수평 공간을 차지하며 다른 요소 바로 옆에 있다. (ex.
span,input,img) - inline-block요소는 서로 옆에 위치할 수 있으며,
width및height속성을 사용하여 해당 치수를 지정할 수 있다.
position
요소들은 position을 이용해서 위치를 변경할 수 있다.
relative: 이 값을 사용하면 웹 페이지에 기본 위치를 기준으로 요소를 배치할 수 있다. 상하좌우 값을 넣어 상대적으로 간격을 띄우고 다른 요소의 위치에는 영향을 미치지 않으므로 페이지 레이아웃에서 요소에 대해 주어진 공간은 동일하다.absolute: 요소가 일반 문서 흐름에서 제거되고 페이지 레이아웃에서 요소를 위한 공간이 생성되지 않는다. 가장 가까운 위치에 있는 부모요소를 기준으로 위치가 지정된다.fixed: 요소를 사용자의 스코롤에 상관 없이 페이지의 특정 위치에 고정 시킬 수 있다.
float
float는 텍스트와 인라인 요소를 주위에 둘러쌓이도록 하며, 컨테이너의 왼쪽 또는 오른쪽에 요소를 배치한다. float는 띄워서 이동시키기 때문에 요소가 중첩되거나 충돌 할 수 있다.
clear
clear 요소를 사용하면 동일 수평선 상에 있는 요소들을 정리해주며 left(왼쪽), right(오른쪽), both(양쪽)으로 방향을 설정할 수 있다.
Generalist.