개발자 노트

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

문제 main.js 파일에 class를 정의해둔 파일을 import 하는 과정에서 문제가 발생했다. net::ERR_ABORTED 404 (Not Found) 에러 메시지는 다음과 같다. 참고로 파일의 계층 구조는 다음과 같다. src 폴더 안에 main.js와 mousePointer.js 파일이 들어있으며, mousPointer.js는 class를 정의해둔 파일이다. 해결 에러 메시지를 자세히 보면 URL에서 src 경로가 두 번 표시된다는 것을 발견할 수 있다. http://127.0.0.1:5500/src/src/mousePointer.js http://127.0.0.1:5500/src/mousePointer.js main.js를 살펴보면 import 하려는 파일의 경로로 src 폴더를 함께 써준 ..

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