Layout5 레이아웃05 레이아웃05 이번 레이아웃은 레이아웃 03번이랑 유사합니다. 공부하실 때 레이아웃03번도 참고하면 도움이 될 것입니다. float을 이용한 레이아웃 float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전) ※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다. 사용 방법 div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다. *{ margin: 0; padding: 0; } #wrap { width: 100%; } #header { height: 100px; background-color: #EEEBE9; .. 2022. 8. 3. 레이아웃04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 레이아웃04의 특징 레이아웃04는 처음 구조가 반응형에서도 다른 변화 없이 그대로 나타나기 때문에 float, flex, grid와 같은 속성을 이용하지 않아도 됩니다. *{ 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; backg.. 2022. 8. 3. 레이아웃03 레이아웃03 이번 레이아웃은 총 7개의 구조였다가 media 768px일 때 6개의 구조로 변화하는 구조입니다. 이때 없어지는 칸에 display: none; 을 써주어야 합니다. float을 이용한 레이아웃 float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전) ※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다. 사용 방법 div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다. * { margin: 0; padding: 0; } body { background-color: #E1F5FE; } #wra.. 2022. 8. 3. 레이아웃02 레이아웃02 이번 레이아웃은 가운데를 3분할한 구조입니다. 반응형으로 만들 때 바뀌는 구조를 주의해야 합니다. float을 이용한 레이아웃 float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전) ※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다. 사용 방법 div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다. * { margin: 0; padding: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #h.. 2022. 8. 3. 레이아웃01 레이아웃01 이번 레이아웃은 기본적인 구조로, 간단한 레이아웃 구조입니다. float을 이용한 레이아웃 float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전) ※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다. 사용 방법 div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다. * { margin: 0; padding: 0; } body { background-color: #fff3e0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%;.. 2022. 7. 29. 이전 1 다음
