개발자 노트

문제 CSS의 flex-wrap을 이용해서 list 아이템(li)을 반응형으로 정렬하고 싶었다. 아래의 그림과 같이 list 아이템의 컨테이너(ul)는 브라우저 가운데 정렬되도록 하며, list 아이템들은 컨테이너 안에서 왼쪽 정렬하고 싶었다. 그런데 브라우저의 크기를 좌우로 조절했을 때, 아래 그림과 같이 컨테이너 안의 오른쪽 공간의 크기가 아이템 너비에 미치지 못할 경우 그 공간이 여백으로 그대로 남아있는 문제가 발생했다. 그래서 컨테이너에 justify-contents: center 값을 추가했더니, 아래 그림과 같이 컨테이너 안의 아이템들이 왼쪽 정렬되지 않는 문제가 생겼다. 해결 문제의 원인은 flex layout에서 wrap이 발생할 때 남게 되는 공간의 너비를 다시 계산해서 배치해주는 작업을..

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