JavaScript Calculator 과제를 나름대로의 생각으로 개선하던 중 display 아래(이미지의 빨간 박스 부분)에 계산식(과정)을 보여주고 싶었다.
문제는 과제에 HTML 파일을 건드리지 말아야 한다는 조건이 있었다는 것이다.
그래서 자바스크립트로 HTML에 div를 생성하는 방법을 찾아봤다.
과정은 생각보다 단순했다.
elem.className
) 요소의 내용을 미리 넣어줄 수도 있다(elem.innerHTML
).// div 만들기
let newDiv = document.createElement('div');
// 만든 요소의 클래스를 'calculateProcess'로 설정
newDiv.className = 'calculateProcess';
newDiv.innerHTML = '0';
// display 뒤에 삽입해주기
display.after(newDiv);
elem.className
에 무언가를 대입하면 클래스 문자열 전체가 바뀐다.
이렇게 속성값 전체를 바꾸는 게 아니고 클래스 하나만 추가하거나 제거하고 싶을 때는 elem.classList
라는 프로퍼티를 사용할 수 있다. elem.classList
엔 클래스 하나만 조작하게 해주는 메서드인 add
|remove
|toggle
이 구현되어 있다.
newDiv.className = 'calculateProcess'; // 요소의 클래스를 'calculateProcess'로 바꾸자
target.classList.add('isPressed'); // isPressed 클래스를 추가하자
if (condition1) { // condition1이 참이면
element.classList.remove('isPressed'); //엘리먼트의 클래스 중 'isPressed'를 지워주자
}
이렇게 클래스 속성값 전체를 바꾸고 싶을 때는 className
으로, 개별 클래스를 조작하고 싶을 때는 classList
를 사용한다.
classList
에 구현된 메서드는 다음과 같다.
elem.classList.add/remove("class")
– class를 추가하거나 제거elem.classList.toggle("class")
– class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가elem.classList.contains("class")
– class 존재 여부에 따라 true
/false
를 반환element.style.fontSize
elem.style.cssText
로 완전히 다시 쓰기style.cssText
를 사용해야 한다.// cssText를 사용하면 'important' 같은 규칙도 설정할 수 있다. 백틱을 사용한다는걸 기억!
div.style.cssText=`color: red !important;
background-color: yellow;
width: 100px;
text-align: center;
`;
style.cssText
를 사용하면 기존 스타일에 스타일을 추가하는 게 아니라 전체를 교체해버리기 때문에 잘 사용하고 있는 스타일이 실수로 지워진다는 위험이 있어서 잘 쓰지 않는다. 그렇지만 요소를 새로 만들어서 거기에 스타일을 적용할 때는 기존 스타일이 없기 때문에 style.cssText
를 사용할 수 있다.
div.setAttribute('style', 'color: red...')
를 사용해 속성을 설정해도 style.cssText
과 같은 효과를 볼 수 있다.
JAVASCRIPT.INFO의 스타일과 클래스 문서를 통해 자바스크립트를 사용해 스타일과 클래스를 다루는 방법에 대한 더 자세한 내용을 확인할 수 있다.
토요일까지 JavaScript Calculator 과제의 Advanced Challenge까지 모두 구현했다.
그래서 오늘은 Nightmare 단계에 도전해보았다.
- 키보드로도 계산기를 작동시킬 수 있게 하자.
- 삼성 갤럭시, 구글 계산기의 작동과 같게 만들어보자.
- 공학용 계산기를 구현해보자.
오늘은 키보드로 계산기를 작동시키는 기능까지 구현했다.
오늘 공부한 JavaScript 키보드 이벤트에 대해서는 따로 정리해두었다.
블로그는 밀리지 말고 하자.
사용했던 개념들을 정확하게 알려고 파고들다보니 내용이 너무 많아지고, 그걸 또 정리해서 작성하려다보니 시간이 너무 오래 걸린다.
핵심 개념만 파악해서 빠르고 간결하게 매일매일 기록하는 버릇을 들이자.
p.s. 일찍 자자.😐
box-shadow
로 Neumorphism UI 만든거 정리하기