CSS에서 danlging div

웹페이지를 만들자면 기본적으로 div를 쓰게 되죠.
div는 재미난 특성이 많은 상자지만,
개발하는 입장에서는 이 특성들을 제대로 잡아주지 않으면
귀찮은 일이 생길 수도 있죠.

그 중 하나가 제목에 써 있는 '떠다니는 div.'
div 상자의 위치를 잡아주지 않으면 브라우저 창의 크기를 조절할 때
div 상자의 위치가 이상하게 변할 수 있는 것입니다!

그래서 아래의 실험을 해봤습니다.


1. div 상자 두 개가 있다.
둘 다 display : inline-block 속성을 지정해줬다.

2. div 상자 두 개가 있다.
둘 다 display : inline-block 속성을 지정해주고
전체 상자를 또다른 div로 감싸줬다.
div에다가 width 속성은 지정하지 않는다.

3. div 상자 두 개가 있다.
둘 다 display : inline-block 속성을 지정해주고
전체 상자를 또다른 div로 감싸줬다.
그리고 전체 div에다가 width 속성을 지정해줬다.
이 때 width 속성의 크기는 안에 들어 있는
div 상자 2개의 크기를 합친 것보다 크게 한다.

안에 들어있는 div 상자 2개는 width, height이 모두 지정되어 있습니다.
그리고 결과를 알아보기 쉽게 하기 위해서 테두리를 만들어주었습니다.
이제 실험 시작!

 
브라우저 창 크기를 줄일 경우
1,2번의 경우에는 오른쪽에 있는 div 상자가
왼쪽 것의 아래로 내려갑니다.

반면에 3번의 경우에는
브라우저 크기를 줄이건 말건 오른쪽 div 상자가
가만히 있습니다.


전체를 감싸는 div에 width 속성을 빼고 height 속성을 주고 테스트해봤는데
1,2번과 똑같은 결과가 나오더군요. 

결론 : width를 잘 씁시다.