float
- float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.
- float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 레이아웃용으로 많이 사용하고 있습니다.
- 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다.
- 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것입니다.
- 아래 사진의 float의 간단한 예시 사진입니다.
- float 속성값은 다음과 같습니다.
- left : 요소를 왼쪽 방향으로 부유하게 설정
- right : 요소를 오른쪽 방향으로 부유하게 설정
- none : 기본값(default), 요소를 띄우지 않는다.
clear
- 플로팅한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에 레이아웃을 무너뜨리게 되는 현상을 보게 됩니다.
- 플롯을 사용하면 발생되는 현상이며 이러한 문제를 해결하기 위해서는 float 을 해제해 주어야 합니다.
- 여기서 해제한다는 의미는 float이 적용된 요소를 해제하는 것이 아니라 clear를 적용해 float의 영향을 받지 않도록 한다는 의미입니다.
- float 속성을 많이 사용한다고 하였는데, clear도 float를 사용하며 발생되는 문제를 해결하기 위해 많이 사용됩니다.
- clear 속성값은 다음과 같습니다.
- left : 왼쪽에 floating 된 요소를 지정 해제
- right : 오른쪽에 floating 된 요소를 지정 해제
- both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
- none : 기본값(default), floating 을 해제하지 않음
여러가지 float 해제 방법
- 플롯을 해제하는 방법 중에 전 세계적으로 통용되는 이름(관용적인 기법의 이름)으로 clearfix 라는 방법이 있습니다.
- clear 속성을 적용하기 보다 다른 방법으로도 플롯을 해제할 수는 있으나 float 을 사용해 레이아웃을 잡다보면 clear 가 필요해지기 때문에 가급적 플롯된 요소의 부모 요소에 clearfix 방법을 적용하는 것을 권장하고 있습니다.
첫번째. 부모요소에 float 적용
.parent { float: left; }- 플롯된 요소가 자식 요소일 경우에 부모요소는 자식 요소(문서 흐름에서 벗어남)를 감싸지 못하는 특징으로 인해 레이아웃이 무너진 형태처럼 보이게 됩니다.
- 이 문제를 해결하기 위해서는 플롯의 영향을 받지 않도록 해야합니다.
- 이렇게 하면 부모 요소는 자식 요소의 높이를 인지하게 되지만 부모 요소도 float 된 요소가 되어 인라인 블럭의 특징을 가지고 되기 때문에 비주얼 디자인 레이아웃에 따라 상황에 맞도록 사용해야 합니다.
두번째. 부모요소에 display:inline-block 적용
.parent { display: inline-block; }- 부모 요소는 자식 요소의 높이를 인지하게 되지만 되지만 부모 요소에 정의된 인라인블럭 속성 특성 때문에 본인 영역만큼만 너비를 가지게 됩니다.
- float은 클리어되지만 부모태그가 inline-block이 되면서 의도하지 않은 레이아웃이 될 수 있습니다.
세번째. 부모에 overflow:hidden 적용
.parent { overflow: hidden; }- overflow: auto;를 적용해도 되지만 자식 요소 박스의 너비가 부모 요소 박스의 너비보다 클 경우에 스크롤이 생기기 때문에 권장되지 않습니다.
- overflow 특징대로 넘치는 것을 숨겨주는 속성인데, 여기선 다른 의미도 포함하고 있습니다.
- overflow:hidden; 속성을 적용하는 방법은 권장되지는 않습니다.
- 그이유는 동적(스크립팅)으로 자식, 자손 요소들 중에서 부모 요소 박스를 벗어나서 보여주어야 될 경우에 hidden 값으로 인해 보여주고자 하는 콘텐츠를 보여줄 수 없게 되기 때문에 잘 판단하여 선택적으로 사용해야 합니다.
네번째.부모에 가상요소 after에 clear:both
.parent:after {
content: "";
display:block;
clear:both;
}- 앞에서 소개한 방법들은 불필요한 요소를 작성했지만 이 방법은 CSS 를 통해 빈 가상 요소를 생성하여 float 을 해제하는 방법입니다.
- 지금까지 소개한 방식 중 가장 널리 쓰이고 있는 테크닉으로 CSS의 가상(슈도클래스, 의사클래스) 클래스를 이용하는 방법입니다.
- 부모요소가 의도치 않게 inline-block 요소로 바뀌지 않으며, 높이가 정확하게 잡히고, 불필요한 요소가 추가되지 않습니다.
다섯번째. micro clearfix hack
/* CSS */
.clearfix:before, .clearfix:after {
display: block;
content: '';
line-height: 0;
}
.clearfix:after {
clear:both;
}- 이 방법은 CSS 연구전문가인 니콜라스 갤러거가 고안한 방법(micro clearfix hack)으로 처음 HTML5 보일러플레이트란 템플릿 엔진을 통해 소개되었습니다.
- 가장 최신에 나온 방법이며 css에 만들어 놓으면 요소들에게 .clearfix 라는 class만 주면 되어서 가장 간편하고 오류가 적은 방법이다.
A new micro clearfix hack – Nicolas Gallagher
The canonical way to contain floats without extra markup
nicolasgallagher.com
가상 요소(Pseudo-elements)란?
- 가상 요소(Pseudo-elements)는 말 그대로 가상의 요소를 만들고 내용을 넣어 출력하겠다는 것입니다.
- 보통 ::after, ::before을 자주 사용합니다.
- CSS2.1에서는 가상 클래스와 가상 요소 모두 싱글콜론(:)을 사용했지만, CSS3 부터는 둘을 구분하기 위해 가상 클래스는 싱글콜론(:), 가상 요소는 더블콜론(::)을 사용합니다.
오늘은 웹을 만들 때 가장 먼저 하는 레이아웃을 잡을 때 쓰이는 방식 중 하나인 float방식과 float으로 인해 생기는 오류를 바로잡는 방법에 대해서 알아보았습니다!! 오늘도 수고하셨습니다!!