728x90
반응형
레이아웃 - float 유형
- block 요소는 원래 세로로 나열되지만 float을 이용하여 가로로 배치할 수 있습니다.
- float은 레이아웃을 완성하기 위한 필수적인 속성이다.
- float을 지정하는 방법과 float을 해제하는 방법도 있다.
| 속성 값 | 설명 |
| left | 요소를 왼쪽에 배치하고 나머지 콘텐츠를 그 주변을 흐르도록 함 |
| right | 요소를 오른쪽에 배치하고 나머지 콘텐츠를 그 주변을 흐르도록 함 |
| none | float 실행을 취소할 때 사용 함 |
예시를 만들어서 작성해보겠습니다!!!
1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다.
- 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다.
- header 구역, nav 구역, aside 구역, sectioin 구역, footer 구역을 만들어줍니다.
- head 태그에 style 태그를 입력해줍니다
- 구역을 초기화 시키기 위해 전체 구역 *{ }에 margin: 0;, padding: 0;을 줍니다.
- 해당하는 구역에 width, hegiht 와 배경색을 줄 수 있도록 태그를 만들어 줍니다.
- 각 구역에 width 값과 height 값과 알맞은 배경색을 넣어줍니다.
- wrap 구역이 가운데 정렬이 될 수 있도록 margin: 0 auto;를 입력해줍니다.
그러면 밑에 있는 그림처럼 나옵니다. 이제 float을 써서 보기 좋게 만들어 보겠습니다.
- aside 구역과 section 구역에 각각 float: left;를 입력해 줍니다.
그러면 밑에 있는 그림처럼 나옵니다.
뭔가 보기 좋게 정렬이 된거 같은데... footer 구역이 사라졌습니다.
footer 구역이 생성되도록 해보겠습니다.
- footer 구역이 생성되도록 footer 구역에 clear: both;를 입력해줍니다.
그러면 완성된 그림이 나옵다!!!!
clear 속성
clear 속성은 float된 박스들의 바로 다음 박스에게주변을 흐르지 않고 원래대로 아래에 배치되도록 합니다.
즉, float을 해제시켜주는 중요한 역할을 하는데, 이 요소는 블록이어야 합니다.
| 속성 값 | 설명 |
| left | float된 박스 중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려옴 |
| right | float된 박스 중 우측이 짧을 때 우측의 빈 공간부터 채워 내려옴 |
| both | float된 박스 중 어느 쪽도 채우지 않고 다시 한단으로 배치 |
float 해제하는 방법
지금까지 알아본 바로 float을 해제하지 않으면 다음 박스들의 레이아웃이 틀어지며, 또한 float된 박스를 감싸는 박스에 부여된 배경, 테두리 여백 등이 제대로 나타나지 않았습니다. 따라서 레이아웃을 제대로 표현하는데 float 해제는 반드시 필요합니다. 해제되는 경우를 알아보겠습니다.
| 방법 | 속성 설명 |
| 1 | · float된 요소를 감싸는 박스가 이미 float 되어 있는 경우 · 우연히 일어난 경우가 드물며, 어차피 감싸는 박스의 float을 해제해야 합니다. |
| 2 | · float된 요소를 감싸는 박스에 overflow; auto;를 합니다. · 세로 스크롤바가 생길 겨우 사용할 수 없으며 width값을 주어야 크로스 브라우징 됩니다. |
| 3 | · float된 박스들을 감싸는 박스에 height값을 줍니다. · 본문 내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우 아니면 사용불능합니다. |
참고 홈페이지
728x90
반응형
