최대 1 분 소요

수정 사항 1. 미디어 쿼리 성공

처음에는 span, table, textarea, span 이렇게만 두고 열은 1fr 5fr 1fr이렇게 두었기 때문에 textarea가 옆으로 딸려 올라왔던 것이다. 따라서 table 태그를 span으로 감쌌고, textarea를 span으로 감쌌다. 그럼에도 원하는 대로 나오지 않았던 이유는 계산기와 출력기의 시작, 끝 그리드 값을 입력하지 않아서 그랬다.
이렇게 문제를 해결했다고 생각했는데 계산기와 출력기가 위아래로 동시에 배치되지 않는 문제가 생겼다. css는 위에서부터 순차적으로 웹에 적용이 되기 때문에 미디어쿼리를 이용하더라도 변경되는 값들이 있는 태그들보다 아래에 위치시켜야 된다.

수정 사항 2. .js파일 따로 정리

이 부분은 깃허브 Calculator 레퍼토리에 저장해 놓았다.

See the Pen cal2 by sohnsookyoung (@sooking87) on CodePen.

끝~~~!

댓글남기기