중요 5대장
calc
:계산기
px, %가 들어가는 모든 속성에서 사용 가능
사칙연산 앞, 뒤에 무조건 빈칸 (-가 빈칸을 두지 않으면 인식이 안됨)
calc(사용할 공간 크기 / 한 줄에 놓고 싶은 칸 수)
calc((사용할 공간 크기 - 여백or테두리)/ 한 줄에 놓고 싶은 칸 수))
0.0px까지도 잘라서 빈공간없이 나눌 수 있다.
box-sizing: border-box; 못 쓸 때도 사용이 가능하다.
-> 테두리나 패딩값을 빼고 나누면 됨.
-> calc((100% - 12px) / 6); /12px은 테두리값임./
calc((사용할 공간 크기 - 여백or테두리)/ 한 줄에 놓고 싶은 칸 수)-0.1px)
-> 익스프로워같은 경우에는 공간이 아주 조금 (소숫점자리) 부족해서 아래로 내려갔다가 다시 올라오는 경우가 있다. 그럴 땐 마지막에 0.1px(작은 숫자라 티 안남) 더 줄이면 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{margin: 0px;}
ul{
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
list-style: none;
}
li{
float: left; /*블록레벨이라 밑으로 떨어지지만, 인라인레벨처럼 옆으로 정렬*/
border: 1px solid;
margin-right: 10px;
padding: 10px;
/*-> 테두리값 => 1px*양쪽*메뉴4개 , 마진값 => 10px*(메뉴4개-마지막꺼 마진 안 준 1개)
, 패딩값 => 10px*양쪽*메뉴4개
*/
width: calc((100% - (1px * 2 * 4) - (10px * 3) - (10px * 2 * 4))/4);
/* box-sizing: border-box; */
}
.last{
margin-right: 0;
}
</style>
</head>
<body>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li class="last">menu4</li>
</ul>
</body>
</html>
계속 나아가기
정말 잘 정리된 내용이네요!