css레이아웃 float

aerirang647·2020년 1월 28일
0

float이란

레이아웃을 잡는데 사용하는 CSS프로퍼티 이다.
float은 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.


clear

clear 프로퍼티는 float의 동작방식을 제어하는 데 중요하다.

양쪽, 오른쪽, 왼쪽 모두 비울 수 있다.


clearfix 핵

float을 사용할 때 때때로 일어날 수 있는 이상하고 바람직하지 않는 경우.

여기서 해결방법이 clearfix다.
다음과 같은 css코드를 추가해보자.

**이 기법은 근래에 나온 브라우저에만 동작한다. IE6를 지원하고 싶다면 다음과 같은 코드를 추가해야 한다.**


float을 이용한 레이아웃 예제

float을 이용해 전체 레이아웃을 잡는 일도 굉장히 자주 접할 수 있다.
이제 앞에서 position으로 잡은 레이아웃을 float으로 잡은 레이아웃 예제이다.

-> 이 예제에서 페이지를 줄이면 nav의 width 200px은 그대로 있고 다른것만 줄어든다.

그러나 퍼센트 너비로 하면 페이지 크기를 줄여도 일정 모두 그 페이지의 정해진 퍼센트 만큼 차지하게 된다.


퍼센트 너비 레이아웃

레이아웃을 잡는 데 퍼센트를 쓸 수도 있지만 이렇게 하면 작업량이 많아질 수 있다.
이 예제에서 창의 너비가 너무 좁을 경우 nav콘텐츠가 지저분하게 표시되기 시작한다.
결국, 콘텐츠에 알맞는 방식을 선택할 필요가 있다.


미디어 쿼리

"반응형 디자인"

미디어 쿼리는 반응하는 사이트를 만드는 가장 강력한 도구이다.
아래는 퍼센트 너비로 레이아웃을 만들고 메뉴를 사이드 바에 놓기엔 브라우저 창 크기가 너무 작아서 메뉴를 한 칼럼 내에 표시되도록 만들어보는 것이다.

여기에서 더 줄여서 최소 값을 지나면..

이렇게 변해 레이아웃이 모바일 브라우저에서도 멋지게 보이게 된다.

https://mediaqueri.es/
에서 미디어 쿼리를 이용해 만든 다양한 사이트를 볼 수 있다.

min-width와 max-width 말고도 다양하니 MDN문서를 참고.!

++메타뷰포트를 이용하면 레이아웃을 모바일에서도 훨씬 더 나은 모습으로 보이게 할 수 있다.


박스 그리드 만들기-float보단 inline-block을 이용



해결방법

0개의 댓글