23,100원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결입문자를 위한, ES6+ 최신 자바스크립트 입문
[계산기 CSS Markup]output 창의 높이관련
안녕하세요. output 창의 높이가 강사님 화면처럼 고정되지가 않고, previous 와 current.textContent 값이 있으면 높이가 조금 높아졌다가, 값이 없으면 작아집니다. 계산기의 style.css 를 그대로 따라 했고요.안되서 강의 파일을 그대로 복사했어도 동일합니다.당췌 이유를 모르겠습니다. ㅡㅡ; ( 참고로 강의 파일에는 right 로 되어 있어서 botton 으로 수정해서 적용했습니다. )body { height: 100vh; background: linear-gradient(to right, #00aaff, #0f4c81); } [index.html] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <script src="main.js" defer></script> <title>계산기</title> </head> <body> <div class="calculator-grid"> <div class="output"> <div class="previous-operand" data-previous-operand></div> <div class="current-operand" data-current-operand></div> </div> <button class="span-two" data-all-clear>AC</button> <button data-delete>DEL</button> <button data-operation>÷</button> <button data-number>1</button> <button data-number>2</button> <button data-number>3</button> <button data-operation>×</button> <button data-number>4</button> <button data-number>5</button> <button data-number>6</button> <button data-operation>+</button> <button data-number>7</button> <button data-number>8</button> <button data-number>9</button> <button data-operation>-</button> <button data-number>.</button> <button data-number>0</button> <button class="span-two" data-equals>=</button> </div> </body> </html> [style.css]* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(to bottom, #00aaff, #0f4c81); } .calculator-grid { display: grid; justify-content: center; align-content: center; min-height: 100vh; grid-template-columns: repeat(4, 100px); grid-template-rows: minmax(120px, auto) repeat(5, 100px); } .calculator-grid > button { cursor: pointer; font-size: 2rem; border: 1px solid #fff; outline: none; background-color: rgba(255, 255, 255, 0.75); } .calculator-grid > button:hover { background-color: rgba(255, 255, 255, 0.9); } .span-two { grid-column: span 2; } .output { grid-column: 1/-1; background-color: rgba(0, 0, 0, 0.75); display: flex; align-items: flex-end; justify-content: space-around; flex-direction: column; padding: 10px; word-wrap: break-word; word-break: break-all; } .output .previous-operand { color: rgba(255, 255, 255, 0.75); font-size: 1.5rem; } .output .current-operand { color: #fff; font-size: 2.5rem; }
- 미해결입문자를 위한, ES6+ 최신 자바스크립트 입문
[계산기]소수점 이하 '0' 버튼 입력시 상단표시 관련
안녕하세요.계산기 코드에서, 소수점선택이랑, 0 을 선택하는 경우,floatNumber 는 해당값 인식이 안되어, 상단 currentDisplay에 표시가 안되고,이후 다른 숫자를 누르면 소수점 및 0을 포함하여 floatNumber 값이 인식이 되어 상단에 함께 표시가 되던데요. 소수점은 아니더라도 소수점 이하 0을 눌렀을 때에 상단화면에 0까지를 바로 표시가 되도록 하려면 if 문으로 추가 코딩을 해야 하는 거겠죠??
- 해결됨입문자를 위한, ES6+ 최신 자바스크립트 입문
ebook 문의
소스파일은 받았는데 ebook은 어디서 받아야하나요?
- 미해결입문자를 위한, ES6+ 최신 자바스크립트 입문
삭제를 다 하고 싶은데요,,,
앞전 질문에서 앞에 추가하기도 X 버튼이 뜨게 잘 되었습니다. 감사드려요...복사하지 않고 입력을 해본다는게 그만 오타를 못찾는 바람에 안되었습니다.한가지 더 추가로 해보려고 하는데, 타깃제거를 클릭하면 추가한 목록들을 다 지우게 하고 싶어서 수정을 해보았는데,,,,추가버튼을 클릭할때 추가된 li에 item 이라는 클래스를 다 만들게 했구요 li.classList.add('item');그랬더니 추가항목에 클래스가 잘 추가된거까지는 확인을 했습니다.그런다음,,,removeTargetBtn.addEventListener('click', function(){ let targetList = document.querySelectorAll('.item'); targetList.remove(); });querrySelectorAll 로 추가된 클래스 item 를 모두 가져와서 remove를 했는데,,,,,문법상으로 틀린게 있는거 같은데....ㅠㅠ
- 미해결입문자를 위한, ES6+ 최신 자바스크립트 입문
질문드립니다.
뷰강의를 듣고 자바스크립트도 듣고 싶어서 강의를 듣는중인데요, DOM 에서 HTML추가요소제거 강의에서"앞에추가"버튼을 클릭해서 추가될때 뒤에 추가되는것처럼 X을 나오게 하려면 어떻게 해야 하나요?예제는 뒤에 추가하는것만 x버튼이 나오는데...뒤에 추가하는것처럼 하려고 헀더니 에러가 나서 아무래도 제가 잘 못한거 같아서요
- 미해결입문자를 위한, ES6+ 최신 자바스크립트 입문
fontawesome kit를 사용하는 네모박스만 나오고아이콘은 나오지 않아요
실습에 폰트 어썸을 설치를 따라고 하고 있는데폰트어썸 스크립트는 메일을 통해 받아서 kit js 파일 경로를 설정했는데 폰트어썸 태그를 실행하면 네모 박스만 나옵니다.아이콘이 나오질안하요 fas는 나오는데 검색한 아이콘들은fa-brand밖에 없는데요 fas는 어디서 검색해야 나오나요?