width % 질문드립니다!
본문
컨텐츠의 너비가 1400이구요 사이의 마진을 40px 씩 잡았습니다.
컨텐츠 3개를 float으로 집어 넣으려고하는데요
질문은 ul의 li에 너비를 33.3333% 주고 첫번째, 두번째에 margin-right 40씩주면
3번째 있던 li가 밑으로 떨어지구요
너비를 440px로 맞춰서 주면 3번째 있던 li가 밑으로 떨어지지 않고 제대로 정렬됩니다.
무슨 이유에서 그런건가요?.. %로 작업하고 싶은데 자꾸 밑으로 떨어지면 어떤식으로 해야하나요?
답변 4
간단하게 생각하시면
440px * 3 = 1320px + margin 80px(40+40) 이라서 width 1400px를 넘지 않으니 딱 맞춰지는거구요
li를 33.33%로 잡으면 1400px에 33%면 466px 쯤 되겠죠?
466px * 3 = 1398px + margin 80px(40+40) 하면 width 1400px를 넘어버리니 당연히 아래로 이동되는거지요
이러한 현상을 방지하기위해선 margin을 제외한 값으로 계산하셔야합니다
css에 calc라는 구문이있습니다 간단하게 계산식을 추가할수있는 구문이지요
width : calc(33.33% - 26px);
이런식으로하면 li의 width가 33.33%에서 26px을 뺀값을 width로 잡히게됩니다
왜 26px을 빼냐면 33.33%니까 80px(margin)도 3등분을 해줘야겠지요?
물론 이렇게하면 정확하게 떨어지진 않아서 몇픽셀은 빈공간으로 남을겁니다
깔끔하게 떨어지게 하고싶으면 마진도 %로 주면됩니다
32% 32% 32% = 96%
4%남으니 2%씩 마진으로 잡으면 딱떨어지겠네요
크롬이라면 소숫점 이하 %는 안됩니다.
마찬가지로 소수점 이하 px 도 안먹구요
그냥 33% 하고 전체를 center 로 두거나 해야겠죠?
33.33% 라는걸 3개 곱하면 99.99%가 되겠죠
그러면 여분이 없다는게 되고 40px 씩을 더 주니까 그만큼 밀려나게 된겁니다.
440은 x 3하면 1320 즉 40씩 여분 2번을 줘도 1400이니까 밀려나지 않는거죠
33.33%로 하지 마시고 30%씩 3개 주시고 여분을 5% 2개를 주시던 합하여 100%가 되게 만드세요
