Float & Pseudo Element

Float

먼저 float은 "떠다닌다"는 의미로, 이 속성을 적용한 요소는 부모 요소로 부터 floating 된다. 만약 float:left 라고 적용했다면, 부모 요소로 부터 완전히 벗어난 뒤, 해당 요소를 가능한 범위에서 가장 왼쪽에 배치한다. 이를 이용하면 여러 block 요소들을 한 줄에 가로로 배치할 수 있다.

하지만 layout을 완전히 망가뜨리기 때문에 지금은 잘 사용되지 않고, 오래 전에 작성된 코드를 유지 보수하기 위해 배운다.

 

float 속성을 적용하면 생기는 일

• 부모 요소로 부터 floating된 자식 요소는 더이상 자식 요소로 취급 되지 않기 때문에, 남은 형제 요소들이 빈 자리를 채우게 된다. block 요소의 경우, height은 따로 지정하지 않으면, 자식 요소들의 height의 합으로 결정되므로 부모의 height 값이 줄어든 것을 확인할 수 있다. 만약 모든 자식 요소를 float 시키면 부모 컨테이너의 height은 0이 된다. => 레이아웃이 망가진다.
  • height이 0이므로, 부모 컨테이너와 형제 레벨인 요소가, 부모 컨테이너와 같은 높이까지 치고 올라올 것이다.  
  • block 요소들은 float 속성을 적용한 요소를 없는 것처럼 취급 하지만, 텍스트나 이미지 등과 같은 inline 요소들은 float 요소의 존재를 알고 있다. ??? 그래서 아래의 'yellow' 텍스트는 원래 자리에 남아있는 건가? 

 

red box에 float를 적용하지 않았을 때(좌), 적용했을 때(우)

 

모든 자식 요소를 floating 했을 때 부모 요소의 높이가 0이 된다

 

• float 속성을 적용한 모든 요소들은 block 타입의 box가 된다.
  • width, height 등 block에서 유효한 속성을 모두 지정할 수 있다.
  • width를 지정하지 않으면, 부모 요소의 content가 아니라 자신의 content 만큼의 너비를 갖는다(붕 뜨기 위해서 너비를 줄인다고 생각하자). 그렇기 때문에 일반적인 block 타입과 달리 blocking을 하지 않는 block이 된다. width를 지정했을 때에도 남은 공간을 자동으로 margin으로 채우지 않기 때문에 blocking을 하지 않는다. => block 요소이긴 하지만, 한 줄에 여러 요소들을 가로로 배치할 수 있다.  
•  block 요소들(ex. <p>)은 float 속성을 적용한 요소의 존재를 모르지만, inline 요소들(ex. 텍스트, <span>)은 알고있다.

 

block과 inline 비교

 

float 속성으로 망가진 layout을 fix하는 방법

overflow 이용하기

.parent {
  overflow: hidden;
}

 

parent 요소에 위의 속성 값을 적용하면, 부모 요소가 (알 수 없는 이유로) float 속성을 적용한 child 요소의 존재를 알아차릴 수 있다. 아래와 같이 clear 속성을 이용하는 방법도 있다. 단, clear 속성은 block 요소에만 적용할 수 있다. 

 

clear 이용하기

.child1 {
  float:left;
}

.child2 {
  clear:left;
}

 

clear: left 속성을 이용하면, 같은 자식 요소 중에 float: left를 적용한 요소의 존재를 알아차릴 수 있다(right, both 값을 적용할 수 있다). 그렇기 때문에 child2는 child1이 원래 있었던 자리를 차지하는 것이 아니라, 원래 있어야 할 위치를 지키게 된다. 부모 요소는 child2의 위치를 정확히 알 수 있기 때문에, height을 child1 + child2의 값으로 알맞게 유지한다. 

 

clear:left

 

하지만 red가 block 레벨이기 때문에, 두 child 박스가 한 줄에 배치되지는 않는다(그렇다고 display: inline을 이용하면 width와 height 속성을 이용할 수 없게 된다). 

 

div 요소를 추가해서 박스를 한 줄에 배치하기

 

clear라는 새로운 자식 요소를 추가해서 parent가 높이를 유지하도록 만들 수 있다. 하지만 이 방법은 스타일링을 위해 html에 div 요소를 추가하는 것이므로, semantic html markup의 관점에서 좋지 않은 방법이다. css의 pseudo element(가상 요소)를 이용하면 이런 문제를 해결할 수 있다. 가상 요소는 html 요소는 아니지만, 스타일링을 위해 화면에 표기되도록 만들 때 이용할 수 있다. 반드시 content라는 속성 값을 지정해야 한다. 

 

clear 속성을 지정하기 위해 display:block을 반드시 설정해 주어야 한다

 

::before, ::after

 

+) overflow를 이용하는 것은 hacky한 방법이라면, clear는 오직 float으로 망가진 레이아웃을 고치기 위해 사용되는 정석적인 방법이다. 

 

psuedo element(가상요소) | ::before, ::after

1. 반드시 content 속성을 작성해 주어야 한다.
2. 만들어지는 가상 요소의 box type은 inline이므로, 이 요소에 width, height이나 위, 아래에 margin, padding을 설정해야 하는 경우에는 display: block을 적용해야 한다. 
3. sample

li::after {
  content: ' & ';
  margin: 0 0.5rem; 
}

li:last-child::after {
  content: '';
  margin: 0; 
}

 

• ::first-letter | 선택된 요소의 첫번째 글자만 선택, 예를 들어 모든 p 태그의 첫번째 글자의 크기를 1.2배로 스타일링할 수 있다. 
• ::first-line | 선택된 요소의 첫번째 줄만 선택
• ::selection | 선택된 요소를 마우스로 드래깅 했을 때의 스타일링을 정의할 수 있다. 요소 선택 없이 사용하면, 문서의 모든 요소를 선택했을 때 적용할 스타일을 정의할 수 있다.  

::selection