jineecode

content의 높이가 작으면 footer 가 아래에 있지 않고 애매하게 중간에 있는 경우가 있다. 관리자도구를 확인해보면 html 자체의 높이가 작아서 나타나는 문제이다. 컨텐츠만큼 html의 height가 auto로 늘어나있기 때문에 height를 100%로 맞춰준다. 차례로 컨텐츠를 감싸고 있는 body에 height: 100%를 주고 wrap을 min-height : 100%; 으로 맞춰준다. (wrap이 min-height가 아닌 height: 100%;를 주면 창의 높이를 낮춰봤을 때 footer가 wrap 중간에 오고만다.) wrap 안에 담길 footer 자리를 아래에 만들어주자. padding-bottom 으로 footer 높이 만큼의 높이를 남겨준다. 또한 footer의 부모가 wrap..

grid는 2차원적임. 일단 그리드를 선언하면 column과 row 값을 주어야 함 (디폴트 값이 없음) .container{ background-color: darkblue; display: grid; grid-template-columns: 40% 60%; } .item { background-color: tomato; border: 1px solid; } .item:nth-child(odd){ background-color: blueviolet; border: 1px solid; } grid-template-columns: 40% 60%; grid-template-columns: 4fr 6fr; (같은 의미임 그러나 fr을 더 많이 씀) .container{ background-color: dark..