CSS. float, 영역깨짐현상 해결 방법

설명을 하기 전에, float이 나오게 된 계기

사이트를 만들기 전, 검색 최적 엔진(SEO), meta, grid system 등의 개념을 배웠다

그리고 헤더, 네비 푸터 등등 색깔만 입혀서 어떻게 하면 배치할 수 있는지도 배웠다!

 

이제 남은건... 그냥 각각 만들어서 조립만 하면 되겠네? 라고 생각했는데,,, 너무너무 헷갈리는 것들이 많다

원래 해보지 않고는 모르지,

그냥 내 이름을 바꿔야겠다 성이 안, 이름을 일로...

---

주어진 과제는 위 사진과 같다

선생님께서 Zeplin으로 사진파일?을 주셨고 그걸 px에 맞게 배치를....

 

header을 세 부분으로 나누고, 작은 영역으로 나누고, 각각 클릭할 수 있게 <a href="">로 만든 다음 등등등

다른 것들은 아주 재미났지만 float 부분이 많이 어려웠다!

 

그래서 정리해봤다 float 깨짐 현상 극복 방법...!

 

float 영역 깨짐 현상

float은 '띄우다'라는 뜻으로, 한 요소를 일반적인 레이아웃의 흐름으로부터 띄어 수평 정렬을 할 때 사용한다.

float 속성은 이미지와 텍스트를 함께 배치할 때 사용하며, 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치된다.

대부분, float: left 로 레이아웃을 만들 때, 영역 깨짐(Height 값이 사라져 0이 되는 현상) 이 발생을 한다.

이를 해결할 수 있는 3가지 방법을 아래에 서술하겠다.

---

1. 깨지는 영역에 clear: both; 를 설정한다.

clear: both; 는 취소하다 라는 개념이다.

float 속성을 더 이상 사용하지 않고 그 전으로 되돌린다.

clear: both; 오른쪽, 왼쪽을 취소, 가장 많이 사용 
clear: left; 왼쪽을 취소
clear: right; 오른쪽을 취소
clear: none; 기초 값으로, clear값을 설정하지 않은 것과 같음

2. 부모 영역한테 overflow:hidden; 설정

자식 영역에 float을 주게되면, 부모 영역의 height값이 없어진다.

이 때, 부모 영역에 overflow:hidden;을 적용하면 float은 해제되어 영역만큼 높이 설정된다.

3. 가상의 영역 속성을 만들어서 =clearfix 속성을 설정

float을 사용한 부모 영역에 .clearfix를 설정하면 float으로 인하여 영역이 깨지는 현상을 방지할 수 있다.

즉, 가상의 영역 속성을 만들고 내용을 넣어 출력하는 것이다.

     /* clearfix */
.clearfix {
    zoom: 1;
}

.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
}

.clearfix:after {
    clear: both;
}

여기에서 개념을 조금 짚어보겠다

• zoom:1; : 익스플로어 6,7,8 버전에 영역을 잡기위한 요소
• ::before, ::after : 가상요소를 사용하여 컨텐츠를 사용하는 속성
• clear: both; : float 성질을 양쪽에서 차단하는 역할

 

아직 이해가 잘 안된다 아니 아는데 말하려고 하면 잘 안되는 그런...상황 다음에 이해가 잘 되면 또 글써야지