본문 바로가기

레이아웃5

레이아웃 05 레이아웃3 이번 레이아웃은 section이 4개로 나누어진 레이아웃입니다. float을 이용한 레이아웃 태그를 float 속성 및 widh, height속성 등을 이용하여 레이아웃을 배치하는 방식입니다. /* float으로 인한 영역깨짐 방지법 1. 깨지는 영역에 clear:both를 설정한다. 2. 부모 박스 영역에 overflow: hidden을 설정한다. 3. clearfix를 설정한다. */ .clearfix::before, .clearfix::after{ content: ''; display: block; line-height: 0; } .clearfix::after{ clear: both; } *{ margin: 0; padding: 0; } #wrap { width: 100%; } #head.. 2022. 7. 29.

레이아웃 04 레이아웃4 이번 레이아웃은 전체 영역이 들어간 구조입니다 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 사용하여 가운데 영역을 설정합니다 float을 이용한 레이아웃 태그를 float 속성 및 widh, height속성 등을 이용하여 레이아웃을 배치하는 방식입니다. *{ margin: 0 auto; } #wrap { width: 100%; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; background-color: #26A69A; } #footer { height: 100px; background-colo.. 2022. 7. 29.

레이아웃 03 레이아웃3 이번 레이아웃은 section이 3개로 나누어진 레이아웃입니다. float을 이용한 레이아웃 태그를 float 속성 및 widh, height속성 등을 이용하여 레이아웃을 배치하는 방식입니다. * { margin: 0; padding: 0; } #body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #B3E5FC; } #nav { width: 1200px; height: 100px; background-color: #81D4FA; } #main { width: 1200px; } #aside { width: 3.. 2022. 7. 29.

레이아웃 02 레이아웃2 사이트를 만들 때 기본이 되는 레이아웃 입니다. float을 이용한 레이아웃 태그를 float 속성 및 widh, height속성 등을 이용하여 레이아웃을 배치하는 방식입니다. * { margin: 0; padding: 0; } #body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #C8E6C9; } #nav { width: 100%; height: 100px; background-color: #A5D6A7; } #main { width: 100%; overflow: hidden; } #aside { width.. 2022. 7. 29.

레이아웃 01 레이아웃1 사이트를 만들 때 가장 기본이 되는 레이아웃입니다. float을 이용한 레이아웃 태그를 float 속성 및 widh, height속성 등을 이용하여 레이아웃을 배치하는 방식입니다. * { margin: 0; padding: 0; } #body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #FFE0B2; } #nav { width: 100%; height: 100px; background-color: #FFCC80; } #aside { width: 30%; height: 780px; background-color:.. 2022. 7. 29.

이전 1 다음

728x90

HTML

자세히보기

CSS

자세히보기

JAVASCRIPT

자세히보기

티스토리툴바