개발자 노트

문제 부모 노드의 CSS 스타일을 display: flex로 설정해둔 다음 자식 노드를 배치했다. 그렇게 배치한 자식노드 중의 하나인 버튼을 숨기고 싶어서 버튼에 display: none 설정 값을 줬다. 그랬더니 버튼 다음으로 위치된 박스들의 위치가, 사라진 버튼의 위치 쪽으로 밀려 올라오는 문제가 발생했다. 해결 버튼의 스타일을 display: none이 아닌 visibility: hidden으로 설정하니 문제가 해결되었다. 코드 자바스크립트에서 버튼의 위치는 그대로 남겨둔채 숨기고 싶을 때, button.style.visibility = 'hidden' 버튼을 다시 보이게 하고 싶을 때, button.style.visibility = 'visible'