css 로 width 를 나누는 두가지 방법

우선 css 로 반응형 width 값을 나누기 위해서는 % 를 사용하게 된다.

오래전부터 사용해오던 방식이다.

테마몰에서 판매중인 메가메뉴에 대해서 예를 들자면

http://demo-04.ety.kr/

네비게이션의 2차 메뉴들이 현재 5칸으로 나뉘어져 있는데 이를 6칸으로 변경하는 방식은 이렇다.

5칸으로 사용할 경우 width:20% 로 사용하게 되면 20% * 5 = 100% 이므로 5칸으로 나뉘는 것이다.

만일 이를 6칸으로 나누는 경우에는 상당히 애매해진다.

width : 16.666666 %이런식으로 사용해야만 하기 때문이다. 

결론은 100% 이라는 합을 구해야 하기 때문이다.

width: calc(100%/6); 

이럴 경우 아래 예제 처럼 사용하면 된다.