* {margin: 0; padding: 0;}
#wrap {width: 100%;}자꾸 까먹는다!!!!
calc(100% - 200px)Ｄ유형 공부중인데, clac 이거 쓸때 안에 -양 옆에 띄어야 적용이 됨...
clac(100%-200px) XXXXXXX
clac(100% - 200px) OOOOOOOO
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D-1</title>
<style>
* {margin: 0; padding: 0;}
#wrap {width: 100%; display: flex;}
#aside {width: 200px; height: 850px; background-color: #aaa;}
#main {width: calc(100% - 200px); height: 850px; background-color: #bbb;}
#footer {width: 100%; height: 100px; background:#ccc;}
</style>
</head>
<body>
<div id="wrap">
<aside id="aside"></aside>
<main id="main"></main>
<footer id="footer"></footer>
</div>
</body>
</html>#wrap에 flex-wrap이 들어가야 하는 이유 : display: flex는 기본적으로 자식들을 한 줄에 놓으려고 한다.
그런데 footer는 아래 줄에 있어야 하니까. 다음 줄로 내려갈 수 있게 flex-wrap: wrap;을 주는 것