<CSS 기초> 06. Float

 

1. Float

 float속성은 주로 블록을 가로배치하기 위해 사용한다고 볼 수 있다. 그러나 내가 원하던 디자인이 완전히 깨져버릴 수 있다는 단점이 있다. 이것에 대해 자세히 알아보자.

 

 먼저, float속성을 주게되면 부모태그가 그 사이즈를 인식을 못한다. 지금까지 x y 축의 2차원평면을 봤다면 z축으로 면 위로 붕 뜬다고 생각하면 좋다. 그러나 float속성을 주면 박스타입은 Block으로 바뀐다. 그러나 막지를 못하는 것이다. 그래서 float을 여러개 주면 이는 가로로 배치되게 된다. 그래도 block의 속성은 모두 사용가능하다.

 

 

 block임에도 다른점이 존재한다. 부모와는 동떨어져있으므로 width가 자동으로 부모사이즈가 되는 것이 아니라 content사이즈이다. 그리고 block은 width설정시 margin이 자동으로 채워졌으나 이또한 이루어지지 않는다.

 

 이러한 특징들때문에 생기는 문제가있다. 모든 자식태그들을 float로 하면 부모태그의 height는 0이되버릴 것이다. 그리고 텍스트와 이미지와같은 inline요소는 특이하게 float를 감지할 수 있다. 즉 엉망진창이 될 수 있다.

 

2. 수정

 위와 같이 깨지는 현상때문에 float 속성을 주면 일부 수정이 필요하다. 여기에는 두가지의 방법이 존재한다.

 

 ① overflow : hidden

  float된 자식을 갖고있는 부모에게 이 속성을 주면 자식의 사이즈를 인식하게 된다.

 

 ② clear fix

  이 방법이 가장 정석이되는 방법인데 clear은 오로지 float를 수정하기 위해 존재한다. clear속성은 clear:left 와 같은 형식으로 지정한다. 이는 앞에 존재하는 float=left를 인식하라는 의미이다. 이렇게되면 부모는 자동으로 사이즈를 확보하게 된다. clear : left 에서 left대신 right나 both도 가능하다.

 

 하지만 이 방법은 float 다음에 반드시 어떤 요소가 있어야 사용할 수 있다. 게다가 display가 block인 곳에만 사용할 수 있다는 제약이 있다. 여기서 필요한 것이 바로 가상요소이다.

 

 가상요소를 만드는 방법은 간단하다. ::before과 ::after 을 통해 가상요소를 앞이나 뒤에 만들 수 있다. 다음의 코드를 보자.

  .clearfix::after {
      content:'';
      display:block;
      clear: both;
  }

 위는 clearfix라는 클래스의 뒤에 가상요소를 만든다는 의미이다. 여기서 반드시 content는 빈 값이라도 적어줘야한다. 그리고 display도 block이어야만 clear속성을 사용할 수 있다. 그 후 clear: both를 통해 앞에 나온 float들을 인식하게 해주었다.

 

 

3. 그 외 팁

 

 - 리스트 스타일 : list-style-type : 에 square, decimal, none 등을 주어 리스트의 스타일을 조정할 수 있다.

 

 - 앵커의 편의성 : 리스트안에 각각의 앵커태그를 넣었을 때와 같이 어떤 상자안에 링크가 들어있다면 글자만 클릭했을 때 보다 상자통째로 클릭했을 때 이동할 수 있도록 하는 것이 사용자에게 편할 것이다. 즉 padding과 같은 속성을 줄 때 앵커자체에 줌으로써 타겟영역을 증가시키자.

 

 - 클리어속성 : 이 속성은 자주사용하게 되므로, 위에서 사용했던 코드를 css에 써두고 사용할 일 이 있을 때마다 간단하게 html문서에 클래스로 clearfix를 추가해주면 된다.

 

 

 

---

 

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU