Html 마크업중 레이아웃을 구성하는 방법중 css로 레이아웃을 구성하는 방법이 있다.

레이아웃은 홈페이지의 기본 구성요소의 구조이다. 비유를 하자면 컨테이너의 크기와 위치를 조정

하여 원하는 방향과 크기에 따라 컨테이너의 위치를 조정하는 것 이다.

는 작업을 의미한다. 레이아웃은 html의 토대가 되어 그위에 태그가 쌓인다.

레이아웃을 수정할 수 있는 CSS태그는 float와 flex 태그가 있다.

첫번째

float:블럭요소를 떠있게 만들어주는 역할
float: left;왼쪽으로 떠있는 것
float: right;오른쪽에
float: none:왼쪽,오른쪽에 떠있지 않게
float:center값은 없다.

float를 사용하게 되면 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 왼쪽과 같이 부모를 벗어납니다.

그래서 float을 다루기 어렵거나 귀찮은 요소 중 하나라고 생각하는 개발자가 많이 있습니다.

float를 사용하여 레이아웃을 구성할 때에는 clear 태그가 필수적으로 사용된다.

clear(상단에 float값 사용한 것을 무시해라)
clear:left;(왼쪽값을 무시해라.단, 왼쪽박스 높이값이 짧으면 그 공간을 채워서 내려옴)
clear:right;(오른쪽값을 무시해라.단, 오른쪽박스 높이값이 짧으면 그 공간을 채워서 내려옴)
clear:none(기본값,clear를 설정하지 않은것과 같다 )
clear: both;(두방향값을 무시해라.왼쪽이나 오른쪽 어디에도 떠있지 않고 새롭게 정렬)****

두번째

position을 사용하여 레이아웃을 구성한다. position 속성 - relative, absolute, fixed

부모에게 relative를 주고 자손에게 absolute를 주어 부모위치에서 자손의 위치를 잡는 방법이다. absolute를 사용하기 전에 relative를 선언하지 않으면 body 전체를 기준으로 위치를 잡는다. fixed는 컨테이너영역을 고정시킨다. 고정된 영역은 스크롤시에도 고정이 되어있다.

레이아웃 구성시, 기본이 되는 inline요소와 block요소를 구별하여 빌드업 하면 더 간편하다. inline 요소를 여러게 사용하면 줄바꿈 없이 구성 할 수 있다. inline요소는 width, heigth 값을 무시한다. 또한 margin, padding 값을 좌우만 적용된다.

display요소는 자동으로 줄바꿈이 되며, w,h,m,p값을 모두 인지한다.

inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.