EX5 layout | 레이아웃 예제5 #TYPE_5 앞서 배운 float/flex/gid 방식을 사용해 예제를 풀어봅시다. 색상과 치수는 아래 피그마를 참고해주세요 ! 1-1. float을 사용해서 만들어주세요 ! * { margin: 0; padding: 0; } #wrap { width: 100%; } #header { width: 100%; height: 100px; background-color: #EEEBE9; } .header { width: 100%; height: 100px; background-color: #D5CCC9; } #nav { width: 100%; height: 100px; background-color: #B9AAA5; } .nav { width: 100%; height: 100px; background-col.. 2022. 8. 2. layout | 레이아웃 예제4 #TYPE_4 앞서 배운 float/flex/gid 방식을 사용해 예제를 풀어봅시다. 색상과 치수는 아래 피그마를 참고해주세요 ! 1-1. container를 사용해서 만들어주세요 ! * { margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; background-color: #26A69A; } #footer { height: 100px; background-color: #00897B; } .container { width: 1200px; height: inherit; margin:.. 2022. 8. 2. layout | 레이아웃 예제3 #TYPE_3 앞서 배운 float/flex/gid 방식을 사용해 예제를 풀어봅시다. 색상과 치수는 아래 피그마를 참고해주세요 ! 1-1. float을 사용해서 만들어주세요 ! * { margin: 0; padding: 0; } body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header { height: 100px; background-color: #B3E5FC; } #nav { height: 100px; background-color: #81D4FA; } #main { } #aside { width: 30%; height: 780px; background-color: #4FC3F7; float: left; } .. 2022. 8. 2. layout | 레이아웃 예제2 #TYPE_2 앞서 배운 float/flex/gid 방식을 사용해 예제를 풀어봅시다. 색상과 치수는 아래 피그마를 참고해주세요 ! 1-1. float을 사용해서 만들어주세요 ! * { margin: 0; padding: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #C8E6C9; } #main { width: 100%; overflow: hidden; } #nav { width: 100%; height: 100px; background-color: #A5D6A7; } #aside { width: 25%; .. 2022. 8. 2. layout | 레이아웃 예제1 Layout 레이아웃이란 이미지나 글 등을 화면에서 보기 좋게 배열하는 것을 말합니다. 이번 게시글에서는 layout을 만드는 3가지 방법을 알아보려고 합니다. 1. Float-based layout float의 사전적 의미는 '뜨다','떠돌다'이며 말 그대로 특정 요소를 뜨게 하도록 해주는 속성입니다. 플로팅 된 요소는 블럭 요소가 되며 display: inline-block;을 한 것과 같이 됩니다. 01. float: 속성값(value); 속성값 의미 left 요소를 왼쪽 방향으로 띄운다 right 요소를 오른쪽 방향으로 띄운다 none 기본값, 요소를 띄우지 않는다 02. 플로팅 해제 플롯의 원기능은 글씨와 이미지가 있을 때 정리해주기 위해 나온 속성으로 플로팅한 요소는 기본적인 문서의 배치에서 .. 2022. 8. 2. 이전 1 다음
