레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } #wrap { width: 100%; } #header { width: 100%; height: 100px; background-color: #EEEBE9..
레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } #header{..
레이아웃03 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header {..
레이아웃02 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header {..
레이아웃01 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header {..
Layout (레이아웃) CSS에서 요소들을 보기 쉽게, 배치하고 정렬하는 것. 레이아웃을 만드는 방법에는 float, flex, grid가 있다. Layout 종류 방법 1 : float div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. /* clearfix */ .clearfix::before, .clearfix::after { content: ''; display: block; line-height: 0; } .clearfix:..
